Usare AJAX con Google Charts

Sul sito di Google Charts si trovano dei buoni esempi, ma nessuno che mostra come prendere i dati dal server trmaite AJAX, che è il caso più normale.

Oggi vediamo proprio questo.

Nell'esempio avremmo bisogno anche di jQuery, quindi:

        <script src="jquery.js"></script>
        <script src="https://www.gstatic.com/charts/loader.js"></script>

A questo punto vediamo come inizializzare il tutto:

<script type="text/javascript">
    var eData = "";
    $(function () {
        eData = $.ajax({
            url: "data.php",
            dataType: "json",
            async: false
        }).responseText;
    });
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var eOptions = {
            title: 'AJAX Example',
            is3D: true,
            width: $('.cols_chart').width(),
            height: $('.cols_chart').width()
        };
        var ce = new google.visualization.PieChart(document.getElementById("chart_entrate"));
        ce.draw(new google.visualization.DataTable(eData), eOptions););
    }
    window.addEventListener('resize', function () {
        drawChart();
    }, false);
</script>
    <column cols="6" class="cols_chart">
        <div id="chart_entrate"></div>
    </column>

Ci sono anche le impostazioni relative al responsive, che non sono obbligatorie ovviamente.

Attenzione anche all'attributo async nella chiamata AJAX: a true non mi ha funzionato.

Il PHP ci darà i valori in formato JSON.

Una cosa del genere:

    $res = array();
    $res['cols'] = array(
        array("id" => "", "label" => "Causali", "pattern" => "", "type" => "string"),
        array("id" => "", "label" => "Valori", "pattern" => "", "type" => "number")
    );
    $res['rows'] = array();
    foreach ($query as $var) {
        $arr['c'] = array(
            array("v" => ucfirst($var['can']), "f" => null),
            array("v" => intval($var['val']), "f" => null)
        );
        array_push($res['rows'], $arr);
    }
    echo json_encode($res);

Ovviamente lo posto a titolo di esempio: in sostanza eseguo una query, e strutturo i dati in formato JSON.

Enjoy!