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.
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/columnchart/defaultcs.aspx Try it with Stacked mode checked and minvalue set to 5000 on Y settings!
Currently when RadHtmlChart is placed inside RadSplitter with RadSlidingZone a JavaScript error is thrown when the following conditions are met: 1.RadHtmlChart doesn't have its width property set 2.The position of the RadHtmlChart's legend is changed in the codebehind The workaround is to set the width property of the chart.
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
The current behavior of the RadHtmlChart preserves only the bound datasource, however it doesn't store programmatically added series items after a postback. The workaround is instead of creating and adding series items programmatically, create a datatable and pass it as a datasource to the chart. For example: ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Add("id"); dt.Columns.Add("xValues"); dt.Columns.Add("yValues"); for (int i = 0; i < 5; i++) { dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i); } ScatterLineSeries sls1 = new ScatterLineSeries(); sls1.LabelsAppearance.DataFormatString = "{0:d}"; sls1.DataFieldX = "xValues"; sls1.DataFieldY = "yValues"; RadHtmlChart1.PlotArea.Series.Add(sls1); RadHtmlChart1.DataSource = dt; RadHtmlChart1.DataBind(); }
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>
Does not visualize data for some of the cases. I attached a project related to this bug. In the code there is an option with data which RadHtmlChart do visualize and there is option for data which RadHtmlChard don't visualize. All the code is located in Default.aspx PS: With tooltip commented data do visualized in both cases. Gregory.
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>
Currently it is not possible to add null-able series items in RadHtmlChart in the markup or programmatically. If a null-able item is added it is omitted and is replaced by the next series item from the current Series. The workaround is to either data bound the chart to a data source or convert the null-able values to zeros: C#: decimal? nullValue = null; if (nullValue == null) { nullValue = 0; } ColumnSeries colSeries2 = RadHtmlChart1.PlotArea.Series[1] as ColumnSeries; colSeries2.SeriesItems.Add(39); colSeries2.SeriesItems.Add(nullValue); colSeries2.SeriesItems.Add(3);