Auto resize charts on responsive web design?

7 posts, 0 answers
  1. Dirk
    Dirk avatar
    1 posts
    Member since:
    Jan 2013

    Posted 21 Mar 2013 Link to this post

    Is it possible to resize a bar chart or whatever on risizing the browser window? I'm using the Bootstrap framework for the responsive layout. If I put a chart into a 12-column-grid, the chart fits as expected the full width, same on a 4-column grid e.g., the chart is small. That's ok. But: I which that the chart reacts in the same way as images doing by resizing the window . That means, e.g. a 12-grid-chart should shrink smaller if the browser window gets even small.

    Thanks for help.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 21 Mar 2013 Link to this post

    Hello Dirk,

    Generally speaking, once rendered Kendo UI Chart cannot be resized (due to browser limitations). In order to achieve the desired behavior you should refresh() the chart and recreate the widget with the new dimensions. For your convenience here is a simple jsBin example which demonstrates the suggested approach in action.

    Kind 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. Mark
    Mark avatar
    1 posts
    Member since:
    Jul 2013

    Posted 05 Aug 2013 Link to this post

    'Sup Peeps?

    We had a problem in that when the browser window becomes smaller, the code to refresh the chart does not decrease its size.  We solved this problem with a little hackery:

        jQuery(window).on("resize", function(event) {
            var chartDiv = jQuery("#ChartName"); 
            var chart = chartDiv.data("kendoChart");
            
            // Temporarily disable animation, yo!
            chart.options.transitions = false;

            // Temporarily hide, then set size of chart to container (which will naturally resize itself), then show it again 

            chartDiv.css({ display:"none" });
            chartDiv.css({ width:chartDiv.parent().innerWidth(), display:"block" });
       
            chart.redraw();   
        });

    Worked for us!   Good luck..... and may the force be with y'all.
  5. Annette McGinley
    Annette McGinley avatar
    1 posts
    Member since:
    Mar 2006

    Posted 12 Aug 2013 Link to this post

    Hello Dirk
    Being fairly new to response design and all that goes with it so not sure if this is the a good way of doing it but I am using Knockout JS and I used Marks suggestion wrapped in a binding handler which seems to work quite nicely. Thanks Mark

    ko.bindingHandlers.chartresize = {
         init: function (element, valueAccessor) {
                   $(window).resize(function () {
                       var value = valueAccessor();
                       var chartDiv = $(element);
                       var chart = chartDiv.data("kendoChart");

                       chart.options.transitions = false;

                       chartDiv.css({ display: "none" });
                      // subtract a value to customize width in the container
                     chartDiv.css({ width: chartDiv.parent().innerWidth() - value, display: "block" })

                      chart.redraw();
         });
       }
    };
  6. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 01 Aug 2014 in reply to Mark Link to this post

    jQuery(window).on("resize", function(event) {
           var chartDiv = jQuery("#ChartName");
           var chart = chartDiv.data("kendoChart");
            
           // Temporarily disable animation, yo!
           chart.options.transitions = false;
     
           // Temporarily hide, then set size of chart to container (which will naturally resize itself), then show it again
           chartDiv.css({ display:"none" });
           chartDiv.css({ width:chartDiv.parent().innerWidth(), display:"block" });
        
           chart.redraw();  
       });
  7. Andy
    Andy avatar
    1 posts
    Member since:
    Jun 2014

    Posted 08 Sep 2014 in reply to Mark Link to this post

    Probably better to use this;

    $(window).resize(function()
    {
        kendo.resize($("div.k-chart[data-role='chart']"));
    });
  8. Michael
    Michael avatar
    1 posts
    Member since:
    Nov 2015

    Posted 17 Nov 2015 in reply to Andy Link to this post

    Excellent solution! Just curious how you knew this? :)
Back to Top
Kendo UI is VS 2017 Ready