Home Digital Creare Grafici con Google Chart

Creare Grafici con Google Chart

tablet con grafci

Google Chart è un tool messo a disposizione da Big G ai suoi utenti sviluppatori che hanno la necessita di integrare nelle proprie pagine web grafici in maniera semplice e rapida.

Funzionamento

Il tool consiste sostanzialmente in una semplice serie di istruzioni javascript da integrare nelle pagine web, che elaborano i dati forniti e li restituiscono informa grafica sfruttando librerie dedicate messe a disposizione dal famoso motore di ricerca Google.

Per realizzare i grafici è sufficiente andare alla sezione dedicata Google Chart, scegliere dalla gallery il grafico che più si adatta alle nostre esigenze, scaricare il codice ed integrarlo nelle nostre pagine con le opportune modifiche.

Analisi del codice

Per procedere con l’esempio ho scelto il grafico a colonne, in caso tu scelga un altra tipologia di grafico potrebbero esserci delle piccole variazioni a livello di codice, ma il procedimento rimane invariato e comunque in caso tu avessi problemi non esitare a contrarmi attraverso la pagina contattami.

Il codice è sostanzialmente diviso in 3 blocchi:

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

A seguire integrata nel precedente script abbiamo la funzione drawVisualization() composta da tre variabili.

La prima variabile che contiene i valori dei dati da usare nel grafico

var data = google.visualization.arrayToDataTable([
 [‘Year’,’Sales’, ‘Expenses’, ‘Profit’],
 [‘2014’, 1000,400, 200],
 [‘2015’, 1170,460, 250],
 [‘2016’, 660,1120, 300],
 [‘2017’, 1030,540, 350]
 ]);

La seconda variabile che contiene i valori opzionali, come titolo e sottotitolo, ma può anche contenere, parametri come colori forme e dimensioni

var options = {
 chart: {
 title: ‘CompanyPerformance’,
 subtitle:’Sales, Expenses, and Profit: 2014-2017′,
 }};

L’ultima variabile che specifica il tipo di grafico (.bar)  e in quale contenitore inserirlo (columnchart_material)

var chart = newgoogle.charts.Bar(document.getElementById(‘columnchart_material’));

Infine nell’ultimo dei tre blocchi del codice abbiamo il tag DIV all’interno del body che posiziona il grafico nella nostra pagina.

</p>
<div id=”columnchart_material”style=”width: 900px; height: 500px;”></div>
<p>

Creare un grafico

Per realizzare un grafico come già detto è sufficiente copiare il codice del disegno preferito direttamente dalle pagine di Google e incollarlo sulle pagine del nostro sito, andando a modificare i dati in base alle nostre esigenze

Codice completo

<html>
 <head>
 <scripttype=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
 <scripttype=”text/javascript”>
 google.charts.load(‘current’,{‘packages’:[‘bar’]});
 google.charts.setOnLoadCallback(drawChart);
function drawChart() {
 var data =google.visualization.arrayToDataTable([
 [‘Year’,’Sales’, ‘Expenses’, ‘Profit’],
 [‘2014’, 1000,400, 200],
 [‘2015’, 1170,460, 250],
 [‘2016’, 660,1120, 300],
 [‘2017’, 1030,540, 350]
 ]);
var options = {
 chart: {
 title: ‘CompanyPerformance’,
 subtitle:’Sales, Expenses, and Profit: 2014-2017′,
 }
 };
var chart = newgoogle.charts.Bar(document.getElementById(‘columnchart_material’));chart.draw(data,google.charts.Bar.convertOptions(options));
 }
 </script>
 </head>
 <body>
 <divid=”columnchart_material” style=”width: 800px; height:500px;”></div>
 </body>
</html>

Questo codice permette di generare il seguente grafico statico, che al passaggio del cursore genera delle iterazioni dinamiche.


Spero che questo articolo sia stato utile, se hai necessità di un chiarimento o vuoi condividere la tua opinione puoi utilizzare la pagina dedicata contattami.

Manuele Morandinhttps://www.manuelemorandin.net
Consulente SEO e tecnico informatico, aiuto imprenditori e professionisti a sviluppare on line la propria attività, attraverso il posizionamento sui motori di ricerca, campagne pubblicitari e gestione dei social network.

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci il tuo nome qui

Consulenza SEO

Hai un progetto che non decolla, che non ottiene i risultati sperati? Oppure stai per partire con una nuova idea e vuoi che sia tutto a posto. Contattami per una Consulenza, per un’analisi rapida o per un Audit SEO approfondito del tuo sito, spesso il problema è più semplice di quel che si pensa. Richiedi:

Oppure