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 ‘release manager' en 'editor' in het CMS hebt. Als je deze rollen nog niet hebt, dan kan je dit aanvragen bij de applicatiebeheerder van jouw organisatie. Eventueel kunnen wij ook de javascript bewerking voor je doen als je niet de ambitie hebt om dit te leren. Benader in het laatste geval 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 code, 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.

• Title: 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: ‘line’, ‘bar’ of ‘scatter'.
• 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 en 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.

Blijf je werk opslaan! Dit is erg belangrijk. De dagboek editor slaat niet automatisch het werk op. Herinner jezelf hier dus regelmatig aan!

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. Let op: selecteer de code-tekst na '"charts":[' en zorg dat je de sluitende bracket ']' na de eerste grafiek verwijdert, anders krijg je een error. 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:

Hoe ziet de grafiek er uiteindelijk uit?

Als je klaar bent met je grafiek, dan kan je bij een testclient in het platform kijken hoe de grafiek er uiteindelijk uitziet. Voeg het dagboek toe aan een testclient. Gebruik de user-switch en doe een dagboek invoer vanuit cliëntenperspectief. Switch terug naar je eigen professional account. Ga naar de desbetreffende testclient en klik vervolgens op 'dagboek' en daarna op 'Kalender & Grafieken". Als je dan naar beneden scrolt zie je een grafiek (mits je als testclient al een dagboekinvoer hebt gedaan, anders is er niks zichtbaar!).