Grafieken maken met JavaScript ChartJS en Fetch

Grafieken maken met JavaScript ChartJS en Fetch

Leerdoel

Aan het einde van de les kun je data gebruiken met fetch om grafieken te maken met JavaScript ChartJS.

Wat weet je al over het maken van grafieken in JavaScript?

Inleiding tot ChartJS

ChartJS is een JavaScript-bibliotheek waarmee je interactieve en mooie grafieken kunt maken in webapplicaties.

Installatie van ChartJS

Om ChartJS te gebruiken, kun je de bibliotheek downloaden van de officiële website of gebruik maken van een package manager zoals npm.

Data ophalen met Fetch

Met de Fetch API kun je data ophalen van een server, wat handig is voor het vullen van grafieken met dynamische data.

Data verwerken

Na het ophalen van data met Fetch, moet deze worden verwerkt en omgezet naar het juiste formaat voor ChartJS.

Grafiek maken met ChartJS

Met de opgehaalde en verwerkte data kun je nu grafieken maken met behulp van de functies en opties van ChartJS.

Interactieve grafieken

ChartJS biedt mogelijkheden voor interactieve grafieken, zoals tooltips en animaties, om de gebruikerservaring te verbeteren.

Praktijkopdracht

Geef de studenten een praktijkopdracht waarbij ze data ophalen met Fetch en deze in een grafiek weergeven met ChartJS.

Schrijf 3 dingen op die je deze les hebt geleerd.

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.

Schrijf 2 dingen op waarover je meer wilt weten.

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.