Blocks - Lijngrafiek

šŸ“˜

Blocks - Lijngrafiek

Met de Lijngrafiek-block kunt u uw data weergeven in een lijngrafiek. Dit is ideaal om bijvoorbeeld veranderende waarden door de tijd heen te laten zien. Kies een dataset en pas hier eventueel filters op toe. In dit block heeft u ook de mogelijkheid om een markering met een specifieke waarde in te stellen, zodat bijvoorbeeld een grenswaarde aangegeven kan worden.

1257

Voorbeeld - Lijngrafiek-block

Algemeen

  1. Geef een titel.
  2. Geef een beschrijving.
  3. Kies de achtergrondkleur.
  4. Vink aan of de grafiek stacked moet zijn.
  5. Kies de taal.
  6. Kies of er, en hoeveel decimalen getoond moeten worden.

Data

  1. Kies de gewenste Dataset uit het Project waar de App in zit.
  2. Kies een hoofd-attribuut (de key).
  3. Vul een label in voor de hoofd-as
  4. Kies een waarde-attribuut.
  5. Vul een label in voor de secundaire as.
  6. Kies de operator:
  • Sum: het totale aantal van de attribuutwaarden
  • Count: het aantal (verschillende) attribuutwaarden
  • Min: de laagste waarde
  • Max: de hoogste waarde
  • Average: de gemiddelde waarde
  • Median: de middelste waarde
  1. Kies de sortering (onbepaald, oplopend of aflopend).

Filter

  1. Kies eventueel een attribuut om op te filteren.
  2. Kies een filter-operator:
  • Gelijk aan
  • Niet gelijk aan
  • Als
  • Niet als
  • Groter dan
  • Groter dan of gelijk aan
  • Kleiner dan
  • Gelijk aan of kleiner dan
  • En - alleen bij YAML
  • Of - alleen bij YAML (zie hiervoor de uitleg voor meervoudige filters op de pagina Blocks.
  1. Vul de filterwaarde in.

Legenda

  1. Vink aan of de legenda getoond moet worden.
  2. Vul het aantal pixels in dat de legenda horizontaal verschoven moet worden.
  3. Vul het aantal pixels in dat de legenda verticaal verschoven moet worden.

Opmaak

  1. Geef een titel op voor de X-as.
  2. Geef een titel op voor de Y-as.
  3. Geef eventueel een eenheid op als voorvoegsel.
  4. Geef eventueel een eenheid op als achtervoegsel.
  5. Vink aan of de lijnen als vloeiende kromme getoond moeten worden.

Markering

Eventueel kan er een markering worden toegevoegd om bijvoorbeeld een grenswaarde te tonen.

  1. Kies of deze markering staand (verticaal) of liggend (horizontaal) getoond moet worden.
  2. Vul de waarde voor deze markering in.
  3. Geef een titel aan de markering.
  4. Kies de kleur van de markering met de color picker of vul de hex-code in.

YAML

šŸ“˜

Aanvullende opties met YAML-formulier

Bepaalde variabelen zijn niet instelbaar vanuit het reguliere formulier. Onderstaand is daarom het volledige YAML-formulier te vinden om ook deze instellingen te kunnen gebruiken.

Let op! Deze is bruikbaar voor de nieuwste versies van Apps en Blocks, beschikbaar vanaf Release 30.

  1. Start door het betreffende Block in de Editor te bewerken.
  2. Wissel onderaan naar het YAML-formulier.
  3. Kopieer onderstaande code en plak deze in de Editor.
  4. Vul de variabelen in door overal number en string met de gewenste waarde te vervangen en bij de meerkeuzevariabelen alleen de gewenste optie te laten staan. Onder het onderstaande YAML-formulier is ter referentie een tabel te vinden met de veldtypen en standaardwaarden, welke gebruikt worden als een variabele volledig weggelaten wordt. Beschrijvingen zullen nader worden toegevoegd.
  • Boolean: kies true om weer te geven of te gebruiken, kies false om dit niet te doen.
  • String: geef een waarde op, dit kan o.a. een optie zoals in onderstaand YAML-formulier zijn, maar ook een stuk tekst of hex-waarde. Let op! Waarden van dit type moeten tussen aanhalingstekens worden gezet (bv. "#ffffff").
  • Number: geef een getal als waarde op (vaak in pixels).
version: '1.0'
lineChart:
  liveTable: true | false
  title: string
  description: string
  style:
    backgroundColor: string (hex)
  layout:
    curve: true | false
    enableMarker: true | false
    legend:
      show: true | false
      position: top-left | top | top-right | left | center | right | bottom-left | bottom | bottom-right
      direction: column | row
      justify: true | false
      offsetX: number
      offsetY: number
      item:
        direction: left-to-right | right-to-left | top-to-bottom | bottom-to-top
        height: number
        opacity: number
        spacing: number
        textColor: string (hex)
        width: number
      symbol:
        size: number
        shape: circle | square | triangle | diamond
    margin:
      bottom: number
      left: number
      right: number
      top: number
    markers:
        axis: x | y
        value: number | string
        lineStyle:
          color: string
          width: number
        legend:
          title: text marker
          orientation: vertical    
    fill: true | false      
    stacked: true | false
    tooltip:
      prefix: string
      suffix: string
    xAxis:
      offset: number
      padding: number
      rotation: number
      size: number
      title: string
    yAxis:
      maxValue: number
      minValue: number
      offset: number
      padding: number
      rotation: number
      size: number
      title: string
  format:
    decimals: number
    locale: string
  data:
    datasetId: string
    order: undefined | asc | desc
    attributes:
      title: string
      key: string
      values:
        - title: string
          value: string
          operator: string
    filter: 
      enable: true | false
      operator: '= | != | like | notlike | > | >= | < | =< | and | or'
      attribute: string
      value: string
      filters:
        - operator: '= | != | like | notlike | > | >= | < | =< | and | or'
          attribute: string
          value: string
          filters:
            - operator: '= | != | like | notlike | > | >= | < | =< | and | or'
              attribute: string
              value: string
VeldTypeBeschrijvingDefault-waarde indien van toepassingEenheid indien van toepassing
liveTablebooleanOf dynamische filters toegepast mogen wordentrue
titlestringTitel[operator] op [values] van [dataset]
descriptionstringBeschrijving
backgroundColorstring (hex)Achtergrondkleur# ffffff
enableMarkerbooleanOf er een markeringslijn toegepast dient te wordenfalse
curvebooleanOf de lijn gebogen getoond dient te wordenfalse
legend.showbooleanOf de legenda getoond dient te wordenfalse
legend.postionstringHoe de legenda uitgelijnd moet wordenright
legend.directionstringDe oriƫntatie van de legendacolumns
legend.justifybooleanOf symbool en label naast elkaar of tegenovergesteld van elkaar worden uitgelijndfalse
legend.offsetXnumber120px
legend.offsetYnumber0px
legend.item.directionstringIn welke oriƫntatie symbool en label ten opzichte van elkaar uitgelijnd staanleft-to-right
legend.item.heightnumberDe hoogte van de uitlijning van een legenda-item20px
legend.item.widthnumberDe breedte van de uitlijning van een legenda-item100px
legend.item.opacitynumberDe doorzichtigheid van de legenda0.75
legend.item.spacingnumberDe ruimte tussen de legenda-items0
legend.item.textColorstring (hex)De tekstkleur van de legenda-items# 000000
legend.symbol.sizenumberDe symboolgrootte van de legenda-items18px
legend.symbol.shapestringDe vorm van de symbolencircle
margin.bottomnumberDe marge van de grafiek tot aan de onderkant van het block80px
margin.leftnumberDe marge van de grafiek tot aan de linkerkant van het block80px
margin.rightnumberDe marge van de grafiek tot aan de rechterkant van het block80 | 110 when legend is shownpx
margin.topnumberDe marge van de grafiek tot aan de bovenkant van het block20px
markers[0].axisstringDe as waarop de markering getoond dient te wordenx
markers[0].valuenumber | stringDe waarde waarbij de markering getoond dient te worden
markers[0].lineStyle.colorstring (hex)De kleur van de markering# 000000
markers[0].lineStyle.widthnumberDe dikte van de markering2px
markers[0].legend.titlestringDe naam van de markering
markers[0].legend.orientationstringDe oriƫntatie van de markeringhorizontal
fillbooleanOf de ruimte onder de lijn ingekleurd dient te wordenfalse
stackedbooleanOf de verschillende lijnen 'op elkaar gestapeld' dienen te wordenfalse
tooltip.prefixstringDe eenheid als voorvoegsel
tooltip.suffixstringDe eenheid als achtervoegsel
xAxis.offsetnumberOffset van y-as label horizontaal32px
xAxis.paddingnumberDe afstand van de x-as tot aan de rand van het block5px
xAxis.positionstring
xAxis.rotationnumberDe rotatie van de x-as0graden
xAxis.sizenumberGrootte van de lijn op de x-as5px
xAxis.titlestringDe titel van de x-as
yAxis.maxValuenumberDe maximale waarde op de y-asauto
yAxis.minValuenumberDe minimale waarde op de y-asauto
yAxis.offsetnumber-45px
yAxis.paddingnumberDe afstand van de y-as tot aan de rand van het block5px
yAxis.positionstring
yAxis.rotationnumberDe rotatie van de y-as0graden
yAxis.sizenumberGrootte van de lijn op de y-as5px
yAxis.titlestringDe titel van de y-as
decimalsnumberHet aantal decimalen0
localestringTaalen
datasetIdstringID van de dataset
alias.stringAlias op de data-attribuutnamen. is de attribuutnaam. De waarde die hier aan wordt gegeven, in "", is de alias
orderstringDe sorteringundefined
attributes.keystringAttribuut voor de groepering van de data
attributes.titlestringTitel-attribuut
attributes.values[0].titlestringLabel van de valuevalue of values[0].value | operator "count"
attributes.values[0].operatorstringOperator
attributes.values[0].valuestringWeer te geven waarde-attribuut
attributes.values[0].colorstring (hex)Kleur van de waarden
filter.enablebooleanOf er een filter ingeschakeld dient te wordenfalse
filter.attributestringHet attribuut waarop gefilterd dient te worden
filter.operatorstringOperator waarmee gefilterd dient te worden
filter.valuestringFilterwaarde
filters[0].operatorstringOperator wanneer er meervoudige filters worden toegepast
filters[0].attributestringAttribuut wanneer er meervoudige filters worden toegepast
filters[0].valuestringAttribuutwaarde wanneer er meervoudige filters worden toegepast

Voorbeelden

Meerdere lijnen

Onderstaand een voorbeeld van een YAML voor een lijngrafiek, waarbij meerdere lijnen worden gebruikt, en de lijnen custom ingekleurd kunnen worden. Deze kun je hergebruiken door de dataset-id, attribuut-definities en titels te vervangen.

version: "1.0"
lineChart:
  liveTable: true
  style:
    backgroundColor: "#ffffff"
  layout:
    curve: false
    orientation: "vertical"
    legend:
      show: true
      position: "right"
      justify: false
    enableMarker: false
    markers:
      - axis: "x"
        lineStyle:
          color: "#ff0000"
    stacked: false
  format:
    locale: "nl"
    decimals: 0
  data:
    order: "asc"
    filter:
      enable: false
    datasetId:
      id: "8d103bee-db16-4bea-bbbb-b88b23e6855e"
      name: "Bevolking"
    attributes:
      key: "provincie"
      values:
        - operator: "sum"
          value: "mannen"
          title: "Aantal mannen"
          color: "#ffff00"
        - operator: "sum"
          value: "vrouwen"
          title: "Aantal vrouwen"
          color: "#00ffff"

Meervoudige filters

Voor een voorbeeld van hoe je meervoudige filters op de data in kunt stellen zie deze handleiding.