📘

Blocks - Staafdiagram

Met de Staafdiagram-block kunt u data weergeven in de vorm van een staafdiagram. Dit is ideaal om een attribuutwaarde voor verschillende groepen of gebieden te vergelijken. Pas filters toe op uw data of schakel tussen een verticaal of horizontaal staafdiagram. Ook kunt u de titels van de assen en de legenda aanpassen.

Algemeen

1. Geef een titel.
2. Geef een beschrijving.
3. Kies of de oriëntatie van de diagram verticaal of horizontaal moet zijn.
4. Kies de achtergrondkleur.
5. Vink aan of de grafiek stacked moet zijn.
6. Kies de taal.
7. 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'
barChart:
  liveTable: true | false
  title: string 
  description: string 
  style:
    backgroundColor: string (hex)
  layout:
    enableMarker: true | false 
    orientation: vertical | horizontal | undefined 
    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
        width: number
        opacity: number
        spacing: number
        textColor: string (hex)
      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 | horizontal
    stacked: true | false
    tooltip:
      prefix: string 
      suffix: string
    xAxis:
      offset: number
      padding: number
      position: string
      rotation: number
      size: number
      title: string
    yAxis:
      maxValue: number
      minValue: number
      offset: number
      padding: number
      position: string
      rotation: number
      size: number
      title: string
  format:
    decimals: number 
    locale: nl | en
  data:
    datasetId: string
    alias:
      <key>: "value of your choice"
    order: undefined | asc | desc
    attributes:
      key: string
      title: string 
      values:
        - title: string
          operator: sum | count | min | max | avg | median
          value: string 
          color: string (hex)
    filter:
      enable: true | false
      attribute: string
      operator: '= | != | like | notlike | > | >= | < | =< | and | or'
      value: string 
      filters:
        - operator: '= | != | like | notlike | > | >= | < | =< | and | or'
          attribute: string
          value: string
          filters:
            - operator: '= | != | like | notlike | > | >= | < | =< | and | or'
              attribute: string
              value: string

Voorbeelden

Meerdere attributen gebruiken

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

version: "1.0"
barChart:
  liveTable: true
  style:
    backgroundColor: "#ffffff"
  layout:
    orientation: "vertical"
    legend:
      show: true
      position: "right"
      justify: false
    stacked: false
  format:
    locale: "nl"
    decimals: 0
  data:
    order: "asc"
    filter:
      enable: false
    datasetId:
      id: "5f55ff55-b55b-555f-555f-ff33f5555fff"
      name: "Provinciekaart"
    attributes:
      values:
        - operator: "sum"
          value: "aantal_vrouwen"
          color: "#00ffff"
          title: "vrouwen"
        - operator: "sum"
          value: "aantal_mannen"
          color: "#ffff00"
          title: "mannen"
      key: "provincie"
  title: "Mannen/Vrouwen per provincie"

Meervoudig filter

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