📘

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.

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

7. 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.

3. 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

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.