RadHtmlChart should allow the usage of indices in the DataFormatString when DateTime values are used: <XAxis Type="Date"> <LabelsAppearance DataFormatString="{0:d}" /> </XAxis>
Currently BaseUnit property for DateAxes in RadHtmlChart accepts the following values - year, months, days, hours and minutes. Improve this property by adding seconds, weeks and auto.
It would be great to have this new chart type.
A JS error is thrown when a RadHtmlChart is databound and there are series items with null values that correspond to DateTime values on the XAxis. The issue could be handled in the following way: Check if there is a series item's value that is null and if this is the case then do not add it to the datasource
I know that does not support RADHTMLCHART Marked Zone. But somehow I need to make a mark, for example in the SeriesLine that Saturdays and Sundays this line with another color. I leave a picture so you can understand. I need the part or series values Y Vier and Sab will be anothe color. for examples both series at orange color. I thank you for the attention. regards
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>
Currently when numerous series items are present, numerical series (Scatter/ScatterLine) calculates automatically the step through which the major/minor gridlines and the corresponding xaxis labels are rendered, so that they are visually readable. For categorical charts, however, when multiple series items are present, all the xaxis labels are plotted, so that they are not readable. Add ability to autoadjust the step for the xaxis labels in categorical charts.
Currently the available appearance options of the line in Area, Line and ScatterLine Series are width and background color. Expose additional option for changing the dash type(e.g. dash, dashDot, Dot, etc). For the time being the following workaround can be used: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid chart._chartObject.options.series[0].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>
Similar to the Scale Breaks functionality in RadChart - http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/features/scale-breaks
Adding a Radar chart type will be a nice improvement in RadHtmlChart.
In scenarios where the Series are Column/Bar and Positive and Negative values are present, the XAxis labels are overlapped by the Series themselves. Expose an additional Position property for the axis labels that controls their position to Top/Bottom. For the time being you can choose either approach: 1) Use a second x-axis that stores only the labels: a) Category Axis example: <script> function BottomXAxisLabels() { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis); axis.line.visible = false; chart.setOptions({ categoryAxis: [{}, axis] }); chart.options.valueAxis.axisCrossingValues = [0, -99999999999]; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="BottomXAxisLabels" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <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> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> b) Numeric axis example: <script> function BottomXAxisLabels() { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); var axis = $telerik.$.extend(true, {}, chart.options.xAxis); axis.line.visible = false; chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] }); chart.options.yAxis.axisCrossingValues = [0, -99999999999]; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="BottomXAxisLabels" /> <PlotArea> <Series> <telerik:ScatterLineSeries Name="Product 1"> <SeriesItems> <telerik:ScatterSeriesItem Y="15000" X="5" /> <telerik:ScatterSeriesItem Y="-4000" X="6" /> <telerik:ScatterSeriesItem Y="10000" X="7"/> </SeriesItems> </telerik:ScatterLineSeries> </Series> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> 2) Use the TextStyle property of the RadHtmlChart , in order to set higher margin for the XAxis labels. For example: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance> <TextStyle Margin="135 0 0 0" /> </LabelsAppearance> <Items> <telerik:AxisItem LabelText="item1" /> <telerik:AxisItem LabelText="item2" /> <telerik:AxisItem LabelText="item3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart> Note: Labels margin and chart's PlotArea height are inversely proportional - the higher the margin is the lower the chart's PlotArea height will be. This resizing is needed, in order for the chart's main dimensions to be kept.
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>
Currently margin and padding can be set in the RadHtmlChart through the TextStyle property exposed by the Axis Label, Axis Titles, Chart Legend, Chart Title and Series Labels. Add the ability to control the margin and padding for the PlotArea as well. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.plotArea.margin = { top: 100, right: 100, bottom: 50, left: 100 }; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400" Height="400"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Name="Item 1" Y="30"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 2" Y="10"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 3" Y="20"></telerik:PieSeriesItem> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
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 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.
Add the ability to click the legend's items in a similar way like the series 'items. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { //Attach the legendItemClick event on pageLoad: var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked); } //The following function toggles the visibility of the clicked series from the legend function OnLegendClicked(e) { //Get a reference to the chart and the target axis var chart = e.sender; var targetAxisName = e.series.axis; var numValueAxes = chart.options.valueAxis.length; //Iterate through the y-axes and toggle the visibility of the axis that corresponds to the clicked series from the legend for (var i = 0; i < numValueAxes; i++) { var currValueAxisName = chart.options.valueAxis[i].name; if (currValueAxisName == targetAxisName) { chart.options.valueAxis[i].visible = !chart.options.valueAxis[i].visible; } } } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries AxisName="axis1" Name="Series1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries AxisName="axis2" Name="Series2"> <SeriesItems> <telerik:CategorySeriesItem Y="3000" /> <telerik:CategorySeriesItem Y="1000" /> <telerik:CategorySeriesItem Y="2000" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries AxisName="axis2" Name="Series3"> <SeriesItems> <telerik:CategorySeriesItem Y="3500" /> <telerik:CategorySeriesItem Y="1500" /> <telerik:CategorySeriesItem Y="2500" /> </SeriesItems> </telerik:LineSeries> </Series> <YAxis Name="axis1" MinValue="0" MaxValue="30"> </YAxis> <AdditionalYAxes> <telerik:AxisY Name="axis2" MinValue="900" MaxValue="3600"></telerik:AxisY> </AdditionalYAxes> </PlotArea> </telerik:RadHtmlChart>
Currently MinValue and MaxValue properties of the Axes accepts only decimal, so that when the axes are of date type, Min and Max dates cannot be set. The workaround is to obtain the min and max values from the datasource field used for populating XAxis labels and set these values explicitly to the XAxis through the chartObject. For example: <script type="text/javascript"> function pageLoad() { //Get reference to the chart var chart = $find("<%=RadHtmlChart1.ClientID%>"); //Obtain charts datasource var currDataSource = eval(chart.get_dataSourceJSON()); //Get minValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField var minValue = currDataSource[0].myDataSourceField; //Get maxValue for the datasource field used for populating XAxis Labels. In this example the field is named myDataSourceField var maxValue = currDataSource[currDataSource.length - 1].myDataSourceField; //Reference the chartObject's min and max properties chart._chartObject.options.xAxis.min = minValue; chart._chartObject.options.xAxis.max = maxValue; //Repaint the chart chart.repaint(); } </script>
A couple of suggestions in one... Please add interactivity between RadPivotGrid and HTMLChart similar to pivot charts in MS Excel - making the filters and selections. update both the chart and the pivot table. It will also be helpful if you can add splicers similar to PowerPivot. When you click on the chart, it opens a popup menu, relative to that area - where you can select to filter that axis or value in a series, change the aggregate calculation for that value (sum, count, average, etc.), change date ranges on a date axis - like, date range picker, by year, fiscal, quarter, week, etc. Thanks, Vermaak
When using custom shapes (circles, triangles, etc) in a RadHtmlChart, the custom shape should be displayed in the legend instead of always a square. This is because when printing with a black & white printer, the colored squares won't help the reader read the chart, however the shapes would.