Blog

Diagram en grafiek maken in WordPress

Afbeelding Diagram en grafiek maken in WordPress

Data, diagrammen en grafieken weergeven op je WordPress site kunnen de informatie op je website op een mooie en duidelijke wijze ondersteunen of zelfs verhelderen. Ook ziet je pagina er direct een stuk frisser en professioneler uit. Maar hoe maak je zulke diagrammen en grafieken via je WordPress pagina? Met alle tips uit dit artikel weet jij straks waarom het zo belangrijk is om visuele data aan te bieden en op welke manier je dit het makkelijkste kunt doen!

Voordelen van diagrammen of grafieken in WordPress

Er zitten verschillende voordelen aan het implementeren van diagrammen of grafieken op je WordPress website. Het lijkt misschien net zo makkelijk om een grafiek in bijvoorbeeld Word of Excel op te zetten en deze als afbeelding op je website toe te voegen. In sommige gevallen kan dit inderdaad handig zijn, bijvoorbeeld wanneer een WordPress plug-in bepaalde opties niet heeft. Verder is het eigenlijk veel beter om via WordPress diagrammen en grafieken op te zetten. 

  1. Je behoudt het maken van al je grafieken op dezelfde plek. Voornamelijk wanneer je veel grafieken of diagrammen wilt maken, scheelt dit je veel tijd.
  2. Je kunt de grafieken of diagrammen snel aanpassen wanneer dit nodig is. Als je een afbeelding wilt bewerken, moet je eerst het oorspronkelijke bestand van de schermafbeelding opzoeken en dan aanpassen.
  3. WordPress diagrammen en grafieken geven je de mogelijkheid om ze interactief te maken voor bezoekers. Met schermafbeeldingen van grafieken of diagrammen is dit vanzelfsprekend niet nodig.

Over het algemeen is het werken via WordPress een stuk gemakkelijker. Daarmee bespaar het je een hoop tijd. Toch heb je toch vrijwel altijd alle functies die je nodig hebt om je diagram en grafiek zo weer te geven als je wilt.

Beste plugins voor diagrammen en grafieken

Er zijn verschillende plug-ins die je kunt gebruiken om eenvoudig diagrammen en grafieken op te zetten. We bespreken hieronder vijf verschillende opties waar je uit kunt kiezen.

wpDataTables

Hoewel de naam vrij simpel klinkt, is dit een plug-in die veel meer doet dan alleen data in tabellen weergeven. Je krijgt keuze uit veel verschillende soorten grafieken. Je data wordt snel verwerkt, ook als je grote hoeveelheden tegelijkertijd hebt. Door alle goede functies hangt er wel een prijskaartje aan deze plug-in. Voor iets meer dan 50 euro kun je de plug-in op het moment van schrijven aanschaffen. Volgens de reviews en de vele gebruikers die wpDataTables al gebruiken is dit het zeker waard: zij waarderen de plug-in met een 4.5 van de 5 sterren. Je krijgt er dan ook veel handige functies voor terug, waaronder:

  • Snelle reacties tijdens het maken en op je website
  • Verschillende manieren om je diagram of grafiek te renderen en aan te passen
  • Automatische live-updates voor tabellen en grafieken als je gebruik maakt van live data
  • De mogelijkheid om je tabellen vooraf in te zien

WordPress Charts en Graphs Lite

Deze plug-in doet fantastisch goed wat hij doen moet. Je hebt totale vrijheid om je grafieken of diagrammen zo vorm te geven als je wilt. Dit kun je doen met verschillende kleurtjes, lettertypen en opties om tekst te verbergen of toe te voegen. Dit kun je zelfs doen nadat je de grafiek of het diagram hebt gepubliceerd op je website. Via een spreadsheet kun je eenvoudig een grafiek laten maken of aanpassen. Dit gaat ook allemaal nog na de publicatie. De grafieken en diagrammen zijn vervolgens op elk soort scherm goed te zien.

Je krijgt standaard negen verschillende soorten grafieken, support voor shortcode en de optie om data te importeren via CSV. Er is zowel een gratis als een betaalde functie beschikbaar. De Lite versie is nog steeds erg krachtig, al biedt de Pro functie wel wat extra handige opties beschikbaar. Welke je neemt is dus afhankelijk van je eigen voorkeuren.

WordPress Chart

WordPress Charts wordt vaak geprezen om de simplistische maar doeltreffende ontwerpen, animaties of opties qua kleuren en aanpassingen. De plug-in is echter al een tijdje niet meer geüpdate. Je hebt de keuze om zes verschillende soorten grafieken volledig aan te passen naar jouw data en website. Dit zijn de lijngrafiek, bargrafiek, taartgrafiek, radargrafiek, polar area grafiek en de donutgrafiek.

