Problem with resize shart after upgrade to latest version

[Per]

Hi!

I just upgraded to the latest version of Kendo UI and now my charts wont render any more when I resize my mobile browser window.

In short, this is what I do:

I have two list views. The first one shows avaiable charts to display. The second one show the actual chart.
When a user clicks on a item in the first listview, I create the chart in the click event.
I then do a app.navigate("#chartView");
(In my test, the chart is bound to a static Array of data.)

The chart is displayed correctly, but then the user tilts his/her screen, the chart is redrawn but now no series or data is displayed in the chart. Only the axis is shown.

My resize function:
$(window).resize(function() {    // for any chart or gauge widget
    $("#chart").data("kendoChart").redraw();
});

This all worked before the update, what has changed?

Regards
Per

[Iliana Dyankova]

Hello Per,

I tried to reproduce the issue but to no avail. For your convenience I attached a simple example - could you please edit it and show me your current implementation? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your time and cooperation.
 

Regards,
Iliana Nikolova
Telerik

[Per]

Hi and thank you for your reply!

I have now been able to get my chart to show the series by changing my implementation so it looks more like yours :)

My problem now is that "redraw" does not fill out the complete windows screen.
Your sample code behaves exacly the same as mine (see attached screenshoots), when in landscape mode, the chart is to large, when in portrait mode, the chart is to small.

Note. If you create a DataWiz Template Project from inside Icenium Ion Graphite, it also has the exakt problem.

(I'm using Icenium Ion Graphite Simulator)

Regards
Per

[Iliana Dyankova]

Hello Per,

In order to force the chart to expand to the full available height you could use the following CSS rules: 

<style>
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#chart,
svg {
    height: 100%;
    width: 100%;
}
</style>

For your convenience I updated the project and attached it back. Please pay attention to the refresh() method called in the afterShow event.

Regards,
Iliana Nikolova
Telerik

[Per]

Hi!
Setting width to 100% for the body and chart, solved the problem!
Thanks !

Regards
Per