Wordpress grafieken plugins

Grafieken met WordPress

Wanneer je met data of vragenlijsten werkt kan het zinvol zijn om resultaten weer te geven in een grafiek. Dit is goed mogelijk in WordPress. Er zijn veel verschillende mogelijkheden, afhankelijk van je data-invoer en waar je de grafiek voor gaat gebruiken.

Wat heb je nodig?

Er zijn inmiddels een heel aantal plugins voor het weergeven van grafieken. Bij het bepalen van de juiste keuze spelen een aantal vragen:

  • Wat voor soort grafiek is er nodig?
  • Wordt de data opgehaald of ingevoerd?
  • Wordt deze data nog bewerkt voordat ze weergegeven wordt?
  • Hoe complex is de grafiek?
  • Moet de grafiek geëxporteerd kunnen worden?

Libraries voor online grafieken

Een aantal plugins maken gebruik van bestaande libraries zoals Chart.js en Highcharts. Veel plugins werken met de Google Visualisatie API. Wanneer een bestaande plugin niet voldoet kun je ook een maatwerk plugin maken die rechtstreeks met deze libraries werkt. Deze oplossingen tekenen met JavaScript in real-time grafieken op het scherm. Er zijn ook oplossingen die een statische afbeelding in PNG of JPG produceren. Het nadeel hiervan is dat bij wijzigingen in je data een nieuwe afbeelding gemaakt moet worden en dat je niet door over datapunten te gaan met je muis invoerwaarden kunt weergeven en niet kunt klikken in je grafiek. Het exporteren van de grafiek gaat wel weer makkelijker als er al een afbeelding is.

De meest gangbare soorten grafieken, die door vrijwel alle plugins ondersteund worden zijn:

  • Lijngrafiek (line chart)
  • Vlakdiagram (area chart)
  • Staafdiagram (bar chart)
  • Kolomdiagram (column chart)
  • Circeldiagram (pie chart)
  • Kandelaargrafiek (candlestick chart)
  • Spreidingsdiagram (scatter chart)

 

Minder voorkomende soorten:

  • Ringdiagram (donut chart)
  • Polair diagram (polar chart)
  • Rader diagram (radar chart)
  • Geo diagram (geo chart)
  • Bubbel (bubble chart)
  • Meterdiagram (gauge chart)

Data-invoer

Voor de invoer van data zijn verschillende mogelijkheden. Er is een handige plugin die voor de invoer van data werkt met Gravity Forms. Dat maakt het eenvoudig om data online te verzamelen waarbij je met Gravity Forms eenvoudig de juiste invoervelden kunt maken. De ingevoerde data wordt opgeslagen zodat je er ook andere dingen mee kunt doen. Hier zitten wel kosten aan en het aantal beschikbare grafieken is wat beperkt. Andere plugins werken met het importeren van CSV-bestanden of het invoeren van data vanuit de WP-admin of vanuit invoervelden aan de voorkant van je website.

Zes veelgebruikte plugins voor grafieken:

  • WordPress Charts:
    Deze plugin werd veel gebruikt en heeft de keuze uit 6 soorten grafieken. Dit betreft ook grafieken die bij andere plugins niet ondersteund worden zoals polair diagram en radar diagram (ook wel spindiagram genoemd). Iedere grafiek kan makkelijk aangepast worden en levert een lichtgewicht grafiek op met fraaie grafieken wat dit tot een aantrekkelijke oplossing maakt. Grafieken kunnen ook getoond worden in een widget. De weergave blijkt echter niet vlekkeloos te werken. Blijft wat achter in ontwikkeling (is 10 maanden geleden bijgewerkt) en downloads (10.000).
  • WordPress Charts and Graphs (voorheen Visualizer):
    Gratis plus betaalde uitbreiding. Deze plugin heeft de keuze uit 9 soorten grafieken die ook helemaal aangepast kunnen worden. Kan gekoppeld worden aan een spreadsheet/csv-bestand via download of via een URL. Op deze manier kun je linken aan bijvoorbeeld een sheet op Google docs. Deze plugin heeft ook custom hooks zodat er maatwerk-aanpassingen mogelijk zijn. Nadeel is een beperking in de soorten data die verwerkt kunnen worden. Als je niet met externe- of complexe data werkt is dit een mooie oplossing. (Heeft inmiddels 20.000 downloads en wordt goed bijgehouden.)
  • Data Table Generator:
    Deze plugin is het heel uitgebreid wat data-beheer betreft. Er is een gratis en een premium versie ($29). Voor weergave van grafieken is de premium versie nodig. Deze werkt echter op dezelfde manier als bij de Visualizer plugin, dus als je geen uitgebreid data-beheer vanuit de WP-admin nodig hebt, dan is Visualizer een goedkoper alternatief. Er worden 9 soorten grafieken ondersteund. Weergave kan in tabellen en grafieken. De vormgeving en layout is aanpasbaar. Data en grafieken kunnen ge-exporteerd worden naar PDF, CSV, Print en Excel. (10.000 installaties en recente update)
  • Inline Google Spreadsheet Viewer:
    De naam is misleidend. Met deze plugin kan er niet alleen vanuit Google spreadsheets gewerkt worden maar ook vanuit andere csv-bestanden of data uit een MySQL database. Het werkt met een tabel-overzicht van de data die via een shortcode op een pagina geplaatst wordt. Keuze uit 12 soorten grafieken. Geschikt voor data uit verschillende bronnen en wanneer er meer complexe bewerkingen van de grafiek-weergave nodig is. (7.000 installs, niet heel recent bijgewerkt)
  • amCharts:
    Deze plugin valt op omdat het grafieken heeft die niet bij andere plugins voorkomen, zoals de Gantt, Funnel en  Radar- of spinweergave. Het geeft de grafieken weer met snippets code die als shortcode in een pagina geplaatst worden. Deze plugin is voor ontwikkelaars een interessante optie omdat de code rechtstreeks bewerkt kan worden wat dit tot een flexibele oplossing maakt. Hierbij is wel kennis van JavaScript vereist. Er is echter geen visuele editor wat het voor gebruikers zonder technische kennis een minder aantrekkelijk alternatief maakt. (2.000 installs, recent bijgewerkt)
  • wpDataTables:
    Deze plugin heeft een Lite versie een betaalde versie ($29) en is zeker een overweging waard vanwege de uitgebreide mogelijkheden en gebruiksvriendelijke wizards. (10.000 installs en recent bijgewerkt). Ook voor het werken met dynamische data vanuit externe bronnen een goede oplossing omdat er met JSON, MySQL en PHP-array gewerkt kan worden. Daarnaast zij er gebruiksvriendelijke mogelijkheden met een wizard voor het maken van data-tabellen via de WP-admin.
  • GFChart:
    Deze betaalde plugin is beperkt in mogelijkheden maar ideaal wanneer je voor je data-invoer Gravity Forms gebruikt. Het is een add-on op Gravity Forms. Alleen cirkeldiagram en kolomdiagram worden ondersteund. Er kan ook een teller met filteropties weergegeven worden.

Bronnen:
torquemag.io/2014/05/5-plugins-that-display-beautiful-charts-and-graphs-in-wordpress
www.elegantthemes.com/blog/resources/do-the-math-the-8-best-wordpress-chart-plugins
wplift.com/best-charts-graphs-plugins