The property will specify the client-side event handler that is executed when the RadHtmlChart is initialized on the client and will be called after chart's transitions' animation.
When Series are created programmatically, Axes settings are not preserved after postback. The workaround is to create an empty series in the markup. For example: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> ... <PlotArea> <YAxis>...</YAxis> <XAxis>...</XAxis> <Series> <telerik:ScatterLineSeries Name=" "> <Appearance FillStyle-BackgroundColor="Transparent"></Appearance> </telerik:ScatterLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Add the ability to click the legend's items in a similar way like the series 'items. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { //Attach the legendItemClick event on pageLoad: var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked); } //The following function toggles the visibility of the clicked series from the legend function OnLegendClicked(e) { //Get a reference to the chart and the target axis var chart = e.sender; var targetAxisName = e.series.axis; var numValueAxes = chart.options.valueAxis.length; //Iterate through the y-axes and toggle the visibility of the axis that corresponds to the clicked series from the legend for (var i = 0; i < numValueAxes; i++) { var currValueAxisName = chart.options.valueAxis[i].name; if (currValueAxisName == targetAxisName) { chart.options.valueAxis[i].visible = !chart.options.valueAxis[i].visible; } } } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries AxisName="axis1" Name="Series1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries AxisName="axis2" Name="Series2"> <SeriesItems> <telerik:CategorySeriesItem Y="3000" /> <telerik:CategorySeriesItem Y="1000" /> <telerik:CategorySeriesItem Y="2000" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries AxisName="axis2" Name="Series3"> <SeriesItems> <telerik:CategorySeriesItem Y="3500" /> <telerik:CategorySeriesItem Y="1500" /> <telerik:CategorySeriesItem Y="2500" /> </SeriesItems> </telerik:LineSeries> </Series> <YAxis Name="axis1" MinValue="0" MaxValue="30"> </YAxis> <AdditionalYAxes> <telerik:AxisY Name="axis2" MinValue="900" MaxValue="3600"></telerik:AxisY> </AdditionalYAxes> </PlotArea> </telerik:RadHtmlChart>
Currently MinValue and MaxValue properties of the Axes accepts only decimal, so that when the axes are of date type, Min and Max dates cannot be set. The workaround is to obtain the min and max values from the datasource field used for populating XAxis labels and set these values explicitly to the XAxis through the chartObject. For example: <script type="text/javascript"> function pageLoad() { //Get reference to the chart var chart = $find("<%=RadHtmlChart1.ClientID%>"); //Obtain charts datasource var currDataSource = eval(chart.get_dataSourceJSON()); //Get minValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField var minValue = currDataSource[0].myDataSourceField; //Get maxValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField var maxValue = currDataSource[currDataSource.length - 1].myDataSourceField; //Reference the chartObject's min and max properties chart._chartObject.options.xAxis.min = minValue; chart._chartObject.options.xAxis.max = maxValue; //Repaint the chart chart.repaint(); } </script>
A couple of suggestions in one... Please add interactivity between RadPivotGrid and HTMLChart similar to pivot charts in MS Excel - making the filters and selections. update both the chart and the pivot table. It will also be helpful if you can add splicers similar to PowerPivot. When you click on the chart, it opens a popup menu, relative to that area - where you can select to filter that axis or value in a series, change the aggregate calculation for that value (sum, count, average, etc.), change date ranges on a date axis - like, date range picker, by year, fiscal, quarter, week, etc. Thanks, Vermaak
When using custom shapes (circles, triangles, etc) in a RadHtmlChart, the custom shape should be displayed in the legend instead of always a square. This is because when printing with a black & white printer, the colored squares won't help the reader read the chart, however the shapes would.
Similar to the feature in RadChart - http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/logarithmicaxis/defaultcs.aspx. For the time being the following workaround can be used: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.valueAxis.type = "log"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <YAxis></YAxis> <Series> <telerik:ColumnSeries> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { double[] yValues = new double[] { 0.01, 0.05, 0.11, 2, 2.5, 10, 30 }; for (int i = 0; i < yValues.Length; i++) { CategorySeriesItem csi1 = new CategorySeriesItem() { Y = (decimal)yValues[i] }; (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(csi1); } }
Currenlty Series like Bubble, Bar, Column, Donut, Pie and Candlestick do not expose any appearance properties for the Series border. Expose appearance border properties like width, dashtype, color and opacity. Temporary workaround for managing the border appearance: Javascript: <script language="javascript"> function pageLoad() { var chart = $find("RadHtmlChart1"); chart._chartObject.options.series[0].border = { width: 2, color: "black", dashType: "dash", opacity: 0.2 } chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
A good improvement in the RadHtmlChart would be to add an Opacity property for the series, which would allow the control of its transparency. The property can be set through the chartObject: JavaScript: <script> function pageLoad() { var chart = $find("<%=BubbleChart.ClientID%>"); chart._chartObject.options.series[0].opacity = 0.3; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <PlotArea> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="5500" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="39000" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24400" /> <telerik:BubbleSeriesItem Size="42" X="20" Y="32000" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Similar to the RadChart's http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/intelligentlabels/defaultcs.aspx For the time being you can implement a custom logic for offsetting y point positions of labels. For example offset every 2nd item label position: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { offsetItemLabels(); } function offsetItemLabels() { //Find all text elements on the page var textElements = document.getElementsByTagName("text"); var numSeriesItemLabels = 0; //Iterate through the text elements for (var i = 0; i < textElements.length; i++) { var currTextEl = textElements[i]; //Set the desired string/symbol that represents the series labels var SeriesLabelSymbol = "@SL"; if (currTextEl.textContent.indexOf(SeriesLabelSymbol) != -1) { numSeriesItemLabels++; var currText = currTextEl.textContent.split(SeriesLabelSymbol); //Offset y point for every 2nd item label currTextEl.textContent = currText[1]; if ((numSeriesItemLabels) % 2 == 0) { currTextEl.attributes.y.textContent = currTextEl.attributes.y.textContent * 1 + 35; } } } } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <ChartTitle Text="Chart title"> </ChartTitle> <PlotArea> <Series> <telerik:LineSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="18" /> <telerik:CategorySeriesItem Y="18" /> <telerik:CategorySeriesItem Y="18" /> <telerik:CategorySeriesItem Y="18" /> </SeriesItems> <LabelsAppearance> <ClientTemplate> @SLCategory is #=category# Value is: #=value# </ClientTemplate> </LabelsAppearance> </telerik:LineSeries> </Series> <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>
Stacking of bar and column series should allow grouping. This could be done by making the Stacked property not a boolean, but a string to denote the group name.
In a chart that has stacked bar series and a line series the bar series become column series when the chart is data-bound. The solution is to declare the BarSeries above the LineSeries as follows: <%--BarSeries are declared above the LineSeries--%> <telerik:BarSeries Name="B1"> <Items> <telerik:SeriesItem YValue="10" /> <telerik:SeriesItem YValue="20" /> <telerik:SeriesItem YValue="30" /> </Items> </telerik:BarSeries> <%--LineSeries are declared below the BarSeries--%> <telerik:LineSeries Name="L1"> <Items> <telerik:SeriesItem YValue="15" /> <telerik:SeriesItem YValue="10" /> <telerik:SeriesItem YValue="20" /> </Items> </telerik:LineSeries>
This can be done by exposing a spacing property for the particular Series. For the time being mentioned properties can be set on the client through the chartObject of the RadHtmlChart: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> function ChangeSpace() { var chart = $find("<%=ColumnChart.ClientID%>"); chart._chartObject.options.series[0].spacing = 0.9; chart.repaint(); } function ChangeGap() { var chart = $find("<%=ColumnChart.ClientID%>"); chart._chartObject.options.series[0].gap = 10; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change Space" OnClientClicked="ChangeSpace" /> <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Change Gap" OnClientClicked="ChangeGap" /> <telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true"> .... </telerik:RadHtmlChart>
For the time being the property can be set on the client through the chartObject. For example: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].highlight = { markers: { visible: true } } chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:LineSeries> <MarkersAppearance Visible="false" /> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> <telerik:CategorySeriesItem Y="15" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Currently the appearance of the Series border cannot be controlled. Add the ability to change its width, color and dashtype. Declined with the following reason: Item is duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/50612
Currently the default pivot point for rotating the labels on the XAxis is the center of the label itself. Add the ability to change the pivot point to be the first symbol of the label. For the time being the property can be set via the kendo object (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.rotation.align): <script> function load(chart) { var align = "end"; //"center" chart.get_kendoWidget().setOptions({ categoryAxis: { labels: { rotation: { angle:45, align: align } } } }); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <ClientEvents OnLoad="load" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <Appearance></Appearance> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
As of R1 2017 you can use the stackTotal property of the labels: https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/show-stack-total --- old information For the time being this can be achieved by creating an additional bar/column series with the following settings: -series items are set with insignificantly small values (e.g. 0.001) -the name property of the series is not specified, so that it is not visible in the legend -the color of the series matches the color of the plot area, so that the series items and the legend of the series are not visible -clienttemplates for the labels of this series is used in order to sum up the grand total and display it An example on the described scenario can be found in the http://www.telerik.com/support/kb/aspnet-ajax/chart-%28html5%29/details/displaying-grand-total-in-stacked-series-labels-and-pie-series-legend KB article
Currently BarSeries/ColumnSeries are rendered like a "glass" gradient and PieSeries/DonutSeries like a "roundedBevel" gradient. Expose an OverlayGradient property that lets you control the gradient (e.g. "glass", "roundedBevel", "sharpBevel", "none"). For the time being the properties can be set through the chartObject: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart1 = $find("<%=ColumnChart1.ClientID%>"); //Set glass gradient to first series chart1._chartObject.options.series[0].overlay = { gradient: "glass" }; //Remove gradient from second series chart1._chartObject.options.series[1].overlay = { gradient: "none" }; chart1.repaint(); var chart2 = $find("<%=PieChart1.ClientID%>"); //Set sharpBevel gradient to pie series chart2._chartObject.options.series[0].overlay = { gradient: "sharpBevel" }; chart2.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series with Gradient"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> <telerik:CategorySeriesItem Y="16000" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series with no Gradient"> <SeriesItems> <telerik:CategorySeriesItem Y="35000" /> <telerik:CategorySeriesItem Y="10000" /> <telerik:CategorySeriesItem Y="20000" /> <telerik:CategorySeriesItem Y="17000" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <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="Pie with Gradient"> </ChartTitle> </telerik:RadHtmlChart>
Currently tooltips expose properties for changing the background color, format and visibility. Add more appearance options like color (Color property is already exposed), font, border width, border color and padding. For the time being the following workaround can be used: <style type="text/css"> .k-tooltip { /*Sets border width and color*/ border-width: 5px !important; border-color: Green !important; /*Sets padding*/ padding-left: 5px !important; padding-right: 5px !important; /*Sets FontSize, FontFamily and color*/ font: 15px Arial,Helvetica,sans-serif !important; color: Red !important; } </style>
Currently the Hay skin sets white color for the title, axes labels and legend in RadHtmlChart. For the time being the color of the mentioned elements can be changed through the TextStyle property - http://www.telerik.com/help/aspnet-ajax/htmlchart-appearance-labels-titles-font-settings.html.