Resize / zoom google chart when resizing window

Question

How to redraw / resize google line chart when resizing window?

Answer 1

To redraw only after resizing the window and avoiding multiple triggers, I think it's better to 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); }); 

Answer 2

The original code from Google just does this at the end:

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

By changing this with a little javascript, you can scale it when you resize the window:

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

Answer 3

Since the window.resize event fires several times for each resize event, I believe that the best solution is to use smartresize.js and use smartdraw() . This limits the number of chart redraws per window.resize .

Using the provided js, you can do it as simple 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); }); 

Answer 4

This is the easiest way to do this without causing excessive browser load:

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

All he does is wait 1 second before reloading the chart and prevent the function from calling the call again during this waiting period. since window resizing functions are called several times each time you resize a window, this helps to make the function actually work only once each time the window is resized, other calls are stopped by the if statement.

hope this helps

Answer 5

There is no way to customize Google feedback in the Google Visualization API.

But we can get Google Charts to respond to changes in Windows . To respond to the Google Chart, there is a jQuery library available at GitHub - jquery-smartresize , licensed under the MIT license, which has the ability to resize graphs when the event window is resized.

This GitHub project 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 flexible diagrams ...

• Responsive Google Chart
• Responsive Google Chart

We can modify the bottom pad visualization_wrap to fit the desired aspect ratio of the 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 adjust the chartarea parameter of Google charts to ensure that labels are not disabled when resized .

Answer 6

Redraw / re-scale the Google line bar when resizing the window:

 $(document).ready(function () { $(window).resize(function(){ drawChart(); }); }); 

Answer 7

I personally prefer the following approach if you can live with addEventListener and not mind supporting IE and lt; 9.

 var windowResizeTimer; window.addEventListener('resize', function(e){ clearTimeout(windowResizeTimer); windowResizeTimer = setTimeout(function(){ chart.draw(data, options); }, 750); }); 

Pay attention to the use of the setTimeout() and clearTimeout() functions and the added delay of 750 milliseconds, which makes it somewhat less intense when several resizing events fire quickly (which is often the case for browsers on the desktop when resizing with the mouse).

Answer 8

Using Tiago Castro's answer, I applied the ruler to show a demo.

 google.load('visualization', '1', { packages: ['corechart', 'line'] }); google.setOnLoadCallback(drawBackgroundColor); function drawBackgroundColor() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Compute Time'); data.addColumn('number', 'Compute Times'); console.log("--"); data.addRows([ [0, 0, 0], [10, 10, 15], [20, 20, 65] ]); console.log(data); var options = { height: 350, legend: { position: 'bottom' }, hAxis: { title: 'Nb Curves' }, vAxis: { title: 'Time (ms)' }, backgroundColor: '#f1f8e9' }; function resize() { var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } window.onload = resize(); window.onresize = resize; } 

 <script src='https://www.google.com/jsapi'></script> <div id="chart_div">