Similar to the Scale Breaks functionality in RadChart - http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/features/scale-breaks
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; }
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
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
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>
Right now we do not have a way to show some tooltips over Axis Labels This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip. We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series
Currently labels for SeriesItems having Y of 0 are not displayed in PieSeries and DonutSeries due to visual considerations. Improve the handling of such labels.
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>
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>
The feature will be similar to Plot Bands (see http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/plot-bands/defaultcs.aspx demo), however, the width of lines will not be dependent on the y-axis scale.
Add support for a secondary x-axis at the top of the chart. Please use consistent axis types. Why would the primary axes be of type Telerik.Web.UI.HtmlChart.PlotArea.Chart*Axis and the secondary y-axis be of type Telerik.Web.UI.AxisY?
I get a lot of work creating BI/KPI UIs which are basically converting what you can do in Excel Charts into a Web UI. Which means anything they can do in Excel they expect the web to do. Since there is a drive to automate as much mundane human activity in the business and reduce human error (cut and paste error). I need to reproduce a graph with 'standard' Tend Lines. That is not my interpretation of a trend, but standard best practice. I want this as a checkbox, and attribute to a series for the DataFieldY value. Initially a code solution would be fine (once its got the data from the data source). http://www.telerik.com/blogs/how-to-plot-a-simple-linear-regression-in-telerik-asp.net-web-form-chart