1 / 18

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)

berg
Download Presentation

Google Visualization API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  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('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: 47.000}]}] }

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

More Related