[Solved] Charts inside tab control

[robpearmain]

Hi,

We're having a couple of issues with embedding charts into a Kendo tab control.

The first issue is that some radar charts are exceeding the tab content boundary like so:

http://i.imgur.com/VQrJOAk.jpg

We're using the following code to redraw the charts on tab changes:

var onActivate = function (e) {
    if ($(e.contentElement).children('#radarCapability').length !== 0) {
        var radarChart = $('#regionRadarChart').data('kendoChart');
        radarChart.refresh();
    } else {
        // redraw bar charts
        // $(exampleChart).data('kendoChart').refresh();
    }
};

var tabStrip = $('#regionTabStrip').kendoTabStrip({ activate: onActivate }).data('kendoTabStrip');

Stranger is that the we have another tab strip with a different radar chart in, which uses identical code - this doesn't have any issues. Another thing to note is that clicking a legend item on the right will redraw the chart correctly (so it fits).

The other issue is quite specific, but we have bullet charts within a table - this table is then an iframe within another page. Under Internet Explorer 8 (Client requirement) we're finding that the chart doesn't fill the table cell and leaves a space at the end. At the bottom of the page we're running the following script:

var prfChart = $('#myPrfChart').data('kendoChart');
prfChart.refresh();

However we're finding that this doesn't seem to help, the issue disappears if we switch to a different tab in the tab strip and back to the bar chart again. Likely caused by the onActivate script above. I've tried nesting the refresh script within $(document).ready() but that doesn't seem to help at all.

Just to confuse matters, if you open the page directly (i.e. not within an iframe) then the charts render correctly. I can only replicate the issue in an iframe using IE8. Is there a better way of getting the charts to refresh/redraw on load?

Thanks

[T. Tsonev]

Hi,

Thank you for the detailed description of the problem.

The refresh method will redraw the chart, but will not take into account the new size of the container.
In order for this to happen, you need to call the resize method.

Just a straight replace should do it for both issues. IE might require the call to happen in a setTimeout as it defers layout calculations for tables.

See also Using Kendo with In Responsive Web Pages.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[robpearmain]

Hi,

Thanks for the reply.

I've managed to resolve the radar chart issue but I'm still struggling with the bar charts. Opening the iframe directly the resize() command works absolutely perfectly. If I run the command when the page is in an iframe, I get the following error returned.

"'data(...)' is null or not an object"

I have enabled debugging and selected the iframe as the live debugging window in IE8.

Is this just an unavoidable bug with older versions of IE?

Thanks

[T. Tsonev]

Hello,

Hosting the chart within an iframe shouldn't be an issue.
The resize call should come from within the iframe though.

How does the current code look like?

Regards,
T. Tsonev
Telerik