Google Visualization API
• Librerie JavaScript per la realizzazione di
grafici da inserire in pagine HTML
• Due versoni:
– Grafici interattivi realizzati con oggetti Flash
– Grafici statici realizzati con immagini create lato
server (Google)
• L’ultima versione delle librerie è scaricata
direttamente da Google ogni volta che si accede
alla pagina che le include
Esempi di grafici
Descrizione delle librerie
• Pensate per operare in un contesto HTTP
• Struttura modulare
– un “core” minimale di funzionalità sono delegate al
caricamento dinamico dei soli pacchetti necessari;
– vari pacchetti specifici per ciascuna tipologia di
grafico
• Si riduce il traffico per il download degli script
da Google
Importazione delle librerie
• Le librerie sono importate come un qualunque
altro file script esterno:
<SCRIPT LANGUAGE="JavaScript"
SRC="http://www.google.com/jsapi">
</SCRIPT>
• Viene creato l’oggetto “google” che espone
ilmetodo “load” per il caricamento dinamico
dei pacchetti
Caricamento dei pacchetti
• Si specificano:
– la versione (1=stabile, 1.1=sviluppo);
– i tipi di grafici che saranno utilizzati (packages)
<SCRIPT LANGUAGE="JavaScript">
google.load(
'visualization',
'1',
{'packages': ["annotatedtimeline", "gauge"]}
);
</SCRIPT>
Principio di funzionamento
• Per ciascuno dei grafici è necessario definire un
elemento DIV
• Il DIV deve avere specificate le dimensioni
(attributi “width” e “height”) e l’attributo “id”
• La creazione del grafico inserisce
dinamicamente il codice HTML necessario alla
sua visualizzazione all’interno del DIV
Definizione delle serie di dati
• I grafici della GVA hanno come sorgente dati
la DataTable
– Divisa in due parti: definizione delle colonne
(nome, tipo …)
– Righe di dati secondo lo schema delle colonne
definito nella prima parte
• La DataTable può essere definita:
– Staticamente, all’interno dello script
– Dinamicamente, tramite chiamata Ajax
Definizione statica
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Memory');
data.setValue(0, 1, 80);
data.setValue(1, 0, 'CPU');
data.setValue(1, 1, 55);
data.setValue(2, 0, 'Network');
data.setValue(2, 1, 68);
Definizione dinamica
• Due possibilità:
– Recuperare i dati con una chiamata Ajax e scrivere
codice che crea la tabella sulla falsa riga
dell’esempio precedente
– Usare gli strumenti forniti dalle API di Google
• La GVA mette a disposizione l’oggetto Query,
che permette di recuperare automaticamente
una DataTable da una determinata URL
google.visualization.Query
• Preleva i dati da una URL mettendo a
disposizione funzionalità avanzate di filtraggio
• Gestisce automaticamente le comunicazioni
asincrone Ajax e i parametri di richiesta
• Processing della risposta ottenuta dalla
richiestatramite passagio di callback
• Ogni richiesta è associata ad un ID univoco per
la sessione di lavoro che deve essere ripetuto
nela risposta
Creazione Query e recupero dati
query = new
google.visualization.Query('http://localhost/gauges.json');
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) { alert('Error in query }
var data = response.getDataTable();
… /* creazione grafico */
}
Parametri della richiesta
• Alla chiamata del metodo “send” la query:
– interroga la url specificata al momento della
creazione
– passa il parametro “id” che deve essere restituito
identico nella risposta
• Permette altre operazioni (es. filtraggi) che non
trattiamo
Formato di risposta della url
• Diversi formati ammessi:
– json
– csv
• Preferibile il primo. Tabella descritta per
colonne e righe
table:{
cols: [ {id: 'A', label: 'Label', type: 'string'},
{id: 'B', label: 'Value', type: 'number'}],
rows: [{c:[{v: 'Statistic KPI'}, {v: 47.000}]}]
}
Parametri della risposta
• La descrizione della Datatable è inesrita in una
envelope del tipo:
google.visualization.Query.setResponse({
version:'0.5',
reqId:'0',
status:'ok',
table:{… }
})
Elaborazione della risposta
• La stringa json restituita dalla url è parsata
direttamente dal componente query
– è verificata la corrispondenza dello “id” inviato in
fase di richiesta
– la descrizione della tabella è trasformata in oggetto
JavaScript
– è estratto lo stato della risposta
• Non resta che verificare lo stato e prelevare i
dati con il metodo GetDataTable() dell’oggetto
response
Creazione del grafico
• Una volta recuparata la datTable, la creazione
del grafico è banale:
data = response.getDataTable();
chart = new google.visualization.AnnotatedTimeLine(
document.getElementById('chart_div') //chart-div è l’id di un DIV HTML
);
chart.draw(
data,
{displayAnnotations: true, scaleType: 'allfixed', scaleColumns: [0, 1]}
);
Note
• Le tabelle restituite dalle URL legate alle query
hanno strutture diverse a seconda del gafico da
cui saranno utilizzate
• Per ogni tipo di grafico esiste una
documentazione specifica all’indirizzo:
– http://code.google.com/intl/itIT/apis/visualization/documentation/gallery.html
Esercizio
• Modificare i file Json degli esempi
• Creare pagine dinamiche che gestiscano le
richiese delle query fornendo il correto eco del
campo id