Google Visualization API

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

Google Visualization API