openwave:1.32:applicatiebeheer:instellen_inrichten:grafieken

Verschillen

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

Link naar deze vergelijking

Beide kanten vorige revisie Vorige revisie
Volgende revisie		 Vorige revisie
openwave:1.32:applicatiebeheer:instellen_inrichten:grafieken [2025/07/17 15:34] – Kars Gottschalopenwave:1.32:applicatiebeheer:instellen_inrichten:grafieken [2025/12/18 11:46] (huidige) – Kars Gottschal
Regel 5: Regel 5:
 OpenWave heeft de open source library charts.js geïmporteerd, waardoor het mogelijk is tellingen op de database te laten zien als lijn-, staaf-, punten- of taartdiagram.  OpenWave heeft de open source library charts.js geïmporteerd, waardoor het mogelijk is tellingen op de database te laten zien als lijn-, staaf-, punten- of taartdiagram. 
  
-Dit kan vooralsnog alleen op een tegel. \\+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.32:applicatiebeheer:instellen_inrichten:portaldefinitie:portal_tegel]]), kan nu ook de tegel live gevuld worden met een diagram op basis van een query.\\ In plaats van een tegel live te vullen met tekst op basis van een query (zie getTileContent op [[openwave:1.32:applicatiebeheer:instellen_inrichten:portaldefinitie:portal_tegel]]), kan nu ook 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\\ 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\\
  
-==== Staafdiagram over alle zaken====+==== Staafdiagram over alle zaken ====
  
 <adm example Aantallen zaken per jaar> <adm example Aantallen zaken per jaar>
 {{openwave:applicatiebeheer:instellen_inrichten:charts_bar_aantallenperjaar.png?400|charts_bar_aantallenperjaar}} {{openwave:applicatiebeheer:instellen_inrichten:charts_bar_aantallenperjaar.png?400|charts_bar_aantallenperjaar}}
  
-Bovenstaande tegel toont de aantallen zaken van de afgelopen 4 jaar in een staafdiagram.\\+Bovenstaande tegel toont de aantallen zaken van de afgelopen 4 jaar in een staafdiagram.
 Daartoe moet: Daartoe moet:
   * de tegelcontent verwijzen naar getflexChart() met een querynaam als parameter   * de tegelcontent verwijzen naar getflexChart() met een querynaam als parameter
   * en moet een passende query gedefinieerd worden onder deze querynaam.   * en moet een passende query gedefinieerd worden onder deze querynaam.
  
-**getFlexChart()**\\ +### getFlexChart() ### 
-Op het detailscherm 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 worden met een aanroep naar getFlexChart met twee parameters: de gewenste diagramsoort en de naam van de query die de JSON-string definieert.\\+ 
 +Op het detailscherm 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 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 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.\\+De diagramsoort kan zijn: pie, bar, of line. In bovenstaand voorbeeld is dat bar.
 Dus de waarde van de kolom dvgettilecontent in de tegeldefinitie van bovenstaand voorbeeld is //getFlexChart(bar,opening_aantallenperjaar)// waarbij //opening_aantallenperjaar// de naam van de query is (tbquery.dvcode) die een JSON-string met de nodige informatie genereert (OpenWave levert deze queries niet standaard uit: men dient deze zelf te definiëren).  Dus de waarde van de kolom dvgettilecontent in de tegeldefinitie van bovenstaand voorbeeld is //getFlexChart(bar,opening_aantallenperjaar)// waarbij //opening_aantallenperjaar// de naam van de query is (tbquery.dvcode) die een JSON-string met de nodige informatie genereert (OpenWave levert deze queries niet standaard uit: men dient deze zelf te definiëren). 
  
-**query**\\+### query ### 
 De char.js library verwacht een JSON-string met daarin metadata (zoals labels en kleuren) en data (aantallen). Bij een bar (staafdiagram) ziet zo'n JSON-string er (naar bovenstaand voorbeeld) zo uit:  De char.js library verwacht een JSON-string met daarin metadata (zoals labels en kleuren) en data (aantallen). Bij een bar (staafdiagram) ziet zo'n JSON-string er (naar bovenstaand voorbeeld) zo uit: 
 <code sql> <code sql>
Regel 65: Regel 67:
 </adm> </adm>
  
-==== Taartdiagram over openstaande omgevingzaken====+==== Taartdiagram over openstaande omgevingzaken ====
  
 <adm example Verdeling openstaande zaken over zaaktypes > <adm example Verdeling openstaande zaken over zaaktypes >
 {{openwave:applicatiebeheer:instellen_inrichten:charts_pie_soortenomgzakenpng.png?400|charts_pie_soortenomgzakenpng}} {{openwave:applicatiebeheer:instellen_inrichten:charts_pie_soortenomgzakenpng.png?400|charts_pie_soortenomgzakenpng}}
  
-Bovenstaande tegel toont de de verdeling van de openstaande omgevingzaken per soort (dvsoortproc van tbsoortomgzaak).\\+Bovenstaande tegel toont de de verdeling van de openstaande omgevingzaken per soort (dvsoortproc van tbsoortomgzaak).
 Daartoe moet: Daartoe moet:
   * de tegelcontent verwijzen naar getflexChart()   * de tegelcontent verwijzen naar getflexChart()
   * en moet een passende query gedefinieerd worden.   * en moet een passende query gedefinieerd worden.
  
-**getFlexChart()**\\+### getFlexChart() ### 
 De waarde van de kolom dvgettilecontent in bovenstaand voorbeeld is //getFlexChart(pie,opening_verdelingomgzakennaarsoort)// waarbij de eerste parameter //pie// aangeeft dat het gewenste diagram een taartvorm is en waarbij //opening_verdelingomgzakennaarsoort// de naam van de query is (tbquery.dvcode) die een JSON-string met de nodige informatie genereert (OpenWave levert deze queries niet standaard uit: men dient deze zelf te definiëren). De waarde van de kolom dvgettilecontent in bovenstaand voorbeeld is //getFlexChart(pie,opening_verdelingomgzakennaarsoort)// waarbij de eerste parameter //pie// aangeeft dat het gewenste diagram een taartvorm is en waarbij //opening_verdelingomgzakennaarsoort// de naam van de query is (tbquery.dvcode) die een JSON-string met de nodige informatie genereert (OpenWave levert deze queries niet standaard uit: men dient deze zelf te definiëren).
  
-**query**\\ +### query ### 
-De char.js library verwacht een JSON-string met daarin metadata (zoals labels en kleuren) en data (aantallen). Bij een pie (taart-diagram) ziet zo'n JSON-string er (naar bovenstaand voorbeeld) zo uit (lijkt eigenlijk erg veel op staafdiagram, maar nu moet men per label een aparte kleur definiëren). \\+ 
 +De char.js library verwacht een JSON-string met daarin metadata (zoals labels en kleuren) en data (aantallen). Bij een pie (taart-diagram) ziet zo'n JSON-string er (naar bovenstaand voorbeeld) zo uit (lijkt eigenlijk erg veel op staafdiagram, maar nu moet men per label een aparte kleur definiëren). 
 Vanwege de beperking in de breedte van de tegel zijn in bovenstaand voorbeeld de labelnamen afgekort. \\ Vanwege de beperking in de breedte van de tegel zijn in bovenstaand voorbeeld de labelnamen afgekort. \\
 <code sql> <code sql>
Regel 120: Regel 124:
 In bovenstaande voorbeelden zijn de diagrammen toegevoegd op bestaande tegels van het openingsportaal. Dat kan, maar kost natuurlijk ook tijd. Een alternatief is een apart portaal te maken met tegels die diagrammen laten zien. In bovenstaande voorbeelden zijn de diagrammen toegevoegd op bestaande tegels van het openingsportaal. Dat kan, maar kost natuurlijk ook tijd. Een alternatief is een apart portaal te maken met tegels die diagrammen laten zien.
  
-==== Staafdiagram over één zaak====+==== Staafdiagram over één zaak ====
  
 <adm example staafdiagram aantallen openstaande taken binnen één zaak> <adm example staafdiagram aantallen openstaande taken binnen één zaak>
Regel 126: Regel 130:
 {{openwave:applicatiebeheer:instellen_inrichten:charts_bar_openstaandetakenperzaak.png?400|charts_bar_openstaandetakenperzaak}} {{openwave:applicatiebeheer:instellen_inrichten:charts_bar_openstaandetakenperzaak.png?400|charts_bar_openstaandetakenperzaak}}
  
-**getFlexChart()**\\+### getFlexChart() ### 
 De waarde van de kolom dvgettilecontent is //getFlexChart(bar,omgeving_openstaandetaken,{id})// waarbij de eerste parameter //bar// aangeeft dat het gewenste diagram een staafdiagram is en waarbij //omgeving_openstaandetaken// de naam van de query is (tbquery.dvcode) die een JSON-string met de nodige informatie genereert. En waarbij //{id}// aangeeft dat in de aangeroepen query de substring //{id}// door OpenWave on the fly vervangen moet worden met de waarde van de portalid (dnkey van de betreffende zaak van het zaakportaal ). De waarde van de kolom dvgettilecontent is //getFlexChart(bar,omgeving_openstaandetaken,{id})// waarbij de eerste parameter //bar// aangeeft dat het gewenste diagram een staafdiagram is en waarbij //omgeving_openstaandetaken// de naam van de query is (tbquery.dvcode) die een JSON-string met de nodige informatie genereert. En waarbij //{id}// aangeeft dat in de aangeroepen query de substring //{id}// door OpenWave on the fly vervangen moet worden met de waarde van de portalid (dnkey van de betreffende zaak van het zaakportaal ).
  
-**query**\\+### query ### 
 De query levert een JSON-string met de aantallen openstaande adviezen (Ad), Openstaande processtappen (Pr), Openstaande collegiale toetsen (CT) en uitgaande maar nog niet verstuurde brieven (TV). De query levert een JSON-string met de aantallen openstaande adviezen (Ad), Openstaande processtappen (Pr), Openstaande collegiale toetsen (CT) en uitgaande maar nog niet verstuurde brieven (TV).
  
  • openwave/1.32/applicatiebeheer/instellen_inrichten/grafieken.1752759261.txt.gz
  • Laatst gewijzigd: 2025/07/17 15:34
  • door Kars Gottschal