A good improvement in RadHtmlChart would be the introduction of Waterfall series.
When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var pieChart = $find('<%=PieChart1.ClientID%>'); pieChart._chartObject.options.seriesDefaults.labels.distance = 10; pieChart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="300" Height="300"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Name="Item 1" Y="18.3"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 2" Y="35.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 3" Y="38.3"></telerik:PieSeriesItem> </SeriesItems> </telerik:PieSeries> </Series> </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 property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.border) can be set through the chartObject. For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=PieChart1.ClientID%>"); chart._chartObject.options.legend.border = { width: 2, color: "green", dashType: "longDashDotDot" } chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <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>
We are trying to convert a websites 11 year old controls from a different vendor to telerik. All of the controls have been replaced except for the RadHtmlChart, which has limited customization of the legend. Specifically we have the following issues: 1) The legend color squares are too small. You can see the difference in the attachment "competitor" vs "telerik". REQUEST: Set the size of the color squares. 2) The legend spacing between items is not customizable and is too compressed for our liking. See "competitor" vs "telerik" to see the difference. REQUEST: Allow padding or margin between legend items. 3) The legend size cannot be set to a fixed width. For a left aligned legend, this results in multiple charts having inconsistent alignment. Setting a different margin for each chart individually does not fix the problem. Depending on the data fed to the charts, their position changes. See the "multiple-charts" attachment for an example. REQUEST: Allow a fixed legend size so multiple charts can be aligned. 4) For left-aligned charts, the legend cannot be set to the top. REQUEST: Allow TopLeft, TopRight options for legend alignment. Thank you, David A.
1.Today: When vertical axis are out of navigator range from to they are seen. 2.Suggtion: Give option to programmer to choose if to show or hide. 3.The same idea for plot bands,
Add this functionality out of the box to navigator. The functionality made by these buttons(+/-) are more gentle that the navigator.
For the time being the property can be set through the chartObject. For example: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid chart._chartObject.options.categoryAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.categoryAxis.minorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.minorGridLines.dashType = "dot"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
When the data passed to the RadHtmlChart with "stock" layout presents the highest and lowest base units, you must scroll the mouse wheel in order to navigate to the smallest base units. This issue can be handled for example by exposing a scroller in the navigator that let you select smaller date ranges.
Will be useful for pie/donut charts in responsive web page scenarios.
In the Radchart there is a property called activeregion where the user can add a reference to html link. When the user clicks on the chart title, he can navigate to a new web page. This feature is not available in the new HtmlRadChart . We think that is suitable to have this function in the new HtmlRadchart. It can be even extended to axis labels of HtmlRadchart. Thank you for your help Best Regards AE
For the time being you can set the types through the kendoWidget: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.options.series[0].type = "verticalLine"; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:LineSeries> </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>
The property will control the distance between the corresponding series items.
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.
For the time being the property can be set through the kendo widget: <script type="text/javascript"> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.series[0].color = function (e) { if (e.value > 20) { return "red"; } else { return "green"; } } kendoWidget.redraw(); } </script> <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>
I would like to suggest ability to display data series in doughnut and pie charts, see attached example from Excel. And thanks for a great Telerik experience, you make my development work very easy.