Google chart redraw/scale on window resize

How do I redraw/rescale a google linechart on window resize?

To redraw only when the window resize is completed and avoid multiple triggers, I think is better create an event:

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data);
});

The original code by Google simply does this at the end:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

Changing it with a little javascript you can scale it when the window resizes:

function resize () {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

window.onload = resize;
window.onresize = resize;

Since the window.resize event fires multiple times on each resize event, I believe that the best solution is to use smartresize.js and use smartdraw(). This limits the number of chart redraw’s per window.resize.

By using the provided js you can do it as simply as this:

// Instantiate and draw our user charts, passing in some options (as you probably were doing it)
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);

// And then:
$(window).smartresize(function () {
    chart.draw(data, options);
});

This is the simplest way I can work out of doing this without causing too much stress to the browser:

    var chart1 = "done";

$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});

All it does is wait 1 second before the chart reloads and doesn't let the function call again in this waiting period. as window resize functions are called multiple times any time you change the window size this helps make the function only actually work once each time you change the window size, the rest of the calls get stopped by the if statement.

I hope this helps

There is no option in Google Visualization API to make Google Charts responsive.

But we can make Google Charts responsive as Window Resizes. To make Google Chart responsive there is jQuery library available at GitHub - jquery-smartresize licensed under MIT License, which has the ability to resize graphs on window resize event.

This project on GitHub has two script files :-

jquery.debouncedresize.js: adds a special event that fires once after the window
has been resized.

&

jquery.throttledresize.js: adds a special event that fires at a reduced rate (no 
more double events from Chrome and Safari).

Here are two examples of responsive charts...

1. Responsive Google Pie Chart
2. Responsive Google Bar Chart

We can change the bottom padding of visualization_wrap to match the desired aspect ratio of chart.

Calculate as Height / Width x 100
For a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25%
For a square it'd be 100%

We can customize chartarea option of Google Chart to ensure that labels don't get cut off on resizing.