To Ignition veterans,
How do you implement timeline bar chart showing states?
Is there a component available that could do this? Is this only for Vision?
See screenshot below:
I saw this from below webinar:
1 Like
We've created one using the TimeSeries chart. The code below may help get you going.
props.plots
{
"axes": [
{
"min": 0,
"max": 1,
"grid": {
"style": {
"classes": ""
},
"visible": false,
"color": "",
"dashArray": 0,
"opacity": 0.9
},
"name": "RunStop",
"width": 60,
"style": {
"classes": ""
},
"label": {
"style": {
"classes": ""
},
"visible": true,
"text": "Running",
"offset": 0,
"font": {
"size": "16pt",
"color": "#eeeeee"
}
},
"tick": {
"count": 2,
"style": {
"classes": ""
},
"label": {
"format": "Auto",
"style": {
"classes": ""
},
"font": {
"color": "",
"size": 10
}
},
"color": ""
},
"alignment": "left"
}
],
"relativeWeight": 1,
"markers": [],
"trends": [
{
"interpolation": "curveStep",
"stack": true,
"baselines": [],
"visible": true,
"columns": [
{
"styles": {
"normal": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
},
"muted": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
},
"highlighted": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
},
"selected": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
}
},
"color": "#222222",
"key": "Running"
},
{
"styles": {
"normal": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
},
"muted": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
},
"highlighted": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
},
"selected": {
"fill": {
"color": "",
"opacity": null
},
"stroke": {
"width": null,
"color": "",
"dashArray": null,
"opacity": null
}
}
},
"color": "#AC0000",
"key": "Stopped"
}
],
"series": "RunStop",
"breakLine": true,
"axis": "RunStop",
"radius": 2,
"type": "area"
}
]
}
The result is a pair of plots running in opposition. When run is on stop is off and vice versa.
3 Likes
I will try this when I get there.
Thanks.