Declined with the following reason - chart series are preserved in the ViewState by default. You can do one of the following: 1) Either disable the ViewState of the chart or its container: ASPX: <asp:Panel ID="Panel1" runat="server" EnableViewState="false" /> C#: RadHtmlChart chart1 = new RadHtmlChart(); chart1.EnableViewState = false; 2) Or clear the chart Series collection after adding the chart to the page: RadHtmlChart chart1 = new RadHtmlChart(); chart1.ID = "myChart"; //Add the chart to the page Panel1.Controls.Add(chart1); //Clear the series after adding the chart to the page chart1.PlotArea.Series.Clear();
The option to generate a chart data table (based on the chart series) below a chart is available when using the RadChart control. A similar option/properties would be nice within the RadHtmlChart control. Thanks
Is there any plans to add a Server Side series click event in RadHTMLChart? Currently it is only available via the Client side.
The options for positioning a legend in a RadHtmlChart are somewhat limited. Useful extensions: 1. Support Left/Center/Right options for legends positioned at top and bottom; support Top/Middle/Bottom options for legends positioned at left and right. 2. Support positioning legends within the plot area. For the time being the following workaround can be used: <script> function pageLoad() { var kendoWidget1 = $find("<%=PieChart1.ClientID%>").get_kendoWidget(); kendoWidget1.options.legend.position = "custom"; kendoWidget1.options.legend.offsetX = 300; kendoWidget1.options.legend.offsetY = 80; kendoWidget1.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> <SeriesItems> <telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" /> <telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" /> <telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" /> <telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" /> <telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" /> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart>
The OnClientPlotAreaClicked event could be similar to the OnClientSeriesClicked event. It might be used for charts which are very small in size and clicking an individual series is not so easy. For the time being the following workaround can be used: ASPX: <script type="text/javascript"> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.bind('plotAreaClick', plotAreaClick); } function plotAreaClick(e) { if (e.originalEvent.type === "contextmenu") { // Disable browser context menu alert('rightClick'); e.originalEvent.preventDefault(); } } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
For the time being the following workaround can be used: Category Axis: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.categoryAxis.labels.template = "Item: #=value#"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> <telerik:AxisItem LabelText="4" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart> Numeric Axis: <script> function changeValues(value) { var newValue; switch (value) { case 1: newValue = "AA"; break; case 2: newValue = "BB"; break; case 3: newValue = "CC"; break; case 4: newValue = "DD"; break; default: newValue = value; } return newValue; } function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.xAxis.labels.template = "#=changeValues(value)#"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ScatterLineSeries Name="series 1"> <SeriesItems> <telerik:ScatterSeriesItem Y="30" X="1" /> <telerik:ScatterSeriesItem Y="10" X="2" /> <telerik:ScatterSeriesItem Y="25" X="3" /> <telerik:ScatterSeriesItem Y="20" X="4" /> </SeriesItems> </telerik:ScatterLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart.get_kendoWidget().options.valueAxis.labels.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <YAxis> <LabelsAppearance DataFormatString="dd{0}"> </LabelsAppearance> </YAxis> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> <telerik:AxisItem LabelText="item 4" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Hi! I don't know if could be a other type for the html chart control. I want a donut with only 2 series like a points in a exam for example 100/120 and the points 100 shows in the center of the donut, maybe I would like to change the 100 points with a image
For the time being you can use the following JavaScript workaround: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:LineSeries Name="series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis MinValue="1"> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script> //JavaScript workaround function isNumber(val) { return typeof val === "number" && !isNaN(val); } var dataviz = kendo.dataviz, inArray = dataviz.inArray, deepExtend = kendo.deepExtend, math = Math, AREA = "area", VERTICAL_AREA = "verticalArea", VERTICAL_LINE = "verticalLine", LINE = "line"; kendo.dataviz.CategoricalPlotArea.fn.filterSeries = function (currentSeries, categoryAxis) { var range = categoryAxis.totalRangeIndices(); var justified = categoryAxis.options.justified; var outOfRangePoints = inArray(currentSeries.type, [LINE, VERTICAL_LINE, AREA, VERTICAL_AREA]); var categoryIx; range.min = isNumber(categoryAxis.options.min) ? math.floor(range.min) : 0; range.max = isNumber(categoryAxis.options.max) ? (justified ? math.floor(range.max) + 1 : math.ceil(range.max)) : currentSeries.data.length; currentSeries = deepExtend({}, currentSeries); if (outOfRangePoints) { var minCategory = range.min - 1; var srcCategories = categoryAxis.options.srcCategories || []; if (minCategory >= 0 && minCategory < currentSeries.data.length) { categoryIx = minCategory; currentSeries._outOfRangeMinPoint = { item: currentSeries.data[categoryIx], category: srcCategories[categoryIx], categoryIx: -1 }; } if (range.max < currentSeries.data.length) { categoryIx = range.max; currentSeries._outOfRangeMaxPoint = { item: currentSeries.data[categoryIx], category: srcCategories[categoryIx], categoryIx: range.max - range.min }; } } categoryAxis._seriesMax = math.max(categoryAxis._seriesMax || 0, currentSeries.data.length); currentSeries.data = (currentSeries.data || []).slice(range.min, range.max); return currentSeries; } </script>
The workaround is to convert the color names to HEX, for example through the following HexConverter() method: ASPX: <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1"> </telerik:RadClientExportManager> <telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1" DataFieldY="myValues" ColorField="Color"> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <script> var $ = $telerik.$; function exportRadHtmlChart() { $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart")); } </script> C#: protected void Page_Load(object sender, EventArgs e) { DataTable dt = GetData(); for (int i = 0; i < dt.Rows.Count; i++) { //Not all Color Names can be exported // dt.Rows[i]["Color"] = ColorTranslator.ToHtml(GetColor(i)); //Convert colors to HEX works properly dt.Rows[i]["Color"] = HexConverter(GetColor(i)); } RadHtmlChart1.DataSource = dt; RadHtmlChart1.DataBind(); } public static DataTable GetData() { DataTable dt = new DataTable("ChargeData"); dt.Columns.Add("myValues", typeof(int)); dt.Columns.Add("Color", typeof(string)); dt.Rows.Add(11, ""); dt.Rows.Add(12, ""); dt.Rows.Add(13, ""); dt.Rows.Add(14, ""); dt.Rows.Add(15, ""); dt.Rows.Add(16, ""); dt.Rows.Add(17, ""); dt.Rows.Add(18, ""); dt.Rows.Add(19, ""); dt.Rows.Add(20, ""); return dt; } public static String HexConverter(System.Drawing.Color c) { return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2"); } public static Color GetColor(int index) { return colors[index % colors.Length]; } public static readonly Color[] colors = { Color.Orange, Color.Violet, Color.MediumSeaGreen, Color.HotPink, Color.Black, Color.DarkGoldenrod, Color.DarkMagenta, Color.Chocolate, Color.DarkOliveGreen, Color.DarkTurquoise };
Currently when RadHtmlChart is placed inside RadSplitter with RadSlidingZone a JavaScript error is thrown when the following conditions are met: 1.RadHtmlChart doesn't have its width property set 2.The position of the RadHtmlChart's legend is changed in the codebehind The workaround is to set the width property of the chart.
A workaround is to use the ClientTemplate and change the strings manually with some JavaScript (http://www.telerik.com/help/aspnet-ajax/htmlchart-client-templates-for-tooltips-and-labels-execute-javascript-and-display-html.html), e.g.: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px" Height="400px"> <PlotArea> <Series> <telerik:BarSeries> <LabelsAppearance> <ClientTemplate> #if (value > 0) {# $#=value# #} else {# -$#=value * -1# #} # </ClientTemplate> </LabelsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="20" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="-30" /> </SeriesItems> </telerik:BarSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Currently labels of SeriesItems with values greater or equal to the YAxis MaxValue are being cut: When chart title is not set. AND the labels position is set to Above for AreaSeries, LineSeries, ScatterSeries and ScatterLineSeries. OR the labels position is set to outsideEnd for ColumnSeries. In FireFox, Opera and WebKit browsers. For the time being the chart title can be set with space character.
For the time being the reversed properties can be set through the kendo widget: <script> function pageLoad(sender, args) { var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget(); var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget(); radarChart.options.valueAxis.reverse = true; polarChart.options.yAxis.reverse = true; radarChart.options.categoryAxis.reverse = true; polarChart.options.xAxis.reverse = true; radarChart.redraw(); polarChart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> <Items> <telerik:AxisItem LabelText="January"></telerik:AxisItem> <telerik:AxisItem LabelText="February"></telerik:AxisItem> <telerik:AxisItem LabelText="March"></telerik:AxisItem> <telerik:AxisItem LabelText="April"></telerik:AxisItem> <telerik:AxisItem LabelText="May"></telerik:AxisItem> </Items> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:PolarAreaSeries Name=">12.3 knots"> <SeriesItems> <telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem> </SeriesItems> </telerik:PolarAreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
The property indicates whether the series name will be visible in the legend. For the time being the following workaround can be used: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart.get_kendoWidget().options.series[0].visibleInLegend = false; chart.get_kendoWidget().options.series[1].visibleInLegend = true; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="3" /> <telerik:CategorySeriesItem Y="4" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
The current behavior of the RadHtmlChart preserves only the bound datasource, however it doesn't store programmatically added series items after a postback. The workaround is instead of creating and adding series items programmatically, create a datatable and pass it as a datasource to the chart. For example: ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Add("id"); dt.Columns.Add("xValues"); dt.Columns.Add("yValues"); for (int i = 0; i < 5; i++) { dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i); } ScatterLineSeries sls1 = new ScatterLineSeries(); sls1.LabelsAppearance.DataFormatString = "{0:d}"; sls1.DataFieldX = "xValues"; sls1.DataFieldY = "yValues"; RadHtmlChart1.PlotArea.Series.Add(sls1); RadHtmlChart1.DataSource = dt; RadHtmlChart1.DataBind(); }