Fitness App Breakdown #2: Quickchart.io

thim90
Jul 31
4 min read

Van ringen naar staafdiagrammen – De Power Apps fitnessdashboard uitbreiden met QuickChart.io

In mijn vorige blog liet ik zien hoe ik Apple-achtige activity rings nabouwde met behulp van SVG in Power Apps.

Die post leverde veel enthousiaste reacties op. Naast vragen over de activity rings, kreeg ik ook meerdere malen de vraag:

"Hoe heb je dat staafdiagram erbij gebouwd?"

Daarom: tijd voor het vervolg.

In deze blog leg ik uit hoe ik met behulp van QuickChart.io een dynamisch staafdiagram heb toegevoegd aan hetzelfde fitnessdashboard. De grafiek is gebaseerd op stappen- of afstandsdata per uur en wordt volledig gegenereerd op basis van data in de app.

En het mooiste: het ziet er strak uit, het is superlichtgewicht én je hebt er geen Power BI voor nodig.

De insteek van deze experimenten is niet om Power BI te vervangen, maar om te laten zien hoeveel mogelijk is binnen Power Apps zelf, zéker als je oog hebt voor UI en interactie.

⚡️ QuickChart to the rescue

QuickChart is een gratis API die grafieken genereert op basis van JSON via een URL. Dat betekent: je stuurt een stukje JSON in een string naar hun endpoint, en krijgt een SVG- of PNG-grafiek terug die je direct in een Image control kunt weergeven.

Het resultaat is verbluffend snel, volledig stateless én makkelijk aanpasbaar.

Combineer dat met Power Fx en een beetje logica, en je bouwt een grafiek die meebeweegt met je data, in realtime.

Je kunt verschillende grafiektypes gebruiken (bar, line, doughnut, radar, etc.), maar ik koos hier bewust voor een staafdiagram omdat dat goed aansluit bij de tijdlijn van activiteit.

Stap 1 – Bouw de basis-URL

Net als bij het maken van een ring component ( zie voirge blog), voegen we een lege image control toe aan de PowerApp.

We beginnen met het opbouwen van de URL-string. Alle instellingen van de grafiek gaan in EncodeUrl() als JSON-blok.

"https://quickchart.io/chart?c=" & EncodeUrl("{ ... }")

De volledige grafiek wordt dus gegenereerd door de JSON die je in die string stopt. Dit betekent dat je de hele visual kunt aansturen met formules — oftewel: het is volledig dynamisch te maken binnen Power Apps.

Schrik niet, zonder een correct JSON zal de onderstaande foutmelding verschijnen in de image control.

PowerApps showing error message due to incorrect JSON for QuickChart

Stap 2 – Definieer de structuur van de grafiek

De kern van de grafiek:

Type (bar)
Data: labels + datasets
Opties voor stijlen

Hieronder zie je een versimpelde structuur van de JSON die we dynamisch opbouwen:

{
  type: 'bar',
  data: {
    labels: [...],
    datasets: [{
      label: 'Aantal Stappen',
      data: [...],
      backgroundColor: ...
    }]
  },
  options: { ... }
}

In mijn geval ging het om activiteiten per uur, dus elk label is een tijdstip, en de dataset bevat het aantal stappen of afgelegde afstand. Beide vallen onder het data-object — een cruciaal onderdeel dat bepaalt wat en hoe er wordt getoond.

Stap 3 – Dynamische labels (X-as)

We halen de uren uit een collectie en bouwen daar een lijst van via Concat():

labels: [" & Concat(colFitnessData, Text(hour), ",") & "]

🧠 Dit geeft een array zoals "08", "09", "10", die onder het labels:-element van het data-object valt.

Elke label komt uit de collectie colFitnessData, waarin bijvoorbeeld per uur het aantal stappen wordt bijgehouden. Deze collectie is vooraf opgebouwd via een load-functie of timer in de app.

Zo creëer je een horizontale as die automatisch meebeweegt met de data.

Stap 4 – Data injecteren (Y-as)

Vervolgens doen we hetzelfde voor het aantal stappen of afstand:

data: [" & Concat(colFitnessData, Text(distance), ",") & "]

Deze array vormt de inhoud van het data:-veld binnen het datasets:-object. De dataset bevat dus de waarden die bij elk uur horen.

Let op: dit werkt alleen goed als je labels en datapunten synchroon blijven — dus idealiter sorteer je je collectie van tevoren op uur.

Alles is gekoppeld aan je collectie: zodra colFitnessData verandert (bijvoorbeeld na synchronisatie of gebruikersactie), verandert ook je grafiek.

Stap 5 – Visuele stijl

We geven de grafiek een visuele upgrade met een verticale gradient:

label: 'Aantal Stappen'
backgroundColor: getGradientFillHelper('vertical', ['#1AB3EC', '#3FC7ED'])

De gradient zorgt voor visuele diepte en sluit mooi aan op de stijl van het dashboard (die ook gradients gebruikt voor de ringen).

De label wordt weergegeven als je tooltips gebruikt of de legenda laat zien.

Chart created basedon QuickChart in PowerApps

Stap 6 – De grafiek opschonen

We ruimen visuele ruis op:

Verberg de legenda
Verwijder de Y-as labels
Pas kleuren aan van X-as en gridlines

options: {
  legend: { display: false },
  scales: {
    yAxes: [{ ticks: { display: false, fontColor: '#1AB3EC' } }],
    xAxes: [{
      ticks: { fontColor: '#1AB3EC' },
      gridLines: { color: '#A1A1A1' }
    }]
  }
}

Waarom? Omdat de grafiek als onderdeel van een visueel component dient, en dus niet alle assen of lijnen nodig heeft. Het is niet bedoeld als analyseview, maar als visueel dashboardelement.