The type of graph you’re building cannot be done using the built-in Time Series Block. It can, however, be done using the Custom Chart Block. Here’s an example:
Here is the query:
The currentStatus
attribute is a string, just like your example.
Here is the 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"]
}
}
}
}
You’ll need to change the domain
and range
properties to match your string values and desired colors. Hopefully this helps point you in the right direction!