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);
Reproduction steps - Run the code below and click Show Chart - chart is not displayed. ASPX: <div id="div1" style="visibility: hidden;"> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </div> <div id="chart" style="visibility: hidden;">HtmlChart wrapper</div> <input type="button" onclick="showChart(); return false;" value="Show Chart" /> <script> $ = $telerik.$; function showChart() { $("#div1").attr("style", "visibility:visible"); } </script> Solution 1: Use the workaround below: <telerik:RadRotator ID="RadRotator1" runat="server" Height="500px" ItemHeight="300px" ItemWidth="300px" Skin="Default" Width="1000px" RotatorType="AutomaticAdvance"> <Items> <telerik:RadRotatorItem> <ItemTemplate> <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Height="300px" Skin="Silk" Width="300px" Transitions="False" Visible="true"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Name="a" Y="12" /> <telerik:PieSeriesItem Name="b" Y="5" /> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </ItemTemplate> </telerik:RadRotatorItem> </Items> <ItemTemplate> </ItemTemplate> </telerik:RadRotator> <script> $ = $telerik.$; Telerik.Web.UI.RadHtmlChart.prototype.repaint = function () { var that = this; if (that._chartObject) { if (that._isDataSourceChanged()) { that._loadData(); } else { that._resetVisibilityOption(); that._chartObject.redraw(); } } }; Telerik.Web.UI.RadHtmlChart.prototype._resetVisibilityOption = function () { var that = this; that._chartObject.options.visible = that._options.visible = that.get_visible(); }; Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () { var that = this; //when visible is false - nothing is sent from the server to save transferred data //e.g - there are properties set but visible is false - we do not need to send those properties amyway //that is why - set visible: false when nothing is sent from the server that._options = $telerik._getPropertiesParameter(that, that.constructor); that._cleanUpConfigProperties(); that._options["theme"] = that.get_skin(); that._options["visible"] = $(that.get_element()).is(':visible'); that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false }; that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false }; if (that._chartArea) { that._options["chartArea"] = that._parseObject(that._chartArea); } if (that._isSparklineChart()) { that._setMinimumSparklineWidth(); } if (that._plotArea) { that._configurePlotArea(); } if (that._series) { /*jshint evil: true */ that._options["series"] = eval(that._series); /*jshint evil: false */ } if (that._isStockChart()) { that._configureStockChart(); } }; </script> Solution 2: Hide the chart on load event: <div id="div1"> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </div> <div id="chart" style="visibility: hidden;">HtmlChart wrapper</div> <input type="button" onclick="showChart(); return false;" value="Show Chart" /> <script> $ = $telerik.$; function showChart() { $("#div1").attr("style", "visibility:visible"); } function OnLoad() { $("#div1").attr("style", "visibility:hidden"); } </script>
Currently a long legend in RadHtmlChart overflows the PlotArea under IE, while in the rest browsers it is cut. The workaround is to hide the legend and create a custom one in a styled div (e.g. KendoUI demonstrates such an example here - http://demos.kendoui.com/dataviz/bubble-charts/index.html)
String data source fields in the RadHtmlChart that contain only numeric characters should not be parsed to decimal. Also when such a string starts with the 0 character, it is omitted. For example the "0" item in the legend is not displayed with the example below: ASPX: <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true"> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <ChartTitle Text="Browser Usage for April 2012"> <Appearance Align="Center" BackgroundColor="White" Position="Top"> </Appearance> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Right" Visible="true"> </Appearance> </Legend> <PlotArea> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <Series> <telerik:PieSeries StartAngle="90" DataFieldY="code_count" NameField="items_names"> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %"> </LabelsAppearance> <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart> C#: using System.Data; protected void Page_Load(object sender, EventArgs e) { PieChart1.DataSource = GetData(); PieChart1.DataBind(); } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("code_count", typeof(int)); dt.Columns.Add("items_names", typeof(string)); dt.Rows.Add(1, 771, "0"); dt.Rows.Add(2, 187, "1"); dt.Rows.Add(3, 178, "2"); dt.Rows.Add(4, 60, "3"); return dt; }
Currently the Hay skin sets white color for the title, axes labels and legend in RadHtmlChart. For the time being the color of the mentioned elements can be changed through the TextStyle property - http://www.telerik.com/help/aspnet-ajax/htmlchart-appearance-labels-titles-font-settings.html.
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(); }
For the time begin the event logic can be executed with a small time out: JavaScript <script type="text/javascript"> var isFirstClick = "1"; function OnClientSeriesClicked(sender, args) { setTimeout(function () { alert(isFirstClick); }, 0); } </script> ASPX: <telerik:RadHtmlChart runat="server" Width="900px" Height="700px" ID="RadHtmlChart2" OnClientSeriesClicked="OnClientSeriesClicked"> <PlotArea> <Series> <telerik:BarSeries> <SeriesItems> <telerik:CategorySeriesItem Y="10" /> </SeriesItems> </telerik:BarSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
When you do a stacked HTMLChart (e.g. columns), the legend appears in the opposite order to the data series being stacked, which looks very unprofessional.
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.
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].missingValues = "Gap"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:LineSeries MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem /> <telerik:CategorySeriesItem Y="30" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Currently when LineSeries Item's YValue is smaller than the BarSeries/ColumnSeries Item's value and both Series Items share the same category, the BarSeries/ColumnSeries Item is the one that receives the mouseover event, so only the bar/column item tooltip is shown. It is not possible to hover over the marker for the LineSeries and trigger client-side event handlers or show its tooltip. The LineSeries can be hovered/clicked only outside of the area of the Bar/Column Item.
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; }
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; }