Grafieken [Documentatie]

Dit is een oude revisie van het document!

OpenWave heeft de open source library charts.js geimporteerd, waardoor het mogelijk is tellingen op de database te laten zien als lijn-, staaf-, punten- of taartdiagram.

Dit kan vooralsnog alleen op een tegel.
In plaats van een tegel live te vullen met tekst op basis van een query (zie getTileContent op Portaltegel), kan nu de tegel live gevuld worden met een diagram op basis van een query.

De uitkomst van die query moet een JSON-string zijn met daarin opgenomen labels en metadata en data van het diagram, zoals de charts.js library deze voorschrijft. Zie https://github.com/chartjs/Chart.js

voorbeeld staafdiagram

Bovenstaande tegel toont de aantallen zaken van de afgelopen 4 jaar in een staafdiagram.
Daartoe moet:

de tegelcontent verwijzen naar getflexChart()
en moet een passende query gedefinieerd worden.

getFlexChart() Op het detailschermn van de tegeldefinitie (beheerportaal: kolom Scherm- en Tegelbeheer : tegel Portal) van de betreffende tegel moet de kolom Tegelopschrift dynamisch met API getTileContent() of getFlexChart() (dvgettilecontent) gevuld te worden met een aanroep naar getFlexChart met twee parameters: de gewenste diagramsoort en de naam van de query die de Json string definieert.
De functie getFlexChart evalueert de query en geeft het resultaat met het gewenste diagramtype door aan de chart.js, die de informatie rendert naar een diagram.
De diagramsoort kan zijn: pie, bar, of line. In bovenstaand voorbeeld is dat bar. Dus de waarde van de kolom dvgettilecontent in bovenstaand voorbeeld is getFlexChart(bar,opening_aantallenperjaar) waarbij opening_aantallenperjaar de naam van de query is (tbquery.dvcode) die een jsonstring met de nodige informatie genereert. (OpenWave levert deze queries niet standaard uit:U dient deze zelf te definieren)

query De char.js library verwacht een Json string met daarin metadata (zoals labels) en data (aantallen). Bij een bar (staafdiagram) ziet zo'n JSON-string er (naar bovenstaand voorbeeld) zo uit:

{
  "labels": ["2021", "2022","2023", "2024"],
  "datasets": [{
      "label": "Aantal zaken per jaar",
      "backgroundColor": "rgba(0, 255, 255, 1)",
      "borderColor": "rgba(255, 0, 0, 1)",
      "borderWidth": 0.5,
      "data": [11230,8578,12512,2200]
  }]
}