Google Chart Resize on Window Resize

Question

How can I get my google chart to resize properly, currently it gets bigger when I expand the window but it does not shrink when i shrink the window. Essentially I've wrapped the entire google chart in a resize function but it isn't quite right:

function resize() {
  google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Type' });
    dataTable.addColumn({ type: 'string', id: 'Organisation' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Work Experience', 'GE', new Date(2010, 8, 1 ), new Date(2011, 8, 30) ],
      [ 'Work Experience', 'Shell', new Date(2015, 2, 1),  new Date(2016, 1, 1) ],
      [ 'Work Experience', 'British Gas', new Date(2016, 1, 1),  new Date(2017, 9, 1) ],
      [ 'Work Experience', 'British Telecom', new Date(2017, 9, 1),  new Date() ],
      [ 'Work Experience', 'University', new Date(2011, 8, 30),  new Date(2015, 2,1) ]
      ]);
  
    var options = {
                  timeline: {showRowLabels: false},
                  backgroundColor: '#161616',
                  barLabelStyle: { fontName: 'Roboto', color: '#ffffff' },
                  height: 100, 
                  hAxis: {textStyle:{color: '#ffffff'}}
                  };
  
  google.visualization.events.addListener(chart, 'ready', function () {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
      label.setAttribute('fill', '#ffffff');
  }
  });
  });

  google.visualization.events.addListener(chart, 'ready', function () {
  var rects = container.getElementsByTagName('rect');
  Array.prototype.forEach.call(rects, function(rect) {
    // find chart  element
    if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
      // remove stroke from last  element
      rect.setAttribute('stroke', 'none');
      rect.setAttribute('stroke-width', '0');
      }
    });
  });

  chart.draw(dataTable, options);
  }

}

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

user_5090771 · Answer

when resizing, you need to clear the chart, before re-drawing.
if the chart is not cleared, it can prevent the chart's container from shrinking.
then when re-drawn, it is the same size.
(this all depends on the page layout, but clearing will resolve most issues)

use method --> chart.clearChart()

also, the load callback only needs to be called once per page load.
no need to include the load statement in the resize event handler.

and, google's load statement will wait for the page to load by default.
and can be used in place of --> window.onload

see following working snippet...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Type' });
  dataTable.addColumn({ type: 'string', id: 'Organisation' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['Work Experience', 'GE', new Date(2010, 8, 1 ), new Date(2011, 8, 30)],
    ['Work Experience', 'Shell', new Date(2015, 2, 1),  new Date(2016, 1, 1)],
    ['Work Experience', 'British Gas', new Date(2016, 1, 1),  new Date(2017, 9, 1)],
    ['Work Experience', 'British Telecom', new Date(2017, 9, 1),  new Date()],
    ['Work Experience', 'University', new Date(2011, 8, 30),  new Date(2015, 2,1)]
  ]);

  var options = {
    timeline: {showRowLabels: false},
    backgroundColor: '#161616',
    barLabelStyle: {fontName: 'Roboto', color: '#ffffff'},
    height: 100,
    hAxis: {textStyle:{color: '#ffffff'}}
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('fill', '#ffffff');
      }
    });

    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect) {
      // find chart  element
      if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
        // remove stroke from last  element
        rect.setAttribute('stroke', 'none');
        rect.setAttribute('stroke-width', '0');
      }
    });
  });

  window.addEventListener('resize', drawChart);
  drawChart();

  function drawChart() {
    chart.clearChart();
    chart.draw(dataTable, options);
  }
});

Google Chart Resize on Window Resize

1 Answers