Creare grafici responsive con Google Charts

Mattepuffo's logo
Creare grafici responsive con Google Charts

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!


Condividi

Commentami!