Geomappa colorata

Google chart può essere utilizzato per creare mappe del mondo, di continenti o regioni e colorare con diffrenti tonalità aree geografiche ben precise. Proveremo ora a descrivere una mappa dove verranno visualizzate le 10 economie più forti nel 2006, il grafico mostrerà colorati i nostri paesi e con una tonalità dal più scuro al più chiaro in relazione ai valori inseriti.

Il primo step è il collegamento alla libreria:

<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>

successivamente accediamo al package di nostro interesse e impostiamo il callbak al caricamento:

google.load(‘visualization’, ’1′, {‘packages’: ['geomap']});
google.setOnLoadCallback(drawMap);

Nella funzione vera e propria creiamo il nostro oggetto:

var data = new google.visualization.DataTable();

Impostiamo le label:

data.addColumn(‘string’, ‘Paese’);
data.addColumn(‘number’, ‘PIL, miliardi di $, 2006′);

e aggiungiamo i dati veri e propri:

data.addRows(10);
data.setValue(0, 0, ‘United States’);
data.setValue(0, 1, 13164);
data.setValue(1, 0, ‘Japan’);
data.setValue(1, 1, 4368);

una coppia per ciascun paese, dove i 3 parametri di setValue sono rispettivamente l’indice della riga, l’indice della colonna e il valore.
Nel nostro caso non useremo opzioni particolari:

var options = {};
options['dataMode'] = ‘regions’;

e quindi possiamo agganciare l’elemento della pagina e produrre la mappa:

var container = document.getElementById(‘mappa’);
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);

Vai all’esempio