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 Uno statement puo’ occupare piu’ righe

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/it- IT/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