For the time being the reversed properties can be set through the kendo widget: <script> function pageLoad(sender, args) { var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget(); var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget(); radarChart.options.valueAxis.reverse = true; polarChart.options.yAxis.reverse = true; radarChart.options.categoryAxis.reverse = true; polarChart.options.xAxis.reverse = true; radarChart.redraw(); polarChart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> <Items> <telerik:AxisItem LabelText="January"></telerik:AxisItem> <telerik:AxisItem LabelText="February"></telerik:AxisItem> <telerik:AxisItem LabelText="March"></telerik:AxisItem> <telerik:AxisItem LabelText="April"></telerik:AxisItem> <telerik:AxisItem LabelText="May"></telerik:AxisItem> </Items> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarLineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345"> <PlotArea> <XAxis Reversed="true"> </XAxis> <YAxis Reversed="true"> </YAxis> <Series> <telerik:PolarAreaSeries Name=">12.3 knots"> <SeriesItems> <telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem> <telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem> </SeriesItems> </telerik:PolarAreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
JavaScript workaround: <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:LineSeries Name="Week 15" ZIndex="0"> <SeriesItems> <telerik:CategorySeriesItem Y="15" /> <telerik:CategorySeriesItem /> <telerik:CategorySeriesItem Y="71" /> <telerik:CategorySeriesItem Y="93" /> <telerik:CategorySeriesItem Y="43" /> <telerik:CategorySeriesItem Y="23" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <script> kendo.dataviz.LineChart.fn.animationPoints = function () { var series = this.seriesOptions; var points = []; var seriesPoints; var pointsIdx, idx; for (idx = 0; idx < series.length; idx++) { if (series[idx].markers.visible) { seriesPoints = this.seriesPoints[idx]; for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) { if (seriesPoints[pointsIdx] != null) { points.push(seriesPoints[pointsIdx].marker); } } } } return points.concat(this._segments); } </script>
The workaround is to convert the color names to HEX, for example through the following HexConverter() method: ASPX: <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1"> </telerik:RadClientExportManager> <telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1" DataFieldY="myValues" ColorField="Color"> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <script> var $ = $telerik.$; function exportRadHtmlChart() { $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart")); } </script> C#: protected void Page_Load(object sender, EventArgs e) { DataTable dt = GetData(); for (int i = 0; i < dt.Rows.Count; i++) { //Not all Color Names can be exported // dt.Rows[i]["Color"] = ColorTranslator.ToHtml(GetColor(i)); //Convert colors to HEX works properly dt.Rows[i]["Color"] = HexConverter(GetColor(i)); } RadHtmlChart1.DataSource = dt; RadHtmlChart1.DataBind(); } public static DataTable GetData() { DataTable dt = new DataTable("ChargeData"); dt.Columns.Add("myValues", typeof(int)); dt.Columns.Add("Color", typeof(string)); dt.Rows.Add(11, ""); dt.Rows.Add(12, ""); dt.Rows.Add(13, ""); dt.Rows.Add(14, ""); dt.Rows.Add(15, ""); dt.Rows.Add(16, ""); dt.Rows.Add(17, ""); dt.Rows.Add(18, ""); dt.Rows.Add(19, ""); dt.Rows.Add(20, ""); return dt; } public static String HexConverter(System.Drawing.Color c) { return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2"); } public static Color GetColor(int index) { return colors[index % colors.Length]; } public static readonly Color[] colors = { Color.Orange, Color.Violet, Color.MediumSeaGreen, Color.HotPink, Color.Black, Color.DarkGoldenrod, Color.DarkMagenta, Color.Chocolate, Color.DarkOliveGreen, Color.DarkTurquoise };
For the time being you can use the following workaround: 1) Either hide the chart with visibility:hidden instead of display:none 2) Or use the following workaround: <div id="div1" style="display: none;"> <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> <input type="button" onclick="showChart(); return false;" value="Show Chart" /> <script> 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>
A possible workaround: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> var ExplodeLevel = 0.15; </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> <SeriesItems> <telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" /> <telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" /> <telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" /> <telerik:PieSeriesItem BackgroundColor="Blue" Exploded="true" Name="Safari" Y="4.5" /> <telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" /> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart> <script> var math = Math, dataviz = kendo.dataviz, Box2D = dataviz.Box2D, Point2D = dataviz.Point2D, OUTSIDE_END = "outsideEnd", RIGHT = "right", util = kendo.util, valueOrDefault = util.valueOrDefault; kendo.dataviz.PieChart.fn.reflow = function (targetBox) { var chart = this, options = chart.options, box = targetBox.clone(), space = 5, minWidth = math.min(box.width(), box.height()), halfMinWidth = minWidth / 2, defaultPadding = minWidth - minWidth * 0.85, padding = valueOrDefault(options.padding, defaultPadding), newBox = Box2D(box.x1, box.y1, box.x1 + minWidth, box.y1 + minWidth), newBoxCenter = newBox.center(), seriesConfigs = chart.seriesConfigs || [], boxCenter = box.center(), points = chart.points, count = points.length, seriesCount = options.series.length, leftSideLabels = [], rightSideLabels = [], seriesConfig, seriesIndex, label, segment, sector, r, i, c; padding = padding > halfMinWidth - space ? halfMinWidth - space : padding; newBox.translate(boxCenter.x - newBoxCenter.x, boxCenter.y - newBoxCenter.y); r = halfMinWidth - padding; c = Point2D( r + newBox.x1 + padding, r + newBox.y1 + padding ); for (i = 0; i < count; i++) { segment = points[i]; sector = segment.sector; sector.r = r; sector.c = c; seriesIndex = segment.seriesIx; if (seriesConfigs.length) { seriesConfig = seriesConfigs[seriesIndex]; sector.ir = seriesConfig.ir; sector.r = seriesConfig.r; } if (seriesIndex == seriesCount - 1 && segment.explode) { sector.c = sector.clone().radius(sector.r * ExplodeLevel).point(sector.middle()); } segment.reflow(newBox); label = segment.label; if (label) { if (label.options.position === OUTSIDE_END) { if (seriesIndex == seriesCount - 1) { if (label.orientation === RIGHT) { rightSideLabels.push(label); } else { leftSideLabels.push(label); } } } } } if (leftSideLabels.length > 0) { leftSideLabels.sort(chart.labelComparator(true)); chart.leftLabelsReflow(leftSideLabels); } if (rightSideLabels.length > 0) { rightSideLabels.sort(chart.labelComparator(false)); chart.rightLabelsReflow(rightSideLabels); } chart.box = newBox; }; </script> </form>
For the time being you can use the following workaround: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var position = 'insideEnd'; // 'center' $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position; $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20; $find("<%=PieChart1.ClientID%>")._chartObject.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <LabelsAppearance DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> <Items> <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" /> <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" /> <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" /> <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" /> <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" /> </Items> </telerik:PieSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart> <script> var INSIDE_END = "insideEnd", CENTER = "center", LEFT = "left", RIGHT = "right", dataviz = kendo.dataviz, Box2D = dataviz.Box2D, math = Math; kendo.dataviz.PieSegment.fn.reflowLabel = function () { var segment = this, sector = segment.sector.clone(), options = segment.options, label = segment.label, labelsOptions = options.labels, labelsDistance = labelsOptions.distance, angle = sector.middle(), lp, x1, labelWidth, labelHeight; if (label) { labelHeight = label.box.height(); labelWidth = label.box.width(); if (labelsOptions.position == CENTER) { sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance; lp = sector.point(angle); label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y)); } else if (labelsOptions.position == INSIDE_END) { sector.r = sector.r - labelHeight / 2 + labelsDistance; lp = sector.point(angle); label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y)); } else { lp = sector.clone().expand(labelsDistance).point(angle); if (lp.x >= sector.c.x) { x1 = lp.x + labelWidth; label.orientation = RIGHT; } else { x1 = lp.x - labelWidth; label.orientation = LEFT; } label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y)); } } } </script>
For the time being you can resize the chart with set_width/set_height methods. For example: <head runat="server"> <title></title> <style> .RadHtmlChart.k-chart, table { width: 100%; height: 100%; } td { border: 1px solid green; width: 60%; height: 60%; overflow:hidden; } html, body, form { height: 100%; overflow: hidden; margin: 0; } </style> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function resizedw() { // Haven't resized in 100ms! var donut = $find("<%=DonutChart.ClientID%>"); var radar = $find("<%=RadarAreaChart.ClientID%>"); var docDimensions = $telerik.getBounds(document.body); resizeChart(donut, docDimensions); resizeChart(radar, docDimensions); } function resizeChart(chart, docDimensions) { var chartDimensions = $telerik.getBounds(chart.get_element().parentElement); chart.set_width("'" + (chartDimensions.width / docDimensions.width) + "%'"); chart.set_height(("'" + chartDimensions.height / docDimensions.height) + "'%"); } var doit; window.onresize = function () { clearTimeout(doit); doit = setTimeout(resizedw, 1000); }; </script> <table> <tr> <td> <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="100%" Height="100%" 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> </td> <td> <telerik:RadHtmlChart runat="server" ID="RadarAreaChart" Width="100%" Height="100%" Transitions="true"> <PlotArea> <Series> <telerik:RadarAreaSeries Name="Position" MissingValues="Gap"> <Appearance> <FillStyle BackgroundColor="#00adcc"></FillStyle> </Appearance> <LineAppearance Width="1" /> <MarkersAppearance Visible="false" /> <LabelsAppearance Visible="false"></LabelsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="159"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="170"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="100"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="103"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="173"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="107"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarAreaSeries> <telerik:RadarAreaSeries Name="Person" MissingValues="Gap"> <Appearance> <FillStyle BackgroundColor="red"></FillStyle> </Appearance> <LabelsAppearance Visible="false"> </LabelsAppearance> <LineAppearance Width="1" /> <MarkersAppearance Visible="false"></MarkersAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="160"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="130"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="168"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="150"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="140"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="109"></telerik:CategorySeriesItem> <telerik:CategorySeriesItem Y="76"></telerik:CategorySeriesItem> </SeriesItems> </telerik:RadarAreaSeries> </Series> <XAxis Color="Black" Reversed="false" StartAngle="180"> <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> <Items> <telerik:AxisItem LabelText="Soft Skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Sector knowledge"></telerik:AxisItem> <telerik:AxisItem LabelText="Finance knowledge"></telerik:AxisItem> <telerik:AxisItem LabelText="Work experience"></telerik:AxisItem> <telerik:AxisItem LabelText="Win7 skills"></telerik:AxisItem> <telerik:AxisItem LabelText="MS Office skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Programming skills"></telerik:AxisItem> <telerik:AxisItem LabelText="Database skills"></telerik:AxisItem> </Items> </XAxis> <YAxis Visible="false"> <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> <LabelsAppearance Step="1"></LabelsAppearance> </YAxis> <CommonTooltipsAppearance Color="White"></CommonTooltipsAppearance> </PlotArea> <ChartTitle Text="Position Profile"> <Appearance Align="Center" BackgroundColor="White" Position="Top"> </Appearance> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Bottom"> </Appearance> </Legend> </telerik:RadHtmlChart> </td> </tr> </table> </form>
The chart's labels also look misaligned in rtl direction, so you can change only chart's direction to ltr with CSS: <style> .RadHtmlChart { direction: ltr; } </style> <div dir="rtl"> some text <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> </Series> <XAxis> <LabelsAppearance RotationAngle="33"></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart> </div>
allow for the chart plot area to be fixed width not counting the axis text. the issue I have is the legend on right side of chart changes the widths of chart when the text is long.
A visual example - http://i.stack.imgur.com/zRwlo.jpg The feature will be useful for projects that need 508 compliance. A boolean properties will also be useful: "EnabledTexturedFill", "EnableColorAndTexturedFill"
I would like to suggest ability to display data series in doughnut and pie charts, see attached example from Excel. And thanks for a great Telerik experience, you make my development work very easy.
For the time being you can use a JavaScript function inside the template to cut the labels - http://docs.telerik.com/kendo-ui/dataviz/chart/how-to/shorten-chart-labels
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>
For the time being you can manually fetch the data and pass it to the chart: <script> function pageLoad() { var dataSource = $find('<%= RadClientDataSource1.ClientID %>'); dataSource.fetch(function (args) { var data = args.get_data(), chart = $find('<%=RadHtmlChart1.ClientID%>'); //workaround chart.set_dataSource(data); chart.repaint(); }); } </script> <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server"> <DataSource> <WebServiceDataSourceSettings> <Select Url="spain-electricity.json" DataType="JSON" /> </WebServiceDataSourceSettings> </DataSource> <Schema> <Model> <telerik:ClientDataSourceModelField FieldName="year" DataType="String" /> <telerik:ClientDataSourceModelField FieldName="solar" DataType="Number" /> </Model> </Schema> </telerik:RadClientDataSource> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" ClientDataSourceID="RadClientDataSource1"> <PlotArea> <Series> <telerik:LineSeries DataFieldY="year" Name="year"> </telerik:LineSeries> </Series> <XAxis DataLabelsField="year"></XAxis> </PlotArea> </telerik:RadHtmlChart>