Integrare Framework7 e Google Charts

Da un pò di tempo sto usando con soddisfazione Framework7 al posto di jQuery Mobile (che è da un bel pò che non è più aggiornato).

Avevo la necessità di creare dei grafici all'interno di una pagina, prendendo i dati da un database remoto.

Mi hanno consigliato Google Charts (già usato in precedenza, ma non su un sito mobile) e devo dire che sta venendo abbastanza bene.

Quindi vediamo come integrare i due.

Prima di tutto, richiamiamo Google Charts mettendo nell'head della pagina questo (e non nel footer come per il resto di Framework7):

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

Poi abbiamo la nostra pagina:

<div class="pages navbar-through toolbar-through">
    <div data-page="charts" class="page">
        <div class="page-content">
            <div class="content-block-title">Charts</div>
            <div class="list-block inset">
                <div id="dashboard_div">
                    <ul>
                        <li>
                            <div id="filter_div_e"></div>
                            <div id="chart_div_e"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Infine in my-app.js (il file di setup delle nostre pagine Framework7):

var myApp = new Framework7();
var $$ = Dom7;

var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});

myApp.onPageInit('charts', function (page) {
    var w = $$('#dashboard_div ul li').width() - 50;

    google.charts.load('current', {'packages': ['corechart', 'controls']});
    google.charts.setOnLoadCallback(function () {
        var options = {
            'title': '2017',
            'is3D': true,
            'pieSliceText': 'value',
            'legend': 'right',
            'width': w,
            'height': w,
            'backgroundColor': '#1c1d1f',
            legendTextStyle: {color: '#FFF'},
            titleTextStyle: {color: '#FFF'},
            hAxis: {
                color: '#FFF',
            }
        };

        var dataAjax = $$.ajax({
            async: false,
            url: 'URL_FILE.php',
            dataType: 'json'
        }).responseText;
        
        var data = google.visualization.arrayToDataTable(JSON.parse(dataAjax));
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
        var donutRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div_e',
            'options': {
                'filterColumnLabel': 'Valore Entrate',
                'ui': {'labelStacking': 'vertical'}
            }
        });
        var pieChart = new google.visualization.ChartWrapper({
            'chartType': 'PieChart',
            'containerId': 'chart_div_e',
            'options': options
        });
        dashboard.bind(donutRangeSlider, pieChart);
        dashboard.draw(data);
    });
});

Nel file PHP, andiamo a recuperare i dati, mandandoli in output in formato JSON; una cosa del genere:

    $arrRes = array();
    array_push($arrRes, ['Name', 'Valore Entrate']);
    foreach ($query as $var) {
        $val = ($tipo == 'E') ? $var['sum_valore'] : ($var['sum_valore'] * -1);
        array_push($arrRes, array(ucfirst($var['causale_nome']), intval($val)));
    }

    echo json_encode($arrRes);

Come vedete, nella chiamata AJAX specifichiamo async: false, sennò Google Charts non funziona (a me non ha mai funzionato neanche in altri siti dove ho usato questa libreria, non solo in questo caso).

Probabilmente c'è ancora da fare qualche aggiustamento di stile (ad esempio nel range slider); ma nel complesso già funziona, touch compreso.

Enjoy!