The feature should be like the one in KendoUI' https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate For the time being it can be set through the chartObject: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script type="text/ecmascript"> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].aggregate = "sum"; chart.repaint(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px"> <PlotArea> <Series> <telerik:LineSeries DataFieldY="SellQuantity"> </telerik:LineSeries> </Series> <XAxis BaseUnit="months" DataLabelsField="SellDate"> <LabelsAppearance DataFormatString="d"> </LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> C#: using System.Data; protected void Page_Load(object sender, EventArgs e) { RadHtmlChart1.DataSource = GetData(); RadHtmlChart1.DataBind(); } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("SellQuantity", typeof(int)); dt.Columns.Add("SellDate", typeof(DateTime)); dt.Rows.Add(1, 2, new DateTime(2012, 06, 12)); dt.Rows.Add(2, 5, new DateTime(2012, 06, 13)); dt.Rows.Add(3, 6, new DateTime(2012, 06, 17)); dt.Rows.Add(4, 4, new DateTime(2012, 07, 18)); dt.Rows.Add(5, 7, new DateTime(2012, 07, 20)); return dt; }
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
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>
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>
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 you can set the property through the kendoWidget. All available options are available at http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.connectors <script> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject; kendoWidget.options.series[0].connectors = {width: "3", color: "#ff0000"}; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Y="30" /> <telerik:PieSeriesItem Y="10" /> <telerik:PieSeriesItem Y="20" /> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
When using the RadHtmlChart RadarSeries the axis are default drawn like a spiders web. (see screenshot) A common request is that axis lines for this type of graph are drawn as circles (represending more a Radar type look). This can currently be achieved by accessing the Kendo widget like so: $find('RadarAreaChart').get_kendoWidget().options.valueAxis.majorGridLines.type="arc"; $find('RadarAreaChart').get_kendoWidget().options.valueAxis.minorGridLines.type="arc"; $find('RadarAreaChart').get_kendoWidget().redraw(); But it would be VERY convenient (and probably very easy to implement for you guys :-) if it was a setting on the RadarSeries itself (or perhaps on the axis of the RadarSeries. E.g. property on RadarSeries called AxisType with values (Spider or Radar). Best Regards Thomas
The selection (http://demos.telerik.com/kendo-ui/chart-api/selection) can be configured through the kendo widget: <script> function pageLoad(args) { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.categoryAxis.select = { from: 1, to: 2 }; kendoWidget.bind("selectStart", onSelectStart); kendoWidget.bind("select", onSelect); kendoWidget.bind("selectEnd", onSelectEnd); kendoWidget.redraw(); } function formatRange(e) { var categories = e.axis.categories; return kendo.format("{0} - {1} ({2} - {3})", e.from, e.to, categories[e.from], // The last category included in the selection is at (to - 1) categories[e.to - 1] ); } function onSelectStart(e) { console.log(kendo.format("Select start :: {0}", formatRange(e))); } function onSelect(e) { console.log(kendo.format("Select :: {0}", formatRange(e))); } function onSelectEnd(e) { console.log(kendo.format("Select end :: {0}", formatRange(e))); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> <telerik:CategorySeriesItem Y="4" /> <telerik:CategorySeriesItem Y="2" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> <telerik:AxisItem LabelText="4" /> <telerik:AxisItem LabelText="5" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
There is no axis click event. If we expose such event we can give custom info to the client about this axis. For the time being the event can the attached through the chartObject: <script> function pageLoad() { var chart = $find("<%=ColumnChart1.ClientID%>"); chart._chartObject.bind("axisLabelClick", chart_axisLabelClick); } function chart_axisLabelClick(e) { alert(e.value); } </script> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" 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="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart>
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>
For the time being the property can be set through the kendoWidget: $find('chartID').get_kendoWidget().options.panes[1].height = 60; $find('chartID').get_kendoWidget().redraw();
The property will control the distance between the corresponding series items.
For the time being the property can be set through the kendoWidget: ASPX: <script> function pageLoad() { $ = $telerik.$; var kendoWidget = $find("<%=PieChart1.ClientID%>")._chartObject; kendoWidget.options.series[0].labels.visible = function (point) { if (point.value < 5) { return false; } else { return true; }; } kendoWidget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px"> <PlotArea> <Series> <telerik:DonutSeries 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:DonutSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart>
For the time being the property can be set through the kendoWidget: Available options can be found here - http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.weekStartDay <script> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject; kendoWidget.options.categoryAxis.weekStartDay = 1; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1" DataFieldY="SellQuantity"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="SellDate"> <LabelsAppearance DataFormatString="yyyy/MM/dd"></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart>