For the time being you can stack 100% series through the chartObject. For example: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=ColumnChart1.ClientID%>"); chart._chartObject.options.series[0].stack = { type: "100%" }; chart.repaint(); } </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> <telerik:ColumnSeries Name="Product 2"> <SeriesItems> <telerik:CategorySeriesItem Y="35000" /> <telerik:CategorySeriesItem Y="13000" /> <telerik:CategorySeriesItem Y="20000" /> </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>
For the time being the property can be set through the kendoWidget: Available options can be found here - http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.weekStartDay <script> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject; kendoWidget.options.categoryAxis.weekStartDay = 1; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1" DataFieldY="SellQuantity"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="SellDate"> <LabelsAppearance DataFormatString="yyyy/MM/dd"></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Currently the appearance of the Series border cannot be controlled. Add the ability to change its width, color and dashtype. Declined with the following reason: Item is duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/50612
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); } }
Rejected with the following reason: The purpose of the RadHtmlChart is to visualize data and not to manipulate it. You can manually group a data source, so that its structure is suitable for a chat data-binding. Such an example is illustrated in this CL - http://www.telerik.com/support/code-library/group-radhtmlchart-data-source
When a pie chart is rendered with large labels they may be clipped because the pie chart is not sized correctly. When the legend is enabled the pie chart sizes correctly to handle long labels.
Add this functionality out of the box to navigator. The functionality made by these buttons(+/-) are more gentle that the navigator.
Your html charts are coming along beautifully - Just want more! Particularly a Spline chart - ideally to add as option for combination charts. This could also work as a Pareto chart.
If set to true the chart will round the first and last date to the nearest base unit.
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>
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>
Similar to the SplineArea in RadChart: http://www.telerik.com/help/aspnet-ajax/chart-types-spline-area.html
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>
Expose a Visible property for the Series in RadHtmlChart. For example when a Series is clicked it can be hidden. 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 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.
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.
If the type of the XAxis is category the field from the data source used for the XAxis must not be tried to be parsed to DateTime format. For the time being the issue can be workaround as follows: -Either set an appropriate DataFormatString for the XAxis labels. For example: <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="yValues"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="xLabels" Type="category"> <LabelsAppearance DataFormatString="d - MM"></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> - OR add the XAxis items manually from the data source: ASPX: <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="yValues"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="xLabels" Type="category"> <LabelsAppearance></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { ColumnChart.DataSource = GetData(); ColumnChart.DataBind(); DataTable currDT = GetData(); for (int i = 0; i < currDT.Rows.Count; i++) { AxisItem currItem = new AxisItem(currDT.Rows[i]["xLabels"].ToString()); ColumnChart.PlotArea.XAxis.Items.Add(currItem); } } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("yValues"); dt.Columns.Add("xLabels"); dt.Rows.Add(10, "1 - 10"); dt.Rows.Add(30, "2 - 11"); dt.Rows.Add(20, "3 - 12"); return dt; }
Adding a Radar chart type will be a nice improvement in RadHtmlChart.