Als je al gebruik maakt van Visual Composer, is het voor jou misschien een optie om deze uitbreiding daarop aan te schaffen. Voor iets meer dan 10 euro kun je eenvoudig grafieken en diagrammen maken via Visual Composer. Je krijgt hierbij verschillende standaard grafieken, veel opties voor het aanpassen van de grafieken, Google Fonts en oneindig veel kleuren om uit te kiezen.

UberChart

Voor deze plug-in heb je geen ander programma nodig. Je krijgt standaard 10 vooraf ingebouwde types met 240 aanpasbare opties. Exporteren en importeren van data gaat met een druk op de knop heel eenvoudig. Vanwege de hoge responsiveness kun je grafieken en diagrammen op elk scherm laten zien. Je kunt kiezen uit lijngrafieken, gebiedsgrafieken, bargrafieken, taartgrafieken, donutgrafieken en bubbelgrafieken. Via UberChart kun je gemakkelijk spreadsheets uploaden naar je WordPress pagina, zonder de uitgebreide opties van het oorspronkelijke programma zoals Excel te verliezen.

Hoe maak je een grafiek of diagram?

Hoewel we meerdere voorbeelden hebben besproken, zullen we in dit stappenplan optie 2 – dus de WordPress Charts en Graphs Lite – gebruiken. Hoewel de andere opties soortgelijke stappen hebben, zijn het ontwerp en de namen van onderdelen vaak net wat anders. Kijk vooral welke optie het beste bij jou past, maar kijk in dit stappenplan even mee via deze plugin.

Stap 1: Installeer en activeer de WordPress Charts en Graphs plug-in

Dit kun je eenvoudig doen door te zoeken naar de plug-in en vervolgens de stappen te volgen.

Stap 2: Voeg een nieuwe grafiek toe via Visualizer Library

Je vindt deze pagina door achtereenvolgend op Media en dan Visualizer Library te klikken. Je hoeft verder niets te doen. Om een nieuwe grafiek toe te voegen, klik je linksboven op Add New. Hier kun je kiezen uit alle opties die de plug-in je biedt. Kies een optie die bij jou past. Voor dit voorbeeld gaan we verder met de taartgrafiek.

Stap 3: Importeer de benodigde data 

Als je een grafiek selecteert, krijg je eerst een voorbeeld te zien met voorbeelddata. Je wilt natuurlijk je eigen data weer laten geven. Hiervoor heb je vijf verschillende opties.

  1. Via een bestand dat je kunt uploaden
  2. Via een URL
  3. Via een andere grafiek
  4. Via WordPress
  5. Handmatig

Data uploaden via een bestand wordt veruit het meest gebruikt en werkt ook echt het beste. Data uploaden via WordPress of handmatig invoeren is overigens alleen beschikbaar als je de Pro-versie van de plug-in hebt.

Als je data wilt uploaden via een bestand, klik je op Choose File om vervolgens het bestand op je computer te zoeken en te uploaden. Je krijgt dan een voorbeeldgrafiek met jouw data. Zo kun je checken of de grafiek eruit ziet zoals je wilt. Als het niet klopt, kun je het bestand aanpassen en het opnieuw proberen.

Stap 4: Pas je grafiek aan

Via Advanced onderaan de lijst met opties kun je verschillende dingen aanpassen. Aangezien je veel opties hebt en dit per soort grafiek verschilt, raden we je aan hier vooral zelf goed naar te kijken. Je hebt bijvoorbeeld opties voor de naam, kleuren, labels en lettertype.

Stap 5: Gebruik de Shortcode om de grafiek te plaatsen op je pagina

Als je grafiek klaar is zoals jij wilt, keer je terug naar de Visualizer Library. Hier vind je al je gemaakte grafieken. Zoek naar de juiste grafiek en kopieer de shortcode linksonder deze grafiek. Deze kun je vervolgens plakken in de code van je pagina.

Stap 6: Controleer je grafiek 

Voordat je de grafiek publiceert, is het verstandig deze nogmaals te controleren via de frontend. Zo krijg je te zien hoe de grafiek op de website getoond gaat worden. Als er dingen aangepast moeten worden, kun je dit nog makkelijk doen voordat je de website publiceert.

Was dit artikel nuttig?

Ja Nee

Wij helpen je snel en vakkundig!

Bekijk hier alle voordelen.

© WPOnderhoud.nl 2011 - 2021 | Alle rechten voorbehouden | WordPress Onderhoud is onderdeel van Artitex