Flash-grafieken maken van Google Spreadsheets

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.

Snelle inleiding tot FusionCharts

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.

Snel voorbeeld van het maken van een diagram met FusionCharts

FusionCharts SWF's kunnen worden ingesloten in een HTML-pagina met behulp van de / tags of via de klasse FusionCharts JavaScript. Het is aan te raden de JavaScript-klasse te gebruiken voor het insluiten van de grafiek, omdat dit ervoor zorgt dat de diagrammen soepel werken in alle browsers. De XML-gegevensbron kan als een extern bestand aan de grafiek worden verstrekt of kan rechtstreeks in de HTML-pagina worden opgenomen.

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 element is het wortelelement dat de visuele en functionele configuratie van de grafiek bevat. Elk element staat voor een gegevensitem in de grafiek. Deze gegevensstructuur heeft betrekking op diagrammen met één reeks in FusionCharts, waar u alleen een gegevensset hebt. Meerdere datasets vragen om een ​​XML-indeling in meerdere series, waarvoor nog een aantal XML-elementen nodig zijn.

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.

  • Naam van het te gebruiken SWF-bestand (in dit geval Pie3d.swf)
  • Naam van de grafiek (firstChartId in dit geval)
  • Hoogte van het diagram in pixels
  • Breedte van het diagram in pixels
  • >

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.

Deze diagrammen verbinden met Google Docs-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:

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

  2. Vervolgens wordt verklaard dat het 'chartConfigJSON'-object de diagramconfiguratie-instellingen opslaat.

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

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

  5. getGoogleSpreadsheetData ("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "spreadsheets")
  6. Nadat deze feed is ontvangen, wordt een callback-functie parseSpreadsheet () geactiveerd. Deze functie haalt de naam van het spreadsheet op uit jsonsheets.feed.title. $ T en doorloopt vervolgens elk spreadsheetitem. Elke spreadsheetitem biedt feedlinks naar alle beschikbare feedtypen (spreadsheet / lijst / cel / gViz) in de link-array. Nadat u een lijst met feedtypen heeft verkregen, getGoogleSpreadsheetData () functieaanvragen voor JSON-feeds uit elk spreadsheet.
    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.

  7. Nadat de feed voor elke spreadsheet is ontvangen, wordt de bladopstelling verhoogd met 1.
  8. Feeds verkregen van elke spreadsheet worden beschouwd als een gegevensset voor de grafiek. Daarom wordt de feedtitel genomen als de reeksnaam voor elke dataset.
  9. var seriesName = gjson.feed.title. $ t;
  10. De configuratie-instellingen van het diagram worden opgeslagen in strXML [0]. Houd er rekening mee dat de functie parsespreadsheet () meerdere keren zo vaak wordt aangeroepen als het aantal spreadsheets in het Google-spreadsheet. De code bevat een voorwaarde die verdere herhaling van dit proces voorkomt.
  11. Diagramcategorieën worden gedefinieerd met behulp van de eerste spreadsheet. De lijst met categorienaam wordt opgebouwd met jsonT.
  12. rule = "self": "#"," zelf [*] ":""; strXML [1] = jsonT (feedEntries, regel);
  13. Ten slotte wordt jsonT ingeschakeld om de waarden van de gegevensreeks te vullen:
  14.  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.

PDF exporteren

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:

  • De grafieken worden weergegeven in de browser.
  • Grafieken worden geconverteerd naar bitmap wanneer op 'Exporteren als PDF' wordt geklikt.
  • In de export-GUI wordt een lijst met grafieken weergegeven die moeten worden geëxporteerd.
  • De diagrammen worden opgeslagen in één PDF-bestand wanneer de gebruiker op de knop 'Als enkele PDF' klikt.
  • 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!

  • Volg ons op Twitter, of abonneer je op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.