Problem with resize shart after upgrade to latest version

5 posts, 1 answers
  1. Per
    Per avatar
    120 posts
    Member since:
    Jan 2008

    Posted 28 Aug 2013 Link to this post

    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


  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 30 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Per
    Per avatar
    120 posts
    Member since:
    Jan 2008

    Posted 03 Sep 2013 Link to this post

    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
  4. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Per
    Per avatar
    120 posts
    Member since:
    Jan 2008

    Posted 10 Sep 2013 Link to this post

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

    Regards
    Per
Back to Top