[Solved] On/Off - green/Red

custom-chart-block
dashboard

#1

Seen some of your example graph of on/off status with just green/red blocks filling the graph. Which block/configuration was used?


#2

I think you are referring to the Indicator Block - you can customize the color and text based on various expressions you provide.


#3

No it was shown in a historical graph, to easily see when a machine had been on or off


#4

Can you provide a link to where you saw this? We’d be happy to elaborate on its configuration if we know specifically which graph you’re talking about. Thanks.


#5

I’m having a hard time finding it now. I know it was in a slide that Taron showed from a plant.


#6

Was it this?


#7

Yes!

Is it just a scale of 0 to 1 or something?


#8

That’s driven by a currentStatus string attribute on the device. Each status value is then represented as a color on that chart. The available status strings are “alarm”, “cutting”, “notCutting”, “stopped”.

The status is read from the device (CNC machine for this example) on a fixed 1 minute interval:

A custom chart is then used to render it horizontally like that. Each graph is 24 hours. Each vertical bar represents 5 minutes.

Here’s the complete Vega configuration:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},
  "height": {{block.height}},
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
    "name": "time-series-0"
  },
  "mark": {
    "type": "bar"
  },
  "config": {
    "axis": {
      "labels": false,
      "domain": false,
      "ticks": false,
      "grid": false
    },
    "view": {
      "fill": "transparent",
      "stroke": "transparent"
    },
    "scale": {
      "bandPaddingInner": 0
    }
  },
  "encoding": {
    "x": {
      "field": "time",
      "type": "ordinal",
      "axis": null
    },
    "y": {
      "field": "value",
      "type": "ordinal",
      "scale": {
        "domain": []
      },
      "axis": null
    },
    "color": {
      "field": "value", "type": "ordinal",
      "legend": null,
      "scale": {
        "domain": ["alarm","cutting","notCutting","stopped"],
        "range": ["#BD0000","#8DB319","#29ABE2","#B3B3B3"]
      }
    }
  }
}

The status strings are essentially arbitrary, so you can set those to whatever you want and then change the Vega config to visualize them appropriately.