La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Google Visualization API Librerie JavaScript per la realizzazione di grafici da inserire in pagine HTML Due versoni: –Grafici interattivi realizzati con.

Presentazioni simili


Presentazione sul tema: "Google Visualization API Librerie JavaScript per la realizzazione di grafici da inserire in pagine HTML Due versoni: –Grafici interattivi realizzati con."— 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

4 Importazione delle librerie Le librerie sono importate come un qualunque altro file script esterno: 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) google.load( 'visualization', '1', {'packages': ["annotatedtimeline", "gauge"]} );

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('http://localhost/gauges.json'); 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: –http://code.google.com/intl/it- IT/apis/visualization/documentation/gallery.htmlhttp://code.google.com/intl/it- 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


Scaricare ppt "Google Visualization API Librerie JavaScript per la realizzazione di grafici da inserire in pagine HTML Due versoni: –Grafici interattivi realizzati con."

Presentazioni simili


Annunci Google