Usa Google Charts per i tuoi grafici web!

Nella vita di un #webdeveloper prima o poi arriverà la sfida di creare dei grafici semplici da comprendere e belli da vedere.

In giro per il web esistono tanti tools per creare i grafici con fari linguaggi: PHP, Javascript, Ajax, etc… ma quello con il quale mi sono trovato meglio è Google Charts, lo strumento per i web developers che mette a disposizione una gallery ricca di tantissime tipologie di grafici ed una serie di funzionalità sviluppate direttamente da GOOGLE.

grafici-google-charts

Ogni tipologia di grafico è customizzabile, configurabile e con un set di opzioni per estendere le caratteristiche di base in modo tale da adattare al meglio la resa del proprio sito internet.

HTML5 ed SVG sono le basi che costituiscono questi grafici e questo permette la massima compatibilità Cross-browser e cross-platform  verso sistemi iOS ed Android. Inoltre esiste tutta una serie di connettori, tools e protocolli per utilizzare i Google charts con varie tipologie di basi di dati.

Ultimo ma non meno importante: questi grafici messi a disposizione da Google sono completamente gratuiti e con 3 anni di retro-compatibilità garantita.

Ecco un semplice esempio di codice:

<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>

ed il risultato sarà:

grafici-google-charts-torta

Ecco i link utili per iniziare:

https://google-developers.appspot.com/chart/

https://google-developers.appspot.com/chart/interactive/docs/

https://google-developers.appspot.com/chart/interactive/docs/quick_start#how-about-a-bar-chart

0 comments on “Usa Google Charts per i tuoi grafici web!Add yours →

Lascia un commento

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