Verschillen

Dit geeft de verschillen weer tussen de geselecteerde revisie en de huidige revisie van de pagina.

--- openwave:1.30:applicatiebeheer:instellen_inrichten:grafieken [2024/05/17 14:38] – Ton Pullens
+++ openwave:1.30:applicatiebeheer:instellen_inrichten:grafieken [Ongeldige datum] (huidige) – verwijderd - Externe bewerking (Ongeldige datum) 127.0.0.1
@@ Regel 1: / Regel 1: @@
-===== Grafieken =====
-{{tag>openwave:1.30:applicatiebeheer:functionaliteiten:applicatiebouw}}
-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 [[openwave:1.30:applicatiebeheer:instellen_inrichten:portaldefinitie:portal_tegel|]]), 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\\
-<adm example voorbeeld staafdiagram>
-{{:openwave:1.30:applicatiebeheer:instellen_inrichten:charts_bar_aantallenperjaar.png?400|}}
-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]
-    }]
-  }
-</adm>