Blocks - Donut

šŸ“˜

Blocks - Donut

Met het Donut-block kunt u uw data weergeven in de vorm van een donut- of taartgrafiek. Dit is ideaal om de verdeling van bepaalde waarden in Ć©Ć©n oogopslag aan te tonen. Kies uw data en pas hier eventueel een filter op toe. Stel bijvoorbeeld een label in of pas de legenda aan.

628

Voorbeeld - Donut-block

Algemeen

  1. Geef een titel.
  2. Geef een beschrijving.
  3. Kies de achtergrondkleur.
  4. Kies de taal.
  5. 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. Kies een waarde-attribuut.
  4. 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. Vink aan of de waarden als percentage weergegeven moeten worden.

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. Vink aan of de labels getoond moeten worden.
  2. Vul eventueel een voorvoegsel in om bijvoorbeeld een eenheid aan te geven.
  3. Vul eventueel een achtervoegsel in om bijvoorbeeld een eenheid aan te geven.

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'
donutChart:
  liveTable: true | false
  title: string
  description: string
  style:
    backgroundColor: string
  layout:
    border:
      color: rgb | background | inherit
      opacity: number
      padding: number
      width: number
    donut: true | false
    labels: 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: rgb
        width: number
      symbol:
        size: number
        shape: circle | square | triangle | diamond
    margin:
      bottom: number
      left: number
      right: number
      top: number
    tooltip:
      prefix: string
      suffix: string
  format:
    decimals: number
    locale: string
  data:
    datasetId: string
    alias:
      <key>:
        name: "<value of your choice>"
        color: "hex"
    operator: sum | count | min | max | avg | median
    order: undefined | asc | desc
    percentage: true | false
    attributes:
      key: string
      value: 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
liveTablebooleanGeeft de mogelijkheid om grafieken te filterentrue
titlestringTitel boven diagram[operator] op [values] van [dataset]
descriptionstringBeschrijving
backgroundColorstring (hex)Achtergrondkleur# ffffff
border.colorstringKleur van de omlijning
border.opacitynumberDoorzichtigheid van de omlijning
border.paddingnumberAfstand tot de omlijning0
border.widthnumberDikte van de omlijning2px
donutbooleanOf de cirkeldiagram een taart of donut moet zijntrue
labelsbooleanOf de waarden van de secties getoond dienen te wordenfalse
legend.showbooleanOf de legenda getoond moet 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-items2px
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 donut tot aan de onderkant van het block40px
margin.leftnumberDe marge van de donut tot aan de linkerkant van het block40px
margin.rightnumberDe marge van de donut tot aan de rechterkant van het block40 | 130 when legend is shownpx
margin.topnumberDe marge van de donut tot aan de bovenkant van het block20px
tooltip.prefixstringEenheid als prefix
tooltip.suffixstringEenheid als suffix
decimalsnumberAantal decimalen0
localestringTaalen
datasetIdstringID van de dataset
alias.< key >.namestringAlias op de data-attribuutnamen. is de attribuutnaam. De waarde die hier aan wordt gegeven, in "", is de alias
alias.< key >.colorstring (hex)Kleur van de alias op de data-attribuutnamen
operatorstringOperator
orderstringVolgordeundefined
percentagebooleanOf de waarden als percentage moeten worden weergegevenfalse
attributes.keystringAttribuutwaarde voor de groepering van de data
attributes.valuestringAttribuutwaarde voor de presentatie van de data
filter.enablebooleanOf de filter ingeschakeld dient te wordenfalse
filter.attributestringAttribuut 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

Instellen kleuren

Onderstaand een voorbeeld van een YAML voor een donutgrafiek, waarmee alle objecten custom ingekleurd kunnen worden. Deze kun je hergebruiken door de dataset-id, attribuut-definities en titels te vervangen.

version: "1.0"
donutChart:
  liveTable: true
  style:
    backgroundColor: "#ffffff"
  layout:
    donut: true
    labels: true
    legend:
      show: true
  format:
    locale: "nl"
    decimals: 0
  data:
    alias:
      Overijssel:
        name: "Overijssel"
        color: "#000000"
      Groningen:
        name: "Groningen"
        color: "#000000"
      Limburg:
        name: "Limburg"
        color: "#000000"
      Noord-Brabant:
        name: "Noord-Brabant"
        color: "#000000"
      Zeeland:
        name: "Zeeland"
        color: "#000000"
      Utrecht:
        name: "Utrecht"
        color: "#000000"
      Noord-Holland:
        name: "Noord-Holland"
        color: "#000000"
      Zuid-Holland:
        name: "Zuid-Holland"
        color: "#000000"
      Drenthe:
        name: "Drenthe"
        color: "#000000"
      Friesland:
        name: "Friesland"
        color: "#000000"
      Gelderland:
        name: "Gelderland"
        color: "#000000"
      Flevoland:
        name: "Flevoland"
        color: "#000000"
    operator: "sum"
    order: "asc"
    datasetId:
      id: "2b63fd25-b46b-436f-882f-bf24d3333f7c"
      name: "Provinciekaart"
    attributes:
      key: "provincie"
      value: "totale_bevolking"
  title: "Totaal aantal inwoners per provincie"

Meervoudig filter

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