HTMLChart doesn't display when in iframe

[Jan Peek]

I have a page built with several htmlchart controls on it and everything is working great. When I display that page inside of an iframe inside a sharepoint page, the htmlchart controls don't display. Any reason for that?

This is the code of the iframe:

<IFRAME name=MSOPageViewerWebPart_WebPartWPQ2 width="100%" height="100%" title=Untitled id=MSOPageViewerWebPart_WebPartWPQ2 src="http://urltomypage/cid.aspx" frameBorder=0 ddf_src="http://urltomypage/cid.aspx"></IFRAME>

[Danail Vasilev]

Hello Jan,

I have tried to reproduce the mentioned issue but to no avail - the RadHtmlChart is properly displayed in iframe in Sharepoint 2010. I have created a simple Visual Web Part that has multiple RadHtmlChart  controls and placed it inside a Page Viewer which is actually and iframe element and the chart is rendered properly on my side. I have also create another Visual Web Part that has an iframe element with src set to the mentioned share point page URL and again the chart's rendering seems to be fine on my side.

You can watch a short video test in the attached archive and then tell me what I am missing. I have also attached the two Visual Web Parts that were used for the test. Could you please try to reproduce the issue with the attached Visual Web Parts and then tell us what changes you have made, so that I can proceed further with the investigation? Could you also tell us what is the version of Sharepoint and Telerik UI for ASP.NET AJAX controls you testing with?

Regards,
Danail Vasilev
Telerik

 

 

[Jan Peek]

We're using the latest version of the Telerik controls and it's Sharepoint 2010.

I see the following errors in the console when viewing my app (not a visual webpart, just a regular telerik application) inside the iframe in sharepoint but not when viewed by itself. Could be the cause?

Warning: KendoUI DataViz cannot render. Possible causes:
- The browser does not support SVG, VML and Canvas. User agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; InfoPath.3)
- The kendo.dataviz.(svg|vml|canvas).js scripts are not loaded

[Jan Peek]

I looked through your examples and they're visual web parts. What I have built was just a regular asp.net application that I wanted to embed in the page viewer in sharepoint. Is this the reason why it's not working? Do I have to build it as a visual web part.

[Danail Vasilev]

Hello Jan,

Thank you for the additional information.

I have created a simple .aspx page that contains the following RadHtmlChart declaration:
ASPX:

<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="600px" Height="400px">
    <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>
            <Items>
                <telerik:AxisItem LabelText="item 1" />
                <telerik:AxisItem LabelText="item 2" />
                <telerik:AxisItem LabelText="item 3" />
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

and hosted it on IIS. I have referenced this page from share point 2010 page, that has a page viewer and the RadHtmlChart is properly displayed in FireFox and native Internet Explorer 8.

The chart, however, is not displayed in IE11, because of the following reasons:
   - The default document mode for share point 2010 is IE8.
   - Internet Explorer compatibility modes are not supported by the RadHtmlChart because these modes can exhibit different behavior and rendering bugs, compared to the browser versions they emulate. It is highly recommended to use IE's Edge mode via META tag or HTTP header.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

More information on the matter is available in this forum thread.

You can watch the short video test in the attached archive.

Regards,
Danail Vasilev
Telerik