Responsive Chart Width?

[Nick Baughman]

Is it possible to redraw the chart on page resize?

[Winston]

Yes. It should be possible.

Using http://localhost:3000/examples/interactive/area_chart as an example,

When you render a chart like so:

<div id='chart'></div>
<%= render_chart @chart, 'chart' %>

The generated js will be:

  google.load('visualization','1.0', {packages: ['corechart'], callback: draw_chart});
  function draw_chart() {
    var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"string","label":"Year"});data_table.addColumn({"type":"number","label":"Sales"});data_table.addColumn({"type":"number","label":"Expenses"});data_table.addRow([{v: "2004"}, {v: 1000}, {v: 400}]);data_table.addRow([{v: "2005"}, {v: 1170}, {v: 460}]);data_table.addRow([{v: "2006"}, {v: 660}, {v: 1120}]);data_table.addRow([{v: "2007"}, {v: 1030}, {v: 540}]);
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
    chart.draw(data_table, {width: 400, height: 240, title: "Company Performance", hAxis: {title: "Year", titleTextStyle: {color: "#FF0000"}}});
  };

Notice there is a draw_chart function defined. The name of the function draw_chart is actually based on this call render_chart @chart, 'chart', so if you call render_chart @chart, 'my_special_chart', the name of the function will bedraw_my_special_chart`.

Since you now know the name of the function, you can write your own JS function that listens to window resize event, and then call the draw_my_special_chart method.

Based on http://stackoverflow.com/questions/8950761/google-chart-redraw-scale-with-window-resize.

Hope this helps.