Grafici Google Charts con PHP
All, PHP, Sviluppo

Grafici Google Charts con PHP

Inserire sul proprio sito web Grafici Google Charts con PHP

Ho deciso di creare quest’articolo perché nello sviluppo del mio gestionale per allenatori di calcio (visibile qui) mi sono trovato davanti una sfida che non avevo mai affrontato: lo sviluppo di Grafici Google Charts con PHP, il servizio di Google per integrare i dati del proprio DB in maniera più leggibile per gli utenti.

Google Chart permette di scegliere tra una vasta libreria di grafici per poter far fronte a tutte le esigenze che abbiamo nello sviluppo del nostro sito. La configurazione e l’utilizzo dei grafici è spiegato molto bene e dettagliatamente sul sito, tuttavia non viene spiegato come creare grafici Google Charts con PHP.

Cosa ci fornisce Google?

Big G è da sempre noto per il supporto praticamente su qualsiasi argomento per gli strumenti di developer e come sempre fornisce ottime guide su come utilizzare tali strumenti. Sul sito Google Chart è possibile trovare una vasta scelta di grafici come:

Grafico Pie Charts

Grafici Google Charts con PHP

Bar Charts

I due grafici in esempio possono essere personalizzati con tutti i dati che vogliamo inserire, sarà solo necessario modificare questa parte di codice

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

Dove il primo valore nelle parentesi quadre sono le etichette dei dati e le altre parentesi contengono i valori necessari per la realizzazione del grafico.

Sviluppo grafici Google Charts con PHP

Entriamo ora nel dettaglio dello sviluppo dei grafici Google Charts con PHP prendendo come esempio di riferimento il Bar Charts che abbiamo visto poco sopra. Il codice che mostriamo ora è altamente personalizzabile e con un minimo di praticità potete integrarlo a vostro piacere nel vostro sito.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Per integrare i grafici Google Charts con PHP abbiamo bisogno ovviamente di creare all’interno del nostro DB, in questo caso MYSQL, i dati necessari da mostrare.

Creazione tabella ed inserimento dati nel database

CREATE TABLE task (
  id_task INT(11),
  task VARCHAR(20),
  ore INT(10)
);
INSERT INTO `task` (`id_task`, `task`, `ore`) 
VALUES (NULL, 'outlook', '2'), 
(NULL, 'powershell', '4'), 
(NULL, 'excel', '5'), 
(NULL, 'apache', '1'), 
(NULL, 'explorer', '9');

Una volta creato la tabella nel database e popolata con tutti i dati a noi necessari, siamo pronti all’estrapolazione e stampa del grafico a video

<?php
$connection = mysqli_connect('localhost', 'root', '', 'test');
$result = mysqli_query($connection, "SELECT * FROM task ORDER BY ore ASC");
//if($result){
//    echo "CONNECTED";
//}
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['bar']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Processo', 'ore'],

                <?php

                    if(mysqli_num_rows($result)> 0){

                        while($row = mysqli_fetch_array($result)){

                            echo "['".$row['task']."', '".$row['ore']."'],";

                        }


                    }



                ?>

            ]);
            var options = {
                chart: {
                    title: 'Processi',
                    subtitle: 'Ore lavorate per processo',
                    width: 5000,
                    height: 500
                }
            };

            var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

            chart.draw(data, google.charts.Bar.convertOptions(options));
        }
    </script>

</head>
<body>

<div id="columnchart_material"></div>


</body>
</html>

Tutto il codice qui sopra, che ora vedremo nel dettaglio, restituirà questo grafico

Grafici con Google Charts con PHP - Esempio

Nel dettaglio vediamo alcuni pezzi di codice di php:

<?php
$connection = mysqli_connect('localhost', 'root', '', 'test');
$result = mysqli_query($connection, "SELECT * FROM task ORDER BY ore ASC");
//if($result){
//    echo "CONNECTED";
//}
?>

Effettuiamo la connessione al database passandogli le credenziali necessarie ed eseguiamo la query per estrapolare tutti i dati presenti nella nostra tabella, in questo caso ‘task’, ed ordinare i risultati in ordine ascendente facendo riferimento al campo ‘ore’.

   <?php

                    if(mysqli_num_rows($result)> 0){

                        while($row = mysqli_fetch_array($result)){

                            echo "['".$row['task']."', '".$row['ore']."'],";

                        }


                    }



                ?>

Questo pezzo di codice è presente all’interno del nostro script dove vengono presi i dati da visualizzare nel grafico. Viene richiamata la variabile $result che è il risultato della query SELECT sul database e si effettua un ciclo while per stampare i dati all’interno della nostra tabella.

Questo è tutto quello che c’è da sapere per la realizzazione dei grafici in php, tutti gli esempi resi disponibili da Google sono personalizzabili come più si voglia. Per ulteriori istruzioni o suggerimenti potete contattarmi o lasciare un commento

Articoli correlati

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *