Hoe maak je een grafiek?

Als je inzicht wilt geven in de data die het dagboek genereert (voor zowel cliënt als hulpverlener), dan is het een goed idee om dit inzicht zichtbaar te maken in een grafiek. 

Als interventieontwikkelaar is het belangrijk om goed na te denken over de variabelen die je wilt laten zien in de grafiek, en wat de beste visuele output is. Voor nu zijn er 3 types grafieken mogelijk. Je kunt kiezen tussen: 

• Lijngrafiek
• Staafdiagram 
• Spreidingsgrafiek

Maak een dagboek in 3 stappen

Een grafiek heeft altijd codebewerking nodig.

Om een grafiek voor jouw dagboek te creëren, moet je de basis van javascript codebewerking kennen. Vanwege deze reden kan javascript code alleen bewerkt worden als je de rol ‘programmeur’ in het CMS hebt. Je kan deze functie verkrijgen door een geavanceerde CMS training te volgen die door Minddistrict wordt gegeven. Vanzelfsprekend kunnen wij ook javascript bewerking voor je doen als je niet de ambitie hebt om dit te leren. Benader in beide gevallen jouw accountmanager.

Stap 1: ontwerp de grafiek

Voordat je begint met het maken van jouw grafieken in het CMS, is het belangrijk dat je nadenkt over hoe je de grafiek eruit wilt laten zien. Van welke data van het dagboek is het logisch om visuele output te zien? Wat geeft betekenis aan jouw dagboek? Zijn er 1 of meerdere data-items die je wilt laten zien in een grafiek? Bedenk ook dat de cliënt het dagboek invult. Is dit vaker dan eens per dag, dan kun je, bijvoorbeeld, erover denken om alle invoeren van die dag te verzamelen in één datapunt in de grafiek of niet. 

Let op: een grafiek kan alleen gedefinieerd worden voor vraagvelden van het type ‘choice’, ‘integer’ of ‘float’.

Stap 2: typ de standaard code van grafieken in de ruwe code

Klik op ‘Schema’ om het dagboek te openen. Klik vervolgens op ‘Broncode aanpassen’.

Hier zie je de javascript code van jouw dagboek. Het begint met {"fields" etc. Plaats de cursor aan de top van het veld. Druk meerdere keren op ‘enter’ om lege ruimte te creëren. Kopieer de code zorgvuldig – zoals in de afbeelding hieronder staat – in jouw veld.

Wanneer je werkt met coderen, komt het allemaal aan op nauwkeurigheid. Als de grafiek niet werkt, check dan altijd of je ergens een komma, spatie of aanhalingsteken bent vergeten.

Stap 3: vervang de groene tekst

Vervang de groene stukken tekst zodat deze bij jouw dagboek past.

• Titel: Ook al is dit niet het eerste item waar je langs komt, het is wel de makkelijkste. Dus een goede om mee te beginnen. Wat voor titel van je grafiek wil je? Het helpt om een naam te kiezen die verklaart wat je presenteert in de grafiek. Bijvoorbeeld, ‘uren slaap per nacht’ of ‘aantal alcoholische dranken per dag’. De titel wordt getoond boven (of naast) de grafiek.
• Type: Hier vul je in wat voor type grafiek je wilt. Je kunt kiezen tussen: ‘lijn’, ‘staaf’ of ‘spreiding’.
• Field: Dit refereert naar de veldnaam van de vraag in het dagboek waarvan je de data in de grafiek wilt weergeven. Typ hier dus de veldnaam.
• Buckets: De bucket-functie laat je meerdere invoeren verzamelen in een enkele waarde in de tabel. Bijvoorbeeld, ‘day’ verzamelt alle waardes van dezelfde dag in één data punt. Of ‘nacht-ochtend-middag-avond’ laat vier datapunten zien, waarbij invoeren van meerdere dagen voor elk datapunt wordt verzameld.
• Series and bucket-function: De bucket-functie van een serie definieert hoe een enkel datapunt is opgebouwd vanuit meerdere invoeren. Bijvoorbeeld, voor een veld dat de hoeveelheid alcohol geconsumeerd in een enkele zitting beschrijft, en met per dag buckets, is de bucket-functie ‘som’ het meest geschikt: het laat de totale alcoholconsumptie per dag zien. Aan de andere kant, voor een veld dat de intensiteit van een emotie opneemt zal de bucket-functie ‘gemiddelde’ geschikter zijn. Voor choice velden telt de ‘tally’ bucket-functie hoeveel keer elke optie is geselecteerd, om te laten zien in een gestapelde staafdiagram.

Denk eraan om je werk regelmatig op te slaan!

Hoe maak je meer dan 1 grafiek voor een dagboek?

Dit is eigenlijk best simpel. Voeg een komma toe aan het einde van de grafiek-code en kopieer + plak de grafiek-code nog een keer in dit veld. Wijzig de groene tekst zodat deze bij je nieuwe grafiek past en sla op. Een voorbeeld van hoe de code eruit kan zien met 2 grafieken, zie je hieronder: