Vega grafiek documentatie.

Historie

4-feb-2024: transform timestamp met grote ‘M’ om foute grefiek te voorkomen; “timestamp”: “utc:’%Y-%M-%d %H:%M:%S'”

Deze pagina beschrijft de ontwikkeling van de temperatuur grafieken op de website. Deze grafiek bevat de lucht temperatuur en de grond temperatuur op 10cm in de grond.
De data wordt gemeten door Meetjestad.net.
Op de baan staat sensor 2057. Deze levert data op in JSON formaat met de volgende URL:
https://meetjestad.net/data/?type=sensors&ids=2057&format=json&limit=10

De data ziet er als volgt uit:

[{"row": 0,"id":2114,"timestamp":"2023-11-28 09:12:17","firmware_version":255,"longitude":5.38812,"latitude":52.1429,"temperature":13.0625,"humidity":95.4375,"supply":2.99,"battery":4.38,"extra":[62,12,55,12,105]},
{"row": 1,"id":2114,"timestamp":"2023-11-27 17:11:17","firmware_version":255,"longitude":5.38806,"latitude":52.143,"temperature":15.4375,"humidity":93.5625,"supply":2.99,"battery":4.38,"extra":[58,12,54,12,114]}]

Met vega-lite heb ik een grafiek gemaakt:

{
  //
  // Use Vega Ligth, see https://vega.github.io/vega-lite-api/
  //
  "$schema": "https://vega.github.io/schema/vega-lite/v5.16.1.json",
  "title": "Temperatuur Rubensbaan",
  "width": "500",
  "height": "200",
  "data": {
    "url": "https://meetjestad.net/data/?type=sensors&ids=2057&format=json&limit=96",
    "format": {"parse": {"timestamp": "utc:'%Y-%M-%d %H:%M:%S'"}}
  },
  "transform": [{"calculate": "0", "as": "nullijn"},
                {"calculate": "datum.temperature - 5", "as": "grondtemp"},
                {"flatten": ["extra"], "as": ["extra2"]}
               ],
  "repeat": {
    "layer": [
    "temperature",
    "grondtemp",
    "nullijn",
    "extra2"]
  },
  "spec": 
  {
      "mark": {"type": "line"},
      "encoding": {
        "x": {
          "timeUnit": "dayhoursminutes",
          "field": "timestamp",
          "title": "Tijd (2 dagen)"
        },
        "y": {
          "field": {"repeat": "layer"},
          "type": "quantitative",
          "title": "Temperatuur",
          "scale": {"zero": false}
        },
        "color": {
          "datum": {"repeat": "layer"},
          "type": "nominal"
        }
    }
  }
}

Maar vega-lite bevat geen funties om een element uit de extra array te halen.

Maar vega heeft daar wel een mogelijkheid voor.

Daarvoor dient de vega-lite code gecompileerd te worden naar Vega, en deze dan verder bewerken met de vega editor.

Met flatten kan dan een indeze meegegeven worden van het array element, en dan middels de index het 4de array element eruit gehaald worden. De transform code daarvoor is dan:

       {
          "type": "flatten",  -- platslaan van de array
          "fields": ["extra"],
          "index": "idx",   -- voeg index idx toe
          "as": ["extra2"]  -- nieuwe field met idx
        },
        {"type": "filter", "expr": "datum[\"idx\"] == 3"},  
         -- filter op 2 array element
        {
          "type": "formula",
          "as": "grondtemp",
          "expr": "datum[\"extra2\"] / 4 -20"
          -- bereken grond temperatuur: grondtemp= extra2 * 0.25 - 20 
        }

In Wordress dient deze pagina bewerkt te worden met de Code editor. En het blok dat gebruikt is een HTML blok.