Share
Con la popolarità di Google Documenti, si prevede che nel prossimo futuro ci sarà una grande richiesta di connessione a sistemi esterni per vari scopi come lo scambio di dati, la visualizzazione dei dati, ecc. In questo articolo, ti mostrerò come collegarti Grafici basati su Flash (FusionCharts) su fogli di lavoro Google e tracciare dati in tempo reale utilizzando JavaScript.
Prima di approfondire gli aspetti tecnici relativi al recupero dei dati dai fogli di lavoro di Google, fornirò una panoramica di FusionCharts e inizierò la mia spiegazione dal livello di root - questo è a beneficio di coloro che hanno incontrato FusionCharts per la prima volta. Una versione senza restrizioni di FusionCharts può essere scaricata da www.fusioncharts.com/download. FusionCharts ha anche una versione totalmente gratuita su www.fusioncharts.com/free; ma questo articolo utilizza molte funzionalità di FusionCharts v3, quindi si consiglia di scaricare FusionCharts v3.
Tutto il codice associato a questo articolo (e alcuni altri esempi) sono presenti come download con questo articolo.
FusionCharts è una soluzione di creazione di grafici Flash che ti aiuta a creare grafici animati e interattivi per pagine web. FusionCharts è essenzialmente una raccolta di file SWF che gira all'interno di Adobe Flash Player e accetta i dati e le impostazioni di configurazione in XML, rendendolo in tal modo cross-script e multipiattaforma compatibile. L'XML è intuitivo e può essere facilmente appreso con l'aiuto di una esauriente documentazione online, accessibile da www.fusioncharts.com/docs.
Inoltre, se non sei un fan sfegatato di XML, FusionCharts viene fornito con una vasta gamma di API, che aiutano nella sua implementazione con tutte le forme di tecnologie di programmazione web come ASP, ASP.NET, PHP, Ruby on Rails, Python ecc.
Gli SWF di FusionCharts possono essere incorporati in una pagina HTML usando il
Facciamo rapidamente un grafico per rappresentare i dati mostrati nella tabella sottostante.
| Apparecchio | Unità in Watt |
| Illuminazione | 1200 |
| Riscaldatore | 1800 |
| Desktop | 1500 |
| Più fresco | 1200 |
| Ascensore | 1500 |
| Forno a microonde | 1600 |
| Televisione | 1500 |
| Lavatrice | 2800 |
| Sistema musicale | 2200 |
| detergenti | 600 |
Il seguente pezzo di codice costituisce l'origine dati XML pertinente alla tabella di dati sopra riportata:
Abbastanza semplice e intuitivo - non è vero? Il
Ora che l'XML è pronto (l'abbiamo salvato come myXML.xml), abbiamo bisogno di incorporare il grafico in una pagina HTML con l'aiuto del seguente codice:
Mio grafico DIV
Il codice (sopra) crea un DIV denominato firstChartDiv che funge da contenitore per il grafico. In seguito, un'istanza dell'oggetto FusionCharts viene creata utilizzando JavaScript e vengono passati i seguenti parametri.
La riga di codice successiva fornisce il nome del file di origine dati XML esterno (myXML.xml in questo caso). E la riga finale del codice JavaScript indica il nome del contenitore DIV in cui il grafico verrà visualizzato. Mentre si utilizza la classe JavaScript per incorporare il grafico, è necessario creare un DIV contenitore per il grafico.
Il seguente grafico è generato dal codice. L'immagine mostra una versione statica; il grafico reale è animato e consente l'interattività come affettare le torte, la rotazione del grafico, i suggerimenti degli strumenti ecc.
Ora che abbiamo coperto il processo di creazione di grafici utilizzando l'origine dati statica, passiamo al processo di rendering di un grafico utilizzando i dati ottenuti dal foglio di lavoro Google.
I fogli di lavoro di Google Documenti trasferiscono i dati sotto forma di feed JSON. Quindi, per rendere grafici usando i dati ottenuti dal foglio di calcolo Google, è importante convertire i feed JSON acquisiti in formato XML come richiesto da FusionCharts.
Esistono diversi modi per convertire JSON in XML. In alternativa, puoi scrivere il tuo codice per prendere ogni elemento JSON e convertirlo in XML. Oppure, potresti avvalerti di motori basati su regole come JsonT per aiutare in questo processo. Useremo JsonT per questo articolo, in quanto ci aiuta a fare le cose più facilmente e più velocemente. JsonT può essere scaricato da http://goessner.net/articles/jsont/
Usando JsonT si può facilmente definire una regola per convertire i dati JSON in una stringa di formato desiderato. Di seguito è riportato un esempio di dati JSON:
var coffeeSalesJSON = "Espresso": "5000", "Cappuccino": "6000", "Latte": "7000", "affogato": "4000", "Cortado": "2000", "Macchiato": "3000 "," Frappuccino ":" 6000 ";
Il codice seguente converte i dati JSON (visualizzati abve) nel formato XML di FusionCharts e quindi ne crea uno.
var JSONParseRules = "self": "\ n @getData (#) "," getData ": function (x) var c =" "; for (var i in x) c + =" \ n"; return c; var coffeeChartStrXML = jsonT (coffeeSalesJSON, JSONParseRules); var coffeeChart = new FusionCharts (" Column3D.swf "," CoffeeChartId "," 600 "," 350 "," 0 "," 0 "); coffeeChart.setDataXML (coffeeChartStrXML); coffeeChart.render ("coffeeChartDiv");
Perché il codice funzioni, è essenziale collegare il file JavaScript jsont.js alla pagina HTML.
Il codice (sopra) crea XMLstring dai dati JSON con l'aiuto di una regola, che scorre attraverso ciascuna coppia chiave-valore di dati JSON e tratta i nomi delle chiavi come categorie e valori come valori di dati per il grafico. Puoi leggere di più sulle regole di JsonT su http://goessner.net/articles/jsont/. Successivamente, usiamo quell'XML e costruiamo il grafico.
Per poter utilizzare un foglio di lavoro Google come origine dati dinamica per il grafico, è essenziale pubblicarlo per la visualizzazione pubblica. Al momento della pubblicazione del documento per la visualizzazione pubblica, Google genera una chiave univoca. Questa chiave viene utilizzata per richiedere i feed di dati da Google; quindi è importante conservare la chiave.
Tieni presente che, per lavorare con i feed JSON di Google, è essenziale modificare leggermente josnt.js. Ho apportato piccole modifiche a jsont.js per prevenire il conflitto che si verifica a causa dell'uso di $ come puntatore a oggetti da parte di Jsont.js e l'utilizzo del nome di proprietà $ come feed da parte di Google. Ho modificato Jsont.js in modo che utilizzi # come puntatore a un oggetto.
Per questo esempio dimostrativo ho creato un foglio di lavoro Google, che includeva tre fogli, ciascuno dei quali conteneva dati di vendita annuali per gli anni 2006, 2007 e 2008. Il foglio di calcolo può essere visualizzato tramite il seguente link http://docs.google.com.
Il processo di creazione di un foglio di lavoro Google
Il seguente codice ti aiuterà a eseguire il rendering di un grafico che viene tracciato utilizzando i dati estratti dal foglio di lavoro Google:
Il grafico verrà caricato qui
Ecco come funziona il codice:
Il programma inizia dichiarando una variabile denominata "fogli" per l'archiviazione della matrice di definizioni del foglio di calcolo ottenuta dal foglio di calcolo Google specificato. Quindi dichiara la variabile contatore 'sheetCount' che tiene traccia del numero di fogli di calcolo da cui sono stati ricevuti i dati. Questo contatore assicura che il grafico renda, una volta che tutti i dati sono stati ricevuti.
In seguito, l'oggetto 'chartConfigJSON' viene dichiarato per memorizzare le impostazioni di configurazione del grafico.
L'XML che verrebbe gradualmente creato verrà archiviato in una matrice denominata "strXML". Quando il processo di costruzione XML è finalmente completato, gli elementi dell'array verranno uniti per formare la stringa XML.
Andando avanti, la funzione initpage () posta nel corpo dell'HTML viene chiamata quando si verifica l'evento onload. Questa funzione a sua volta chiama getGoogleSpreadsheetData () che richiede i dati del foglio di calcolo sotto forma di feed JSON. La funzione getGoogleSpreadsheetData () richiede i dati del foglio di calcolo inviando la chiave del foglio di calcolo generato da Google, specifica anche il formato del feed e gestisce il feed una volta ricevuto.
Accentsconagua
getGoogleSpreadsheetData ("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "fogli di calcolo") getGoogleSpreadsheetData (fogli [i] .link [0] .href, "parsespreadsheet", "json-in-script");
L'elemento link [0] .href contiene l'URL per i tipi di feed disponibili, che viene passato alla funzione. Dopo che il feed è stato ricevuto, viene richiamato il parsespreadsheet della funzione callback e i dati JSON vengono passati ad esso.
var seriesName = gjson.feed.title. $ t;
rule = "self": "# ", "se stesso[*]":""; strXML [1] = jsonT (feedEntries, regola);
