Kendo UI Chart does not use the entire width of the div when the div containing the chart is hidden.

12 posts, 0 answers
  1. Ujjwal Karjee
    Ujjwal Karjee avatar
    4 posts
    Member since:
    Jan 2011

    Posted 08 Oct 2012 Link to this post

    I have a number of Kendo UI Chart inside different divs. The divs stay hidden when the charts are rendered. The chart takes default width of 600 px even though the div containing the chart is 800 px. However if I render the chart keeping the div visible the chart takes the whole 800 px. 

    Any help?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 09 Oct 2012 Link to this post

    Hello Ujjwal,

    I am not sure if I understand your scenario correctly. May I ask you to provide some more details? Code snippets demonstrating your current implementation or a jsFiddle / jsBin link will be highly appreciated. This way I would be able to advice you further and provide the most appropriated solution. Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ujjwal Karjee
    Ujjwal Karjee avatar
    4 posts
    Member since:
    Jan 2011

    Posted 09 Oct 2012 Link to this post

    Iliana,

    Look at example 1) and 2). Both have same bar chart inside the same div. The width of the outer div is '900px'. The bar chart is loaded similarly. The only difference is on the second example the user needs to click display button to see the bar chart. Look at the size of the bar chart that gets rendered.

    1) http://jsfiddle.net/t3Wmt/
    2) http://jsfiddle.net/sgsrg/

    Why is the bar chart takes the width of '600px' when the outside container is hidden? Is it by design? If so how can we resolve the issue?

    Regards,
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 12 Oct 2012 Link to this post

    Hi Ujjwal,

    Thank you for the examples. The reason for the observed behavior in the first jsFiddle is due to the fact that initially the chart takes it's parent div's width (the <div> is a block element and it takes up the full width available). In the second fiddle when you click the button and show the chart it is already rendered and takes the default chart's width. In order to resolve the issue and make the chart to take it's parent div's width I can suggest to refresh() the chart. For example: 
    $('#btndisplay').click(function(){
       $('#container').show();
       var chart = $("#chart").data("kendoChart")
       chart.refresh()
    });
    For convenience I updated your jsFiddle.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mohammad
    Mohammad avatar
    1 posts
    Member since:
    Sep 2012

    Posted 10 Jun 2013 Link to this post

    I have implemented the above solution for accomodating chart width rendered inside tabstrip. When i upgraded to 2013.1.514, it now renders all chart with 600px width on refresh (tab selection). 

    Kindly confirm that the chart.refresh() is working fine in this release. If not, kindly let me know the alternative to it. If not, kindly let me know the max release i can downgrade to.

    Regards
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 10 Jun 2013 Link to this post

    Hello Mohammad,

    I have already replied to the same questions in your support ticket, however I am pasting my reply here too:

    The same approach when Kendo UI Chart is in TabStrip should work as expected. For your convenience I prepared a simple jsBin example which demonstrates the aforementioned statement in action - 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.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 11 Oct 2013 Link to this post

    Iliana, your code makes use of the refresh() method which according to Telerik documentation refreshes the UI as well as the datasource. In a real world application this would mean unnecessary trips to the server negatively affecting performance correct? 
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 15 Oct 2013 Link to this post

    Hi Jacques, 

    You are right - the refresh methods reloads the data, however in order to avoid this you should use the chart redraw method.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Joe
    Joe avatar
    1 posts
    Member since:
    Nov 2014

    Posted 22 Mar 2015 in reply to Iliana Nikolova Link to this post

    Neither work for me.
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 25 Mar 2015 Link to this post

    Hi Joe,

    Could you please elaborate a bit more on the issue you encountered? Have you tested the chart redraw / refresh / resize methods? 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. James
    James avatar
    37 posts
    Member since:
    Sep 2014

    Posted 25 May in reply to Iliana Nikolova Link to this post

    I am having the same problem as described above.  If the chart is initially hidden using ng-show/ng-hide, then when the chart is displayed it is a fraction of the correct size.  I have tried

    var chartDataEl = $($('.chartArea')[scope.chartIndex]).find('.graph').data('kendoChart');
    chartDataEl.refresh();               
    chartDataEl.resize();               
    chartDataEl.redraw();
    None work for me.

  13. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 31 May Link to this post

    Hi,

    Please accept my apologies for the delayed response.

    What is the width of the element at that point in time, e.g.?
        var el = $($('.chartArea')[scope.chartIndex]).find('.graph');
        console.log(el.width());

    Can you also try resetting the remembered size as follows:
        chartDataEl.resize(true);

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready