Share
Având în vedere că Google Docs câștigă popularitate, se anticipează că în viitorul apropiat va exista o mare cerere de conectare la sisteme externe în diverse scopuri, cum ar fi schimbul de date, vizualizarea datelor etc. În acest articol vă voi arăta cum să vă conectați Graficele bazate pe Flash (FusionCharts) la foile de calcul Google și complotarea datelor live utilizând JavaScript.
Înainte de a mă implica în tehnicile implicate în preluarea datelor din foi de calcul Google, voi oferi o imagine de ansamblu asupra FusionCharts și voi începe explicația mea de la nivelul rădăcinilor - aceasta este în folosul celor care au întâlnit prima dată FusionCharts. O versiune fără restricții a FusionCharts poate fi descărcată de la www.fusioncharts.com/download. FusionCharts are, de asemenea, o versiune complet gratuită la www.fusioncharts.com/free; dar acest articol utilizează o mulțime de caracteristici din FusionCharts v3, deci este recomandat să descărcați FusionCharts v3.
Tot codul asociat acestui articol (și mai multe exemple de asemenea) sunt prezente ca descărcare cu acest articol.
FusionCharts este o soluție Flash Charting care vă ajută să creați diagrame animate și interactive pentru paginile web. FusionCharts este, în esență, o colecție de fișiere SWF care rulează în interiorul Adobe Flash player și acceptă setările de date și de configurare în XML, făcându-l astfel încrucișat și cross-platform compatibil. XML este intuitiv și poate fi învățat cu ușurință cu ajutorul unei documentații online exhaustive, care poate fi accesată de la www.fusioncharts.com/docs.
În plus, dacă nu sunteți un fan al lui XML, FusionCharts vine cu o gamă largă de aplicații API, care contribuie la implementarea sa cu toate formele de tehnologii de programare web, cum ar fi ASP, ASP.NET, PHP, Ruby on Rails, Python etc.
FusionCharts SWF-urile pot fi încorporate într-o pagină HTML fie folosind
Să construim rapid o diagramă care să descrie datele prezentate în tabelul de mai jos.
| Aparat | Unități în Watt |
| Iluminat | 1200 |
| Încălzitor | 1800 |
| Spațiul de lucru | 1500 |
| răcitor | 1200 |
| Lift | 1500 |
| Cuptor cu microunde | 1600 |
| Televiziune | 1500 |
| Mașină de spălat | 2800 |
| Sistem muzical | 2200 |
| Cleaners | 600 |
Următoarea piesă de cod este sursa de date XML care se referă la tabelul de date de mai sus:
Destul de simplu și intuitiv - nu-i așa?
Acum că XML este gata (am salvat-o ca myXML.xml), trebuie să încorporăm diagrama într-o pagină HTML cu ajutorul următorului cod:
Diagrama mea DIV
Codul (de mai sus) creează un DIV numit firstChartDiv care va servi drept container pentru diagramă. În continuare, o instanță a obiectului FusionCharts este creată utilizând JavaScript, iar parametrii următori sunt transferați în el.
Linia ulterioară de cod furnizează numele fișierului sursă externă de date XML (în acest caz, myXML.xml). Și linia finală a codului JavaScript indică numele containerului DIV în care graficul va fi afișat. În timp ce folosiți clasa JavaScript pentru a încorpora graficul, este necesar să creați un container DIV pentru diagramă.
Următoarea diagramă este generată de cod. Imaginea de mai jos prezintă o versiune statică; diagrama actuală este animată și permite interactivitatea cum ar fi felierea plăcilor, rotația diagramei, sfaturi pentru scule etc..
Acum, că am acoperit procesul de creare a diagramelor utilizând o sursă de date statice, să trecem la procesul de redare a unei diagrame folosind datele obținute din foaia de calcul Google.
Foile de calcul Google Docs transferă date sub formă de fluxuri JSON. De aceea, pentru a face diagrame folosind datele obținute din foaia de calcul Google, este important să convertiți feedurile JSON achiziționate în format XML, așa cum este cerut de FusionCharts.
Există mai multe modalități de a converti JSON în XML. Fie ai putea scrie propriul cod pentru a lua fiecare element JSON și pentru a converti în XML. Sau puteți utiliza motoare bazate pe reguli, cum ar fi JsonT, pentru a vă ajuta în acest proces. Vom folosi JsonT pentru acest articol, deoarece ne ajută să facem lucrurile mai ușor și mai rapid. JsonT poate fi descărcat de la http://goessner.net/articles/jsont/
Folosind JsonT se poate defini cu ușurință o regulă pentru a converti datele JSON într-un șir de format dorit. Urmează un exemplu de date JSON:
vară de cafeaSalesJSON = "Espresso": "5000", "Cappuccino": "6000", "Latte": "7000", "affogato": "4000", "Cortedo" "," Frappuccino ":" 6000 ";
Următorul cod convertește datele JSON (afișate abve) în formatul FusionCharts XML și apoi creează o diagramă din acesta.
var JSONParseRules = "auto": "\ n @getData (#) "," getData ": funcția (x) var c =" "; pentru (var i în x) c + =" \ n"var caChartStrXML = jsonT (coffeeSalesJSON, JSONParseRules); var coffeeChart = noul FusionCharts (" Column3D.swf "," CoffeeChartId "," 600 "," 350 "," 0 "," 0 "); coffeeChart.setDataXML (coffeeChartStrXML); cafeChart.render ("coffeeChartDiv");
Pentru ca codul să funcționeze, este esențial să conectați fișierul JavaScript jsont.js la pagina HTML.
Codul (de mai sus) construiește XMLstring din datele JSON cu ajutorul unei reguli care iterează prin fiecare pereche cheie de date JSON și tratează numele cheilor ca categorii și valori ca valori de date pentru diagramă. Puteți citi mai multe despre regulile JsonT la http://goessner.net/articles/jsont/. Apoi, vom folosi acel XML și vom construi graficul.
Pentru a utiliza o foaie de calcul Google ca sursă de date dinamică pentru grafic, este esențial să o publicați pentru vizionarea publică. La momentul publicării documentului pentru vizionarea publică - Google generează o cheie unică. Această cheie este utilizată pentru solicitarea feedurilor de date de la Google; prin urmare, este important să păstrați cheia.
Rețineți că, pentru a lucra cu feedurile Google JSON, este esențial să modificați ușor josnt.js ușor. Am făcut modificări minore la jsont.js pentru a preveni conflictul care apare din cauza faptului că Jsont.js folosește $ ca indicator de obiect și că Google a generat feedul JSON de $ $ ca nume de proprietate. Am modificat Jsont.js astfel încât să folosească # ca indicator de obiect.
Pentru acest exemplu demonstrativ am creat o foaie de calcul Google, care a inclus trei foi - fiecare conținând date anuale de vânzări pentru anii 2006, 2007 și 2008. Foaia de calcul poate fi vizualizată prin următorul link http://docs.google.com.
Procesul de creare a unei foi de calcul Google
Următorul cod vă va ajuta să redați o diagramă care este reprezentată grafic folosind datele extrase din foaia de calcul Google:
Graficul se va încărca aici
Iată cum funcționează codul:
Programul se inițiază declarând o variabilă numită "foi" pentru stocarea matricei de definiții de foi de calcul obținute în foaia de calcul Google specificată. Apoi declară variabila "sheetCount", care ține evidența numărului de foi de calcul din care au fost primite datele. Acest contor asigură faptul că graficul reda, odată ce toate datele au fost primite.
În continuare, obiectul "chartConfigJSON" este declarat pentru a stoca setările de configurare a diagramei.
XML care va fi construit treptat, va fi stocat într-un tabel numit 'strXML'. Când procesul de construire XML este complet finalizat, elementele matricei vor fi unite pentru a forma șirul XML.
Deplasând-o, funcția initpage () introdusă în corpul HTML se numește atunci când are loc evenimentul onload. Această funcție, la rândul său, solicită formularului getGoogleSpreadsheetData () care cereri pentru datele din foaia de calcul sub formă de fluxuri JSON. Cererile de funcții getGoogleSpreadsheetData () pentru datele de calcul tabelar prin trimiterea cheii de calcul tabelar generate de Google, specifică și formatul feedului și gestionează feedul după ce a fost primit.
Accentsconagua
getGoogleSpreadsheetData ("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "foi de calcul") getGoogleSpreadsheetData (foi [i] .link [0] .href, "parsespreadsheet", "json-in-script");
Elementul link [0] .href conține adresa URL pentru tipurile de feeduri disponibile, care este transmisă funcției. După ce feed-ul a fost primit, se apelează funcția de apel inversă și se transmite o foaie de calcul.
var seriaName = gjson.feed.title. $ t;
regula = "auto": "# ", "de sine[*]":""; strXML [1] = jsonT (feedEntries, regulă);
