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 kan kiezen tussen: 

  • Lijngrafiek
  • Staafdiagram 
  • Spreidingsgrafiek



Lijngrafiek
Staafdiagram
Spreidingsgrafiek
linechart.png
bar_chart.png
scatterplot_desktop.png



Maak een dagboek in 3 stappen

Volg de volgende stappen om een grafiek voor jouw dagboek te creëren. 


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 CSM 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 account manager.



Stap 1: ontwerp de grafiek in je hoofd

Voordat je begint met het maken van jouw grafieken in het CMS, is het belangrijk dat je nadenkt hoe je de grafiek eruit wilt laten zien. Van welke data van het dagboek is 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 vaak 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.


De code om een grafiek te maken
Zo ziet het eruit in het CMS
{
 "charts": [
   {
     "buckets": "day",
     "series": [
       {
         "bucket-function": "sum",
         "field": "asleep"
       }
     ],
     "title": "Hours of sleep per night",
     "type": "bar"
   }
 ],
code_graphss.png



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


Stap 3: vervang de groene tekst.

Pas de code aan aan jouw dagboek door de groene stukken te vervangen door tekst om bij het dagboek te passen.


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 soort 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 gestapelde staafdiagram.


overzicht_diary-graphs.png


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 aan het einde van de grafiek-code toe en kopieer + plak de grafiek-code nog een keer in dit veld. Pas de groene text aan deze tweede grafiek aan die je wilt creëren en sla deze op. Een voorbeeld van hoe de code eruit kan zien met 2 grafieken, zie je hieronder:


Code om 2 grafieken te maken
Zo ziet het eruit in het CMS
{
 "charts": [
   {
     "buckets": "day",
     "series": [
       {
         "bucket-function": "sum",
         "field": "asleep"
       }
     ],
     "title": "Uren slaap per nacht",
     "type": "bar"
   },
   {
     "buckets": "day",
     "series": [
       {
         "bucket-function": "sum",
         "field": "float_2"
       }
     ],
     "title": "Uitgerust gevoel",
     "type": "bar"
   }
 ],
2graphs.png