For example by exposing an additional width property.
For the time being you can use the following workaround: <script> function OnLoad(sender, args) { var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget(); kendoWidget.options.legend.reverse = true; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="5" /> <telerik:CategorySeriesItem Y="7" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 3"> <SeriesItems> <telerik:CategorySeriesItem Y="9" /> <telerik:CategorySeriesItem Y="11" /> <telerik:CategorySeriesItem Y="13" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="33"></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Please provide RadHtmlChart Export features
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); } }
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 for each series could be RenderInPlotArea=true|false It will control whether the series will be rendered in the plot area, if set to false the series name will still be present in the legend, but grayed out, as if the end user has clicked it already to hide the series in the browser. This will give the developer programmatic contol over the initial state of the chart that the end user can modify later. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].visible = false; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="5" /> <telerik:CategorySeriesItem Y="12" /> <telerik:CategorySeriesItem Y="8" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
When viewing a line chart with multiple series, the RadHtmlChart automatically changes shapes for each series to make it easy to distinguish, however the shapes are not carried over to the legend. This means a user printing on a black & white printer will have no way to distinguish the different series (since the shapes are not in the legend).
For the time being the DateTime object can be set to the AxisCrossingPoint on the client. For example: ASPX: <script> function OnLoadHandler(sender, args) { var kendoChart = sender.get_kendoWidget(); var opts = kendoChart.options; opts.categoryAxis.axisCrossingValues = [0, new Date("2014, 11, 05, 19:15:00")]; kendoChart.setOptions(opts); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="OnLoadHandler" /> <PlotArea> <Series> <telerik:LineSeries Name="Product 1" DataFieldY="SellQuantity"> </telerik:LineSeries> </Series> <XAxis DataLabelsField="SellDate" BaseUnit="Minutes"> <LabelsAppearance Step="15"></LabelsAppearance> <MinorGridLines Visible="false" /> <AxisCrossingPoints> <telerik:AxisCrossingPoint Value="10" /> </AxisCrossingPoints> </XAxis> <AdditionalYAxes> <telerik:AxisY></telerik:AxisY> </AdditionalYAxes> </PlotArea> <ChartTitle Text="LineSeries"></ChartTitle> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { 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(2014, 11, 05, 18, 22, 22)); dt.Rows.Add(2, 5, new DateTime(2014, 11, 05, 18, 56, 22)); dt.Rows.Add(3, 6, new DateTime(2014, 11, 05, 19, 14, 22)); dt.Rows.Add(4, 4, new DateTime(2014, 11, 05, 19, 48, 22)); dt.Rows.Add(5, 7, new DateTime(2014, 11, 05, 20, 12, 22)); return dt; }
For the time being you can use a JavaScript function inside the template to cut the labels - http://docs.telerik.com/kendo-ui/dataviz/chart/how-to/shorten-chart-labels
When making business web applications, it is really useful with Funnel charts. This type is used a lot when making sales funnels!
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>
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 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>
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
The property indicates whether the series name will be visible in the legend. For the time being the following workaround can be used: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart.get_kendoWidget().options.series[0].visibleInLegend = false; chart.get_kendoWidget().options.series[1].visibleInLegend = true; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="3" /> <telerik:CategorySeriesItem Y="4" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
The functionality is currently exposed only by the x-axis of the sparkliens. It would be a good idea to be exposed by the other series types as well. For the time being you can configure the cross hair through the kendo widget: <script> function pageLoad() { $find('RadHtmlChart1').get_kendoWidget().setOptions({categoryAxis:{crosshair:{ color: "green", width: 2, visible: true}}}); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> <telerik:LineSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="39" /> <telerik:CategorySeriesItem Y="19" /> <telerik:CategorySeriesItem Y="29" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="33"></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
The functionality is similar to the one in Kendo UI Chart (http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html) : http://dojo.telerik.com/OZuNU For the time being you can try to utilize the kendo.drawing API in order to place the text on a particular position. This forum may be helpful on the matter - http://www.telerik.com/forums/custom-drawing#sOkmYWbfrUW404Rr13eLDQ
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; }
Currently PieChart exposes the labels of its items outside the Pie, while the DonutChart exposes the labels inside the Donut. Add the ability to choose the location of the item's label (e.g. center, insideEnd, outsideEnd) in PieSeries and DonutSeries. This can be done either by exposing additional property or by expanding the values range of the current position property.