Grafici animati

 HTML5  No Responses »
Feb 232012
 

Riprendendo il post precedente potremmo aggiungere un’interessante integrazione: l’animazione al nostro grafico.

Questo significherà impostare nelle options la durata e l’easing dell’anomazione:


var options = {
width: 400,
height: 240,
animation:{duration: 1000,easing: ‘out’,},
vAxis: {minValue:0, maxValue:1200}
};

A questo punto impostiamo il nostro grafico a 0:


data.addRows([
['2008', 0, 0],
['2009', 0, 0],
['2010', 0, 0],
['2011', 0, 0]
]);

Predisponiamo un bottone sul quale mapperemo l’evento click:


var button = document.getElementById(‘button’);

e disbilitiamolo nell’esecuzione della funzione drawChart:


function drawChart() {
button.disabled = true;
google.visualization.events.addListener(chart, ‘ready’,
function() {button.disabled = false;});
chart.draw(data, options);
}

A questo punto sul click del bottone andiamo a modificare i value delle nostre righe che “cresceranno” con l’animazione prevista:


button.onclick = function() {
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
drawChart();
}

Ecco il nostro grafico animato

 Share

Grafici a colonne

 HTML5  No Responses »
Feb 222012
 

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

 Share

Mappa dinamica colorata (1)

 HTML5  No Responses »
Feb 202012
 

E’ possibile colorare dinamicamente una nazione su una cartina senza ricorrere alla tradizionale soluzione in flash?
La risposta è sì e ci sono due opzioni: la prima passa attraverso google chart e svg, maentre la seconda, sempre tramite google chart, presente l’output sotto forma di immagine.

Vediamo la prima opzione, come sempre occorr collegare la libreria e chiamare la funzione vera e proprai all’onload:

<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>
<script type=’text/javascript’>
google.load(‘visualization’, ’1′, {‘packages’: ['geochart']});
google.setOnLoadCallback(drawRegionsMap);

Nella funzione come prima cosa impostiamo la label:


var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Country’);
data.addColumn(‘number’, ‘Articoli’);

e successivamente il paese da visualizzare, attenzione a utilizzare la nomeclatura standard ISO-3166-1


data.addRows([['Peru', 1]]);

potermmo già concludere il nostro lavoro con le seguenti istruzioni


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

che permettono di disegnare la cartina, tuttavia è opprtuno settare alcune opzioni:


var options = {
colorAxis: {colors: ['FF0000']},
displayMode: ‘regions’,
region: ’005′,
width:’300′,
height:’225′,
legend:’none’,
datalessRegionColor:’000000′,
resolution:’countries’
};

dove colorAxis è il colore del paese da evidenziare, displayMode serve per impostare il livello di zoom, region serve per definire la regione da visualizzare (sempre secondo le codifiche standard), quindi larghezza e altezza del nostro oggetto, se vogliamo o meno visualizzare la legenda e per concludere risoluzione e colore delle regioni senza dati.

Vedi l’esempio competo.

 Share

Geomappa colorata

 HTML5  No Responses »
Feb 122012
 

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

 Share

Grafici con Google Chart

 HTML5  No Responses »
Feb 112012
 

Un’esigenza che si manifesta molto spesso è quella di creare dei grafici in modo dinamico,
senza ovviamente ricorrere a delle immagini da inserire nel proprio sito.
Esistno da tempo molte soluzioni ma per lo più consentono di realizzare istogrammi o altri grafici molto semplici.
Attraverso Google Chart possiamo realizzare grafici anche complessi senza troppo sforzo.

Vediamo un esempio di grafico a torta, la soluzione viene proposta in svg (adottano VML per le vecchie versioni di IE ):
come prima cosa bisogna inserire il collegamento alla libreria:

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

e poi passiamo alla parte di javascript:
come prima cosa carichiamo il package corretto:

google.load(‘visualization’, ’1.0′, {‘packages’:['corechart']});

ora impostiamo un callback quando l’applicazione viene caricata in modo da leggere i dati e fare le operazioni necessarie:

 google.setOnLoadCallback(disegnaGrafico);

Quindi creiamo il nostro oggetto:

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

Aggiungiamo la colonna che funzionerà da etichetta:

data.addColumn(‘string’, ‘Browser’);

e aggiungiamo una seconda etichetta numerica

data.addColumn(‘number’, ‘Slices’);

e ora i dati:

data.addRows([

['Firefox', 86],

['Chrome', 54],

['Internet explorer', 17],

['Safari', 15],

['Opera', 1]

]);

Non resta che settare titolo e dimensioni

var options = {‘title’:'Statistiche Browser’,'width’:400,’height’:300};

e implentare il nostro oggetto collegandolo al div che lo ospiterà:

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

L’esempio

 Share