响应多个Google图表

Question

I'm using google charts in my website, and since yesterday i'm searching about a solution to make my charts responsive, I found one in stackoverflow :

<script>
function resize () {
    // change dimensions if necessary
    chart.draw(dataTable1, options);
    chart.draw(dataTable2, options);
    chart.draw(dataTable3, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resize);
}
else {
    window.attachEvent('onresize', resize);
}
</script>

But the probleme is when i use more than one chart only one become responsive, The example is here : http://jsfiddle.net/faissal_aboullait/5f92veyy/

Answer 1

The problem is that you're using the same var chart.

And of course using it all over again, the chart variable will keep a reference of the 3rd chart.

Declare a different variable for every chart like this:

var reservationChart; 
//............
reservationChart = new google.visualization.ColumnChart(document.getElementById('chart_reservations'));
reservationChart.draw(dataTable1, options);   

And then the resize function will look like this:

function resize () {
        // change dimensions if necessary
        reservationChart.draw(dataTable1, options);
        clientsChart.draw(dataTable2, options);
        deprecChart.draw(dataTable3, options);
    }

An updated fiddle here: http://jsfiddle.net/d8vaxuug/