Adding a Radar chart type will be a nice improvement in RadHtmlChart.
In scenarios where the Series are Column/Bar and Positive and Negative values are present, the XAxis labels are overlapped by the Series themselves. Expose an additional Position property for the axis labels that controls their position to Top/Bottom. For the time being you can choose either approach: 1) Use a second x-axis that stores only the labels: a) Category Axis example: <script> function BottomXAxisLabels() { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis); axis.line.visible = false; chart.setOptions({ categoryAxis: [{}, axis] }); chart.options.valueAxis.axisCrossingValues = [0, -99999999999]; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="BottomXAxisLabels" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <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> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> b) Numeric axis example: <script> function BottomXAxisLabels() { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); var axis = $telerik.$.extend(true, {}, chart.options.xAxis); axis.line.visible = false; chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] }); chart.options.yAxis.axisCrossingValues = [0, -99999999999]; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="BottomXAxisLabels" /> <PlotArea> <Series> <telerik:ScatterLineSeries Name="Product 1"> <SeriesItems> <telerik:ScatterSeriesItem Y="15000" X="5" /> <telerik:ScatterSeriesItem Y="-4000" X="6" /> <telerik:ScatterSeriesItem Y="10000" X="7"/> </SeriesItems> </telerik:ScatterLineSeries> </Series> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> 2) Use the TextStyle property of the RadHtmlChart , in order to set higher margin for the XAxis labels. For example: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance> <TextStyle Margin="135 0 0 0" /> </LabelsAppearance> <Items> <telerik:AxisItem LabelText="item1" /> <telerik:AxisItem LabelText="item2" /> <telerik:AxisItem LabelText="item3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart> Note: Labels margin and chart's PlotArea height are inversely proportional - the higher the margin is the lower the chart's PlotArea height will be. This resizing is needed, in order for the chart's main dimensions to be kept.
Currently margin and padding can be set in the RadHtmlChart through the TextStyle property exposed by the Axis Label, Axis Titles, Chart Legend, Chart Title and Series Labels. Add the ability to control the margin and padding for the PlotArea as well. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.plotArea.margin = { top: 100, right: 100, bottom: 50, left: 100 }; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400" Height="400"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Name="Item 1" Y="30"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 2" Y="10"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 3" Y="20"></telerik:PieSeriesItem> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Currently ClientTemplates are exposed only for the Series labels and tooltips. Improving this functionality will let you feed data for the legend from more than one column of the datasource as well as to format numbers and dates in the legend. The benefit will be essential for Pie and Donut series. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.legend.labels.template = "#=kendo.format(\'{0:d}\',dataItem.SellDate)#"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px"> <PlotArea> <Series> <telerik:PieSeries DataFieldY="SellQuantity" NameField="SellDate"> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
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.
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>
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>
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.
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>
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>
For the time being series can be stacked through the chartObject. For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=AreaChart.ClientID%>"); chart._chartObject.options.seriesDefaults.stack = true; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:AreaSeries Name="Sales" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="400" /> <telerik:CategorySeriesItem Y="500" /> <telerik:CategorySeriesItem Y="720" /> <telerik:CategorySeriesItem Y="1300" /> <telerik:CategorySeriesItem Y="450" /> <telerik:CategorySeriesItem Y="800" /> <telerik:CategorySeriesItem Y="900" /> </SeriesItems> </telerik:AreaSeries> <telerik:AreaSeries Name="Expenses" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="700" /> <telerik:CategorySeriesItem Y="900" /> <telerik:CategorySeriesItem Y="420" /> <telerik:CategorySeriesItem Y="1100" /> <telerik:CategorySeriesItem Y="650" /> <telerik:CategorySeriesItem Y="600" /> <telerik:CategorySeriesItem Y="700" /> </SeriesItems> </telerik:AreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
For example by exposing an additional width property.
Currently there are only three properties exposed by the MarkersAppearance - MarkersType, BackgroundColor and Visible in AreaSeries, LineSeries, ScatterSeries and ScatterLineSeries. Expose more properties like Size, BorderColor and BorderWidth for the markers in the mentioned Series. For the time being the following workaround can be used: function pageLoad() { var circle = document.getElementsByTagName("circle"); for (var i = 0; i < circle.length; i++) { //Modify the size of the marker circle[i].r.baseVal.value = 15; } //Modify the width of the marker border $telerik.$('circle').attr('stroke-width', 13); }