Grafici a colonne

Una versione molto popolare dei grafici è la rappresentazione a colonne.
Anche in questo caso, giusto per non inventare nulla, faremo ricorso a Google Chart:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1″, {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Quindi colleghiamo la libreria, carichiamo il package opportuno e tramite un callback richiamiamo la funzione che ci permetterà di operare:

Aggiungimo le 3 colonne che compongono il nostro grafico e il tipo di dato che contengono:

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Anno’);
data.addColumn(‘number’, ‘Ricavi’);
data.addColumn(‘number’, ‘Spese’);

e infine i dati in nostro possesso ovvero le righe, il primo valore rappresenta l’asse x e poi a seguire gli N valori da rappresentare:

data.addRows([
['2008', 1000, 400],
['2009', 1170, 460],
['2010', 660, 1120],
['2011', 1030, 540]
]);

A questo punto andiamo a settare alcune opzioni di visualizzazione del grafico:

var options = {
width: 400, height: 240,
title: ‘Bilancio’,
hAxis: {title: ‘Anno’, titleTextStyle: {color: ‘red’}}
};

nell’ordine: dimensioni, titolo e formattazione della didascalia

Non resta che disegnare il grafico, agganciandolo agli elementi della pagina:

var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

Ed ecco il nostro grafico