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; }
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 underlying Kendo Chart widget. For example: <script> function OnLoad(chart) { var widget = chart.get_kendoWidget(); //also applies for the minor grid lines - replace majorGridLines with minorGridLines //Numeric series widget.options.xAxis.majorGridLines.step = 5; widget.options.yAxis.majorGridLines.step = 5; //Category series //widget.options.categoryAxis.majorGridLines.step = 5; //widget.options.valueAxis.majorGridLines.step = 5; widget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <ClientEvents OnLoad="OnLoad" /> <ChartTitle Text="Market Share Study"> </ChartTitle> <PlotArea> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <XAxis MinValue="0" MaxValue="100" Step="10"> <MinorGridLines Visible="false" /> </XAxis> <YAxis MinValue="0" MaxValue="100" Step="10"> <MinorGridLines Visible="false" /> </YAxis> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" /> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="55" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="80" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="60" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24" /> <telerik:BubbleSeriesItem Size="42" X="22" Y="32" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> <Legend> <Appearance Position="Right"></Appearance> </Legend> </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>
Width and height properties for the legend that will provide firm dimensions in pixels, so regardless of the series names' length, it will always have constant size. You can set width and height through the kendo widget: <script> function pageLoad() { var chart = $find("<%=DonutChart.ClientID%>").get_kendoWidget(); chart.options.legend.height = 80; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="500" Transitions="true"> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <ChartTitle Text="OS Usage Statistics for December 2012"> <Appearance Align="Center" Position="Top"></Appearance> </ChartTitle> <PlotArea> <Series> <telerik:DonutSeries> <LabelsAppearance Visible="false"> </LabelsAppearance> <TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance> <SeriesItems> <telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7" Y="55.6"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem> </SeriesItems> </telerik:DonutSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis. Add
Set tooltips of points between series points - http://screencast.com/t/Q7FYJxkouLA
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
Tooltips of points between series points See: http://screencast.com/t/Q7FYJxkouLA
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,
For the time being the properties can be set through the chartObject. For example: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.valueAxis.max = 100; chart._chartObject.options.valueAxis.min = 10; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:RadarColumnSeries DataFieldY="yValues"> </telerik:RadarColumnSeries> </Series> <XAxis DataLabelsField="xValues"></XAxis> <YAxis MinValue="10" MaxValue="100"></YAxis> </PlotArea> </telerik:RadHtmlChart> C#: 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("yValues", typeof(int)); dt.Columns.Add("xValues", typeof(string)); dt.Rows.Add(1, 12, 20); dt.Rows.Add(2, 15, 40); dt.Rows.Add(3, 16, 60); dt.Rows.Add(4, 14, 80); dt.Rows.Add(5, 17, 100); return dt; }
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.
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html
If set to true the chart will round the first and last date to the nearest base unit.
There are two workarounds you can use in the meantime - Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart. - Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget <script> var myData = [{ "day": new Date("2014/01/01") }, { "day": new Date("2014/01/02") }, { "day": new Date("2014/01/31") }]; function addPlotBand() { $ = $telerik.$; var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30)); var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start var options = {}; options["categoryAxis"] = { plotBands: [{ from: start, to: end, color: "green" }] }; $("#chart2").data("kendoChart").setOptions(options); } function pageLoad() { $ = $telerik.$; $("#chart2").kendoChart({ dataSource: { data: myData }, categoryAxis: { type: "date", field: "day" } }); } </script> <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" /> <div id="chart2"></div> <telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;"> <PlotArea> <XAxis DataLabelsField="day"> </XAxis> </PlotArea> </telerik:RadHtmlChart>
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; }