IE7, IE8 Bar Chart Display Issue

[Daniel]

I have a bar chart that displays correctly in IE9, but not IE8 and IE7. In IE8 and IE7 there is also a JavaScript error message: "Error: Unable to get value of the property 'clone': object is null or undefined". The JavaScript error however does not appear if a chart title is specified.
The chart displays correctly in IE8 and IE7 if either: 1. the chart border is removed, or 2. a chart height is speciifed. The error can be reproduced with the following chart. Again, the chart displays correctly in IE9, but not IE8 and IE7.

<telerik:RadHtmlChart runat="server" ID="chart" BorderColor="Black" BorderStyle="Solid" BorderWidth="1">

  <PlotArea>

    <Series>

      <telerik:BarSeries Name="2009">

        <Items>

          <telerik:SeriesItem YValue="116" />

          <telerik:SeriesItem YValue="332" />

          <telerik:SeriesItem YValue="213" />

        </Items>

      </telerik:BarSeries>

    </Series>

  </PlotArea>

</telerik:RadHtmlChart>

 
Is the HtmlChart compatible with IE7 and IE8? If so, is there a limitation that I'm not aware of, or is this a bug?
Thanks...

[Daniel]

I forgot to mention that the above error occurs on:
ASP .NET 4.0
Windows 7 Pro
Telerik Controls version 2012.3.1016.40

[Marin Bratanov]

Hi Daniel,

We do support IE7 and IE8. Indeed, there seems to be a problem in the case you have described and I am logging it for research. You can follow the issue's progress, comment and vote on it in this URL. I have also updated your Telerik points for your report.

What I would advise as a general point is to always set dimensions for the chart so that it knows where and how to render. It is a data visualization control, so it is more or less static and it does not support size set in percentage (which is exactly what a simple div without explicit dimensions is).

It is also important to note that the BorderColor, BorderStyle and BorderWidth properties are merely inherited from WebControl and are not implemented here, so they should be avoided.

All that being said - the following markup works fine with me, and I would suggest using CSS rules to set properties for your chart wrappers:

.chartContainer
{
    border: 1px solid black;
    width: 640px;
    height: 480px;
}

<div class="chartContainer">
    <telerik:RadHtmlChart runat="server" ID="chart" Width="640px" Height="480px">
        <PlotArea>
            <Series>
                <telerik:BarSeries Name="2009">
                    <Items>
                        <telerik:SeriesItem YValue="116" />
                        <telerik:SeriesItem YValue="332" />
                        <telerik:SeriesItem YValue="213" />
                    </Items>
                </telerik:BarSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
</div>

Regards,
Marin Bratanov
the Telerik team

[Daniel]

That works. Thanks for the information.