CODEWITHSUNDEEP
javascriptjqueryresizegoogle-visualization
thecodeparadox
thecodeparadox

Reputation: 87073

Google chart redraw/scale on window resize

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

Upvotes: 87

Views: 85303

Answers (10)

Harishbn
Harishbn

Reputation: 97

Try with these approaches

window.dispatchEvent(new Event('resize'))

Chartkick.charts["<id of chart element like chart-1>"].redraw()

Upvotes: 0

Ansh Shrivastava
Ansh Shrivastava

Reputation: 1

I've been stuck on the same thing for days and I found out that adding an event works best.

window.addEventListener("resize", drawChart);

Just add this line after declaring your function and it will work fine.

Replace drawChart with the name of your function.

Upvotes: 0

Jamie Deakin
Jamie Deakin

Reputation: 156

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

Upvotes: 4

b0y
b0y

Reputation: 576

Using Tiago Castro's answer, I have implemented a line chart to show the demonstration.

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">

Upvotes: -1

Bwyan
Bwyan

Reputation: 53

I personally prefer the following approach, if You can live with using addEventListener, and don't mind lack of support for IE < 9.

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

Note the use of the setTimeout() and clearTimeout() functions and the added delay of 750 milliseconds, which makes this slightly less intensive when multiple resize events fire in quick succession (which is often the case for browsers on desktop when resizing using a mouse).

Upvotes: 1

Srinu Basava
Srinu Basava

Reputation: 183

Redraw/rescale a Google linechart on window resize:

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

Upvotes: 2

Tiago Castro
Tiago Castro

Reputation: 826

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;

Upvotes: 39

Fonsini
Fonsini

Reputation: 693

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);
});

Upvotes: 9

OO7
OO7

Reputation: 2807

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.

Upvotes: 3

Hemerson Varela
Hemerson Varela

Reputation: 25792

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);
});

Upvotes: 73

Related Questions