Met Google-documenten die aan populariteit winnen, wordt verwacht dat er in de nabije toekomst een grote vraag zal zijn naar aansluiting op externe systemen voor verschillende doeleinden zoals gegevensuitwisseling, gegevensvisualisatie, enz. In dit artikel zal ik u laten zien hoe u verbinding kunt maken Flash-gebaseerde grafieken (FusionCharts) naar Google Spreadsheets en livegegevens plotten met JavaScript.
Voordat ik inga op de technische details die betrokken zijn bij het ophalen van gegevens uit Google-spreadsheets, zal ik een overzicht geven van FusionCharts en mijn uitleg beginnen vanaf rootniveau - dit komt ten goede aan degenen die voor de eerste keer FusionCharts zijn tegengekomen. Een versie zonder beperking van FusionCharts kan worden gedownload van www.fusioncharts.com/download. FusionCharts heeft ook een volledig gratis versie op www.fusioncharts.com/free; maar dit artikel gebruikt veel functies van FusionCharts v3, dus het wordt aanbevolen om FusionCharts v3 te downloaden.
Alle code die aan dit artikel is gekoppeld (en ook nog enkele voorbeelden) is bij dit artikel als download aanwezig.
FusionCharts is een oplossing voor het in kaart brengen van grafieken waarmee u geanimeerde en interactieve grafieken voor webpagina's kunt maken. FusionCharts is in wezen een verzameling SWF-bestanden die in Adobe Flash Player worden uitgevoerd en gegevens- en configuratie-instellingen in XML accepteren, waardoor het cross-script en platformonafhankelijk wordt. De XML is intuïtief en kan gemakkelijk worden geleerd met behulp van een uitgebreide online documentatie, die kan worden geraadpleegd op www.fusioncharts.com/docs.
Bovendien, als je geen die-hard fan van XML bent, komt FusionCharts met een uitgebreid scala aan API's, die helpen bij de implementatie ervan met alle vormen van web programmeertechnologieën zoals ASP, ASP.NET, PHP, Ruby on Rails, Python enz.
FusionCharts SWF's kunnen worden ingesloten in een HTML-pagina met behulp van de
Laten we snel een diagram maken om de gegevens weer te geven die in de onderstaande tabel worden weergegeven.
toestel | Eenheden in Watt |
Verlichting | 1200 |
verwarmer | 1800 |
Desktop | 1500 |
Cooler | 1200 |
Lift | 1500 |
Magnetron | 1600 |
Televisie | 1500 |
Wasmachine | 2800 |
Muziek systeem | 2200 |
schoonmaaksters | 600 |
Het volgende stuk code vormt de XML-gegevensbron met betrekking tot de gegevenstabel hierboven:
Heel eenvoudig en intuïtief - is het niet? De
Nu de XML gereed is (we hebben deze opgeslagen als myXML.xml), moeten we de grafiek insluiten in een HTML-pagina met behulp van de volgende code:
Mijn diagram DIV
De code (hierboven) maakt een DIV met de naam firstChartDiv, die als een container voor de grafiek zal dienen. Vervolgens wordt een exemplaar van het FusionCharts-object gemaakt met JavaScript en worden de volgende parameters doorgegeven.
De volgende regel code geeft de naam van het externe XML-gegevensbronbestand (in dit geval myXML.xml). En de laatste regel van de JavaScript-code geeft de naam van de container DIV aan waarin de grafiek wordt weergegeven. Bij gebruik van de JavaScript-klasse voor het insluiten van het diagram, is het nodig om een containerdiv te maken voor het diagram.
Het volgende diagram wordt gegenereerd door de code. De onderstaande afbeelding toont een statische versie; de eigenlijke grafiek is geanimeerd en maakt interactiviteit mogelijk, zoals het snijden van taarten, rotatie van de grafiek, tool-tips enz.
Nu hebben we het proces van het maken van diagrammen met behulp van statische gegevensbronnen besproken. Laten we verder gaan met het proces van het renderen van een diagram met behulp van gegevens die zijn verkregen uit de Google-spreadsheet.
Google Documenten-spreadsheets verzenden gegevens in de vorm van JSON-feeds. Voor het weergeven van diagrammen met gegevens die zijn verkregen uit Google-spreadsheets, is het dus belangrijk om de verkregen JSON-feeds om te zetten in XML-indeling zoals vereist door FusionCharts.
Er zijn meerdere manieren om JSON naar XML te converteren. Ofwel, u kunt uw eigen code schrijven om elk JSON-element te nemen en naar XML te converteren. Of u kunt gebruikmaken van op regels gebaseerde engines zoals JsonT om dit proces te ondersteunen. We zullen JsonT gebruiken voor dit artikel, omdat het ons helpt dingen gemakkelijker en sneller te doen. JsonT kan worden gedownload van http://goessner.net/articles/jsont/
Met JsonT kan eenvoudig een regel worden gedefinieerd om JSON-gegevens om te zetten in een reeks met het gewenste formaat. Hierna volgt een voorbeeld van JSON-gegevens:
var coffeeSalesJSON = "Espresso": "5000", "Cappuccino": "6000", "Latte": "7000", "affogato": "4000", "Cortado": "2000", "Macchiato": "3000 "," Frappuccino ":" 6000 ";
De volgende code converteert de JSON-gegevens (die worden weergegeven) in FusionCharts XML-indeling en maakt er vervolgens een grafiek van.
var JSONParseRules = "self": "\ n @getData (#) "," getData ": functie (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");
Om de code te laten werken, is het essentieel om jsont.js JavaScript-bestand te koppelen aan de HTML-pagina.
De code (hierboven) bouwt XMLstring uit JSON-gegevens met behulp van een regel, die door elke sleutel / waarde-paren JSON-gegevens heengaat en sleutelnamen behandelt als categorieën en waarden als gegevenswaarden voor het diagram. U kunt meer lezen over JsonT-regels op http://goessner.net/articles/jsont/. Vervolgens gebruiken we die XML en bouwen we de grafiek.
Als u een Google-spreadsheet als dynamische gegevensbron voor het diagram wilt gebruiken, is het van essentieel belang dat u dit publiceert voor openbare weergave. Op het moment dat het document wordt gepubliceerd voor openbare weergave, genereert Google een unieke sleutel. Deze sleutel wordt gebruikt voor het aanvragen van datafeeds van Google; daarom is het belangrijk om de sleutel te behouden.
Houd er rekening mee dat het essentieel is om josnt.js enigszins aan te passen om met de JSON-feeds van Google te kunnen werken. Ik heb kleine wijzigingen aangebracht in jsont.js om te voorkomen dat het conflict ontstaat door het gebruik van $ als een objectwijzer door Jsont.js en Google genereerde $ gebruik van $ als eigenschapnaam door JSON-feed. Ik heb Jsont.js zo aangepast dat # als een objectwijzer wordt gebruikt.
Voor dit voorbeeld heb ik een Google-spreadsheet gemaakt met drie werkbladen, die elk jaargegevens bevatten voor de jaren 2006, 2007 en 2008. De spreadsheet kan worden bekeken via de volgende link http://docs.google.com.
Het proces voor het maken van een Google-spreadsheet
Met de volgende code kunt u een grafiek weergeven die is geplot met behulp van gegevens uit de Google-spreadsheet:
Kaart wordt hier geladen
Hier is hoe de code werkt:
Het programma wordt gestart door een variabele met de naam 'bladen' te declareren voor het opslaan van de array met spreadsheetdefinities die zijn verkregen uit het opgegeven Google-spreadsheet. Vervolgens wordt de tellervariabele 'sheetCount' aangegeven, die het aantal spreadsheets bijhoudt waaruit de gegevens zijn ontvangen. Deze teller zorgt ervoor dat het diagram wordt weergegeven zodra alle gegevens zijn ontvangen.
Vervolgens wordt verklaard dat het 'chartConfigJSON'-object de diagramconfiguratie-instellingen opslaat.
De XML die geleidelijk wordt gebouwd, wordt opgeslagen in een array met de naam 'strXML'. Wanneer het XML-bouwproces uiteindelijk is voltooid, worden de elementen van de array samengevoegd om de XML-tekenreeks te vormen.
Verderop wordt de initpage () -functie die in de hoofdtekst van de HTML is geplaatst, opgeroepen wanneer de onload-gebeurtenis plaatsvindt. Deze functie roept op zijn beurt de getGoogleSpreadsheetData () aan die verzoeken voor de spreadsheetgegevens in de vorm van JSON-feeds. De getGoogleSpreadsheetData () functieaanvragen voor de spreadsheetgegevens door de door Google gegenereerde spreadsheetsleutel te verzenden, deze specificeert ook het feedformaat en verwerkt de feed zodra deze is ontvangen.
getGoogleSpreadsheetData ("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "spreadsheets")
getGoogleSpreadsheetData (werkbladen [i] .link [0] .href, "parsespreadsheet", "json-in-script");
Het link [0] .href-element bevat de URL voor beschikbare feedtypen die aan de functie wordt doorgegeven. Nadat de feed is ontvangen, wordt het parsprefilesheet callback-functie aangeroepen en worden JSON-gegevens aan de feed doorgegeven.
var seriesName = gjson.feed.title. $ t;
rule = "self": "# "," zelf [*] ":""; strXML [1] = jsonT (feedEntries, regel);
rule = "self": "# "," zelf [*] ":""; strXML [2] + = jsonT (feedAanvullingen, regel);
Wanneer deze code wordt uitgevoerd, wordt het volgende diagram gegenereerd op uw pagina.
Het diagram met meerdere reeksen gemaakt met behulp van gegevens die zijn verkregen uit het Google-spreadsheetdocument
Nu we een diagram hebben gegenereerd, gaan we een stap verder en voegen we de mogelijkheid toe om het als afbeeldingen of PDF's te exporteren. Dit is erg handig om naar uw collega's te e-mailen.
De nieuwste versie van FusionCharts (v3.1) biedt een uitgebreid scala aan exportfuncties. U kunt de diagrammen exporteren als PDF's, PNG's of JPEG's - zowel aan de clientzijde als ook opslaan op de server.
In ons voorbeeld houden we, omdat we geen scripts op de server gebruiken, vast aan client-side-export. Aan de kant van de klant wordt de exportfunctie geïmplementeerd met behulp van FusionCharts Client-side exportcomponenten - verzamelnaam gegeven aan FusionChartsExportComponent.js en FCExporter.swf. FCExporter.swf is de exportengine aan de clientzijde waarmee grafieken kunnen worden geëxporteerd. Het JavaScript-bestand biedt een interface tussen het diagram en de FCExporter.swf.
Deze JavaScript-klasse vergemakkelijkt de weergave van de FCExporter.swf, de engine voor export en dient ook als een grafische gebruikersinterface. Met behulp van export-API's kunt u het uiterlijk van de GUI eenvoudig aanpassen. Met de API's kunt u ook de functionele aspecten van de GUI beheren. De volgende code illustreert het proces:
functie loadExportComponent () // initialize FusionCharts Export Component // zet alle instellingen in parameters exportComponent = new FusionChartsExportObject ('exportComponentH', 'FCExporter.swf', width: '250', height: '250', fullMode: 1, saveMode: 'both', defaultExportFormat: "pdf", showAllowedTypes: 1, saveAllTitle: 'Save All', btnSaveAllTitle: 'As Single File', defaultExportFileName: "SalesReport", exportFormat: "PDF", exportHandler: "exportComponentH" , exportAtClient: 1); exportComponent.Render (componentContainer);
De code (hierboven) configureert de export-GUI zodat deze een knop toont die het exportproces activeert. Bovendien zou elke grafiek in het GUI-paneel worden weergegeven en zou de gebruiker een optie krijgen om alle grafieken in één PDF-bestand te exporteren. Met de GUI kan de gebruiker ook het standaard exportformaat wijzigen van PDF naar jpeg of png.
Om het exportproces te demonstreren, heb ik de code voor het configureren van de export-GUI toegevoegd aan de code waarmee een diagram wordt gemaakt op basis van gegevens die zijn afgeleid van een Google-spreadsheet-document. Ik heb echter enkele wijzigingen in de code aangebracht, zodat deze nu drie diagrammen met één reeks weergeeft in plaats van één diagram met meerdere reeksen. Elke grafiek geeft gegevens weer die betrekking hebben op een bepaalde spreadsheet.
Hierna volgt de gecombineerde code:
Hierna volgt de weergave van het exportproces van de kant van de klant:
En daarmee beëindigen we dit artikel. Er zijn veel meer functies aangeboden door FusionCharts die mogelijk in gebruik kunnen worden genomen. Diagrammen maken op basis van gegevens die zijn opgeslagen in Google-spreadsheets, is slechts een voorbeeld van innovaties die mogelijk zijn met FusionCharts. Bedankt voor het lezen!