Google Visualization API

Presentazione sul tema: "Google Visualization API"— Transcript della presentazione:

1 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

2 Esempi di grafici

3 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

4 Importazione delle librerie
Le librerie sono importate come un qualunque altro file script esterno: <SCRIPT LANGUAGE="JavaScript" SRC=" </SCRIPT> Viene creato l’oggetto “google” che espone ilmetodo “load” per il caricamento dinamico dei pacchetti

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

6 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

7 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

8 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);

9 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

10 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

11 Creazione Query e recupero dati
query = new google.visualization.Query(' query.send(handleQueryResponse); function handleQueryResponse(response) { if (response.isError()) { alert('Error in query } var data = response.getDataTable(); … /* creazione grafico */ }

12 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

13 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: }]}] }

14 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:{… } })

15 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

16 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]}

17 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: IT/apis/visualization/documentation/gallery.html

18 Esercizio Modificare i file Json degli esempi
Creare pagine dinamiche che gestiscano le richiese delle query fornendo il correto eco del campo id