Add this functionality out of the box to navigator. The functionality made by these buttons(+/-) are more gentle that the navigator.
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.
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>
Issue will be fixed for Q3 2014 release. For the time being you can manually set color to the selection hint: CSS: <style> .k-chart .k-navigator-hint .k-tooltip { color: black; } </style>
Currently when LineSeries Item's YValue is smaller than the BarSeries/ColumnSeries Item's value and both Series Items share the same category, the BarSeries/ColumnSeries Item is the one that receives the mouseover event, so only the bar/column item tooltip is shown. It is not possible to hover over the marker for the LineSeries and trigger client-side event handlers or show its tooltip. The LineSeries can be hovered/clicked only outside of the area of the Bar/Column Item.
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.
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].missingValues = "Gap"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:LineSeries MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem /> <telerik:CategorySeriesItem Y="30" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Will be useful for pie/donut charts in responsive web page scenarios.
Similar to the SplineArea in RadChart: http://www.telerik.com/help/aspnet-ajax/chart-types-spline-area.html
For the time being the series can be stacked through the chartObject. For example: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=LineChart.ClientID%>"); chart._chartObject.options.seriesDefaults.stack = true; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:LineSeries 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:LineSeries> <telerik:LineSeries 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:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
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
When a pie chart is rendered with large labels they may be clipped because the pie chart is not sized correctly. When the legend is enabled the pie chart sizes correctly to handle long labels.
The axis is numerical, but it could have a DataLabelsField property like the x-axis so text for each label is taken from the datasource (a label per datasource row). Then the numerical values (YValue) of each item can be rounded to the nearest integer and if that matches an axis item's index the series item will correspond to this axis item.
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>
Currently BarSeries and ColumnSeries can be stacked in only one stack. Add the ability to group the stacked bars/columns Series through additional property (e. g StackName) for each Series in different stacks.
It would be helpful to have a way to set the major tick step value via the RadHtmlChart control. This can be set on the client side, but it seems like a missing feature since I can change the major tick size and label step values via the control axis attributes. Here's an example with my suggested attribute shown in comments on the xAxis below. <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="RequestDays"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:AreaSeries Name="Last Year" DataFieldY="Last"></telerik:AreaSeries> <telerik:AreaSeries Name="Current Year" DataFieldY="Current"></telerik:AreaSeries> </Series> <XAxis Name="Days" DataLabelsField="Days" MajorTickSize="5"> <%--MajorTickStep="7"--%> <LabelsAppearance Step="14" /> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script type="text/javascript"> function OnLoad(chart) { var widget = chart.get_kendoWidget(); widget.options.categoryAxis.majorTicks = { step: 7 }; widget.redraw(); } </script>
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>