Home / Programmazione / Javascript - AJAX / Usare AJAX con Google Charts
Mattepuffo

Usare AJAX con Google Charts

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!