Share
Med Google Docs blir populær, forventes det at det i nær fremtid vil være en stor etterspørsel etter å koble den til eksterne systemer for ulike formål som datautveksling, datavisualisering, etc. I denne artikkelen vil jeg vise deg hvordan du kobler Flash-baserte diagrammer (FusionCharts) til Google Regneark og plott livedata ved hjelp av JavaScript.
Før jeg drar inn i de tekniske egenskapene som er involvert i å hente data fra Google regneark, vil jeg gi en oversikt over FusionCharts og begynne min forklaring fra rotnivå - dette er til fordel for de som har kommet over FusionCharts for første gang. En no-restriction versjon av FusionCharts kan lastes ned fra www.fusioncharts.com/download. FusionCharts har også en helt gratis versjon på www.fusioncharts.com/free; men denne artikkelen bruker mange funksjoner fra FusionCharts v3, så det anbefales å laste ned FusionCharts v3.
Alle koden knyttet til denne artikkelen (og noen flere eksempler også) er til stede som en nedlasting med denne artikkelen.
FusionCharts er en Flash-kartløsning som hjelper deg med å lage animerte og interaktive diagrammer for websider. FusionCharts er egentlig en samling av SWF-filer som kjører inne i Adobe Flash Player, og aksepterer data og konfigurasjonsinnstillinger i XML, og dermed gjør det kryssskript og kryssplattformskompatibelt. XML er intuitivt og det kan lett læres ved hjelp av en uttømmende dokumentasjon på nettet, som kan nås fra www.fusioncharts.com/docs.
I tillegg, hvis du ikke er en dør-hard fan av XML, kommer FusionCharts med et omfattende utvalg av API, som hjelper til med implementeringen med alle former for webprogrammeringsteknologier som ASP, ASP.NET, PHP, Ruby on Rails, Python osv.
FusionCharts SWFs kan være innebygd i en HTML-side, enten ved hjelp av
La oss raskt bygge et diagram for å skildre dataene som vises i tabellen nedenfor.
| Appliance | Enheter i Watt |
| Lighting | 1200 |
| Varmeapparat | 1800 |
| Desktop | 1500 |
| Cooler | 1200 |
| Heis | 1500 |
| Mikrobølgeovn | 1600 |
| Fjernsyn | 1500 |
| Vaskemaskin | 2800 |
| Musikksystem | 2200 |
| rengjøringsmidler | 600 |
Følgende stykke kode utgjør XML-datakilden som gjelder data tabellen ovenfor:
Ganske enkelt og intuitivt - er det ikke? De
Nå som XML er klar (vi har lagret det som myXML.xml), må vi legge inn diagrammet til en HTML-side ved hjelp av følgende kode:
Min Diagram DIV
Koden (over) oppretter en DIV kalt firstChartDiv som vil fungere som en beholder for diagrammet. Fremover blir en forekomst av FusionCharts-objektet opprettet ved hjelp av JavaScript, og følgende parametere blir sendt inn i den.
Den påfølgende linje med kode gir navnet på den eksterne XML-datakilden filen (myXML.xml i dette tilfellet). Og den endelige linjen til JavaScript-koden angir navnet på beholderen DIV, som diagrammet vil gjengi. Mens du bruker JavaScript-klassen for å legge inn diagrammet, er det nødvendig å opprette en container DIV for diagrammet.
Følgende diagram genereres av koden. Bildebeløpet viser en statisk versjon; selve diagrammet er animert og tillater interaktivitet som skjæring av paier, rotasjon av diagram, verktøytips osv.
Nå har vi dekket prosessen med å lage diagrammer ved hjelp av statisk datakilde, la oss gå videre til prosessen med å lage et diagram ved hjelp av data hentet fra Google regneark.
Google Dokumenter-regneark overfører data i form av JSON-feeder. Så, for å gjengi diagrammer som bruker data hentet fra Google regneark, er det viktig å konvertere de overførte JSON-feeds til XML-format som kreves av FusionCharts.
Det er flere måter å konvertere JSON til XML. Enten kan du skrive din egen kode for å ta hvert JSON-element og konvertere til XML. Eller du kan gjøre bruk av regelbaserte motorer som JsonT til hjelp i denne prosessen. Vi bruker JsonT for denne artikkelen, da det hjelper oss å gjøre ting enklere og raskere. JsonT kan lastes ned fra http://goessner.net/articles/jsont/
Ved å bruke JsonT kan man enkelt definere en regel for å konvertere JSON-data til en streng med ønsket format. Følgende er et eksempel på JSON-data:
var "kaffe": "5000", "Cappuccino": "6000", "Latte": "7000", "affogato": "4000", "Cortado": "2000", "Macchiato" "," Frappuccino ":" 6000 ";
Følgende kode konverterer JSON-dataene (vises abve) til FusionCharts XML-format og lager deretter et diagram ut av det.
var JSONParseRules = "self": "\ n @getData (#) "," getData ": funksjon (x) var c =" "; for (var jeg i 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");
For at koden skal fungere, er det viktig å koble jsont.js JavaScript-fil til HTML-siden.
Koden (ovenfor) bygger XMLstring fra JSON-data ved hjelp av en regel, som detererer gjennom hvert nøkkelverdi par av JSON-data og behandler nøkkelnavn som kategorier og verdier som dataværdier for diagrammet. Du kan lese mer om JsonT-regler på http://goessner.net/articles/jsont/. Deretter bruker vi XML og bygger diagrammet.
For å kunne bruke et Google-regneark som en dynamisk datakilde for diagrammet, er det viktig å publisere det for offentlig visning. På tidspunktet for publisering av dokumentet for offentlig visning - genererer Google en unik nøkkel. Denne nøkkelen brukes til å be om datafeed fra Google; derfor er det viktig å bevare nøkkelen.
Vær oppmerksom på at for å kunne jobbe med Googles JSON-feeder er det viktig å endre josnt.js litt. Jeg har gjort mindre endringer i jsont.js for å forhindre konflikten som oppstår på grunn av Jsont.js bruk av $ som en objektpeker og Google genererte JSON-feeds bruk av $ som eiendomsnavn. Jeg har endret Jsont.js slik at den bruker # som en objektpeker.
For dette demonstrasjonseksemplet opprettet jeg et Google-regneark, som inkluderte tre ark - hver av dem inneholdt årlige salgsdata for årene 2006, 2007 og 2008. Regnearket kan ses gjennom følgende link http://docs.google.com.
Prosessen med å lage et Google-regneark
Følgende kode vil hjelpe deg med å lage et diagram som er tegnet med data hentet fra Google regneark:
Diagram Laster opp her
Slik fungerer koden:
Programmet initieres ved å deklarere en variabel kalt 'ark' for å lagre rekkefølge av regnearkdefinisjoner oppnådd fra det angitte Google-regnearket. Det erklærer deretter 'sheetCount' -tabellvariabelen som holder styr på antall regneark hvor data er mottatt. Denne telleren sikrer at diagrammet gjøres, når alle dataene er mottatt.
Opp neste erklæres 'chartConfigJSON' -objektet å lagre diagramkonfigurasjonsinnstillingene.
XML-en som vil bli bygd opp, vil bli lagret i en serie kalt 'strXML'. Når XML-byggeprosessen er endelig fullført, vil elementene i arrayet bli slått sammen for å danne XML-strengen.
Ved å gå videre, blir initpage () -funksjonen plassert i HTML-koden, kalt når onload-hendelsen oppstår. Denne funksjonen kalles igjen for getGoogleSpreadsheetData () som ber om regnearkdata i form av JSON-feeder. GetGoogleSpreadsheetData () -funksjonen forespørsler om regnearkdataene ved å sende Google generert regnearknøkkel, den spesifiserer også feedformatet og håndterer feedet når det er mottatt.
Accentsconagua
getGoogleSpreadsheetData ("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "regneark") getGoogleSpreadsheetData (ark [i] .link [0] .href, "parsespreadsheet", "json-in-script");
Lenk [0] .href-elementet inneholder URL-adressen for tilgjengelige mattyper, som sendes til funksjonen. Etter at feedet har blitt mottatt, kalles tilbakekallingsfunksjonen samlingsarket og JSON-data sendes til den.
var seriesName = gjson.feed.title. $ t;
rule = "self": "# "," selv [*] ":""; strXML [1] = jsonT (feedEntries, rule);
