Google Charts Dashboard: How to make it responsive

问题:

I'm building a Google charts dashboard but I'm having difficulty making it responsive. I've tried using the function added to normal Google charts, as opposed to Dashboards, which works great but it's not having the same impact. Please see my code below. The code I'm trying to use to responsify the dashboard is at the bottom

Thanks Aaron

 google.load('visualization', '1.1', {'packages':['controls','linechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(initialize);
function initialize() {
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing');


  // Send the query with a callback function.
  query.send(drawDashboard);
}

function drawDashboard(response) {
  var data = response.getDataTable();
  // Everything is loaded. Assemble your dashboard...
  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Name',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
  });
  var laptimeChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div'
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
    bind(namePicker, laptimeChart).
    draw(data)

}
$(window).resize(function() {
  draw(data);

});  

回答1:

close, but a couple things...

1. although bind returns the dashboard (for chaining multiple binds),
   draw does not return the dashboard, need to call separately to save dashboard instance

2. the 'resize' listener needs to be in the same scope as dashboard and
   you must include the reference to dashboard when calling draw

google.charts.load('current', {
  callback: initialize,
  packages: ['corechart', 'controls']
});

function initialize() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing');
  query.send(drawDashboard);
}

function drawDashboard(response) {
  var data = response.getDataTable();
  var namePicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Name',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });
  var laptimeChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div'
  });

  // save reference to dashboard
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
    bind(namePicker, laptimeChart);
  dashboard.draw(data);

  // include within drawDashboard
  $(window).resize(function() {
    // reference dashboard instance
    dashboard.draw(data);
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard_div">
  <div id="chart_div"></div>
  <div id="filter_div"></div>
</div>