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>