Creare grafici responsive con Google Charts

Una libreria Javascript che sto usando parecchio per la creazione di grafici è Google Chart.

Molto semplice da usare e da includere.

Oggi vediamo come impostare la "modalità" responsive.

In eveirà la cosa è molto semplice: questo il div:

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="jquery.js"></script>
   <column cols="6" class="cols_chart">
        <div id="chart_entrate"></div>
    </column>

Come vedete non ho impostato misure.

Questo perchè le imposteremo via Javascript come opzioni da passare a Google Chart.

Per questo esempio abbiamo bisogno anche di jQuery:

    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            title: 'Grafico',
            is3D: true,
            width: $('.cols_chart').width(),
            height: $('.cols_chart').width()
        };
        var ce = new google.visualization.PieChart(document.getElementById("chart"));
        ce.draw(new google.visualization.DataTable(my_data), ptions);
    }
    window.addEventListener('resize', function () {
        drawChart();
    }, false);

Non ho indicato come e dove prendo i dati, lo lascio a voi.

Come vedete impostiamo una dimensione pari a quella del div contenitore; essendo questo al 100%, si prenderà tutto lo spazio.

Poi impostiamo un evento relativo al resize della finestra, attraverso il quale ridisegniamo il grafico prendendo le misure attuali.

State attenti: i dati del grafico sono già impostati e non vengono riaggiornati!

Questo è importante nel caso in cui prendiamo i dati da AJAX; se li impostiamo male rischiamo di fare il refresh dei dati ad ogni resizing, con evidente perdaita di velcocità.

Enjoy!