# Mark an event on a chart
**URL:** https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812
**Category:** Dashboard
**Created:** [22 March 2023 10:51 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812 "2023-03-22T10:51:51Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Manuel\_o](https://discourse.nodered.org/u/Manuel_o)
#### Post date: [22 March 2023 10:51 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/1 "2023-03-22T10:51:51Z")
Hello.
Today i am experimenting with the chart. Works so far. I ask myself now the following.
I am display ma dosing [ml/h] on my chart. I also implemented an alarm. So if my pump has an alarm, a value switched from true to false. Is it possible to mark this event on my chart? lets say with a big dot oder a vertical line?
```auto
[
{
"id": "7ea7f04ad34aeade",
"type": "ui_chart",
"z": "bb1e74244b8354b7",
"name": "Dosing",
"group": "5879d49495918d3d",
"order": 0,
"width": 0,
"height": 0,
"label": "",
"chartType": "line",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "0",
"ymax": "7500",
"removeOlder": "1",
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#cc2e06",
"#f9fb9b",
"#ff7f0e",
"#2ca02c",
"#ff6a6a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 1270,
"y": 600,
"wires": [
[]
]
},
{
"id": "731d9e4c04c77fe6",
"type": "inject",
"z": "bb1e74244b8354b7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "2",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "testdata",
"payload": "4000",
"payloadType": "num",
"x": 1060,
"y": 600,
"wires": [
[
"7ea7f04ad34aeade"
]
]
},
{
"id": "0446d8036ede7ac6",
"type": "inject",
"z": "bb1e74244b8354b7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "alarmOn",
"payload": "true",
"payloadType": "bool",
"x": 1050,
"y": 460,
"wires": [
[]
]
},
{
"id": "0427e8883d6c8de4",
"type": "inject",
"z": "bb1e74244b8354b7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "AlarmOff",
"payload": "true",
"payloadType": "bool",
"x": 1050,
"y": 500,
"wires": [
[]
]
},
{
"id": "5879d49495918d3d",
"type": "ui_group",
"name": "Read",
"tab": "a42d8adbe9caeb3d",
"order": 1,
"disp": false,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "a42d8adbe9caeb3d",
"type": "ui_tab",
"name": "Pumpe_01",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
```
Thank you
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [22 March 2023 11:26 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/2 "2023-03-22T11:26:06Z")
If this would do, the yellow line marks the alarm period on till off
example flow
```auto
[{"id":"50c7792c2ec556d5","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"testdata","payload":"($round($random()*4)+1)*1000","payloadType":"jsonata","x":140,"y":4320,"wires":[["1dce9a77de7786b0","eacf08bf4aa9477c","bf67f03e141da466"]]},{"id":"1dce9a77de7786b0","type":"join","z":"65617ffeb779f51c","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"1","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":430,"y":4340,"wires":[["4baf9126e1047225"]]},{"id":"eacf08bf4aa9477c","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload > 4000 ? 4000 : null","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"AlarmOn","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":4240,"wires":[["1dce9a77de7786b0"]]},{"id":"bf67f03e141da466","type":"debug","z":"65617ffeb779f51c","name":"debug 250","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":730,"y":4240,"wires":[]},{"id":"4baf9126e1047225","type":"split","z":"65617ffeb779f51c","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":570,"y":4340,"wires":[["9a309aeb87c4463d"]]},{"id":"9a309aeb87c4463d","type":"ui_chart","z":"65617ffeb779f51c","name":"Dosing","group":"fa3e310e3f765768","order":0,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"7500","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#cc2e06","#f9fb9b","#ff7f0e","#2ca02c","#ff6a6a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":770,"y":4360,"wires":[[]]},{"id":"bcb18ac34ff3ae6f","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":410,"y":4440,"wires":[["9a309aeb87c4463d"]]},{"id":"fa3e310e3f765768","type":"ui_group","name":"Read","tab":"a42d8adbe9caeb3d","order":1,"disp":false,"width":"15","collapse":false,"className":""},{"id":"a42d8adbe9caeb3d","type":"ui_tab","name":"Pumpe_01","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@Manuel\_o](https://discourse.nodered.org/u/Manuel_o)
#### Post date: [22 March 2023 18:34 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/3 "2023-03-22T18:34:43Z")
thank your for the idea. Defintive an option. I also tried to create a vertical line but without sucsess.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [22 March 2023 19:02 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/4 "2023-03-22T19:02:37Z")
With this flow you can get vertical lines.
```auto
[{"id":"6c9b9404f65951f0","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"null","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":4240,"wires":[["c71853901e57a310","fce0edc6bc1c3919"]]},{"id":"9d5d0da9ed058590","type":"rbe","z":"65617ffeb779f51c","name":"","func":"rbe","gap":"","start":"","inout":"out","septopics":false,"property":"topic","topi":"topic","x":570,"y":4200,"wires":[["6c9b9404f65951f0"]]},{"id":"c71853901e57a310","type":"ui_chart","z":"65617ffeb779f51c","name":"Dosing","group":"7745bed36ef6fb62","order":0,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"7500","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#cc2e06","#f9fb9b","#ff7f0e","#2ca02c","#ff6a6a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":950,"y":4320,"wires":[[]]},{"id":"fce0edc6bc1c3919","type":"trigger","z":"65617ffeb779f51c","name":"","op1":"300","op2":"7000","op1type":"num","op2type":"num","duration":"1","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":630,"y":4280,"wires":[["c71853901e57a310"]]},{"id":"88f6f81c737c0219","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"$$.payload > 4000 ? \"AlarmOn\" : \"AlarmOff\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":4200,"wires":[["9d5d0da9ed058590"]]},{"id":"3dab2846e6c5349a","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":590,"y":4400,"wires":[["c71853901e57a310"]]},{"id":"4c04530458ad91b2","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"testdata","payload":"($round($random()*4)+1)*1000","payloadType":"jsonata","x":320,"y":4320,"wires":[["88f6f81c737c0219","c71853901e57a310"]]},{"id":"7745bed36ef6fb62","type":"ui_group","name":"Read","tab":"a42d8adbe9caeb3d","order":1,"disp":false,"width":"15","collapse":false,"className":""},{"id":"a42d8adbe9caeb3d","type":"ui_tab","name":"Pumpe_01","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
Or with changing topic after filter you can get one colour to.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 March 2023 19:03 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/5 "2023-03-22T19:03:25Z")
If just a bit of line is not enough, there is possibility to show images at the points on line (and then hide the line) . Just it is a bit complicated stuff ..
See examples of this technique here: [[SOLVED] Combine chart lines and images](https://discourse.nodered.org/t/solved-combine-chart-lines-and-images/36022/1)
---
### Author:  [@dpatel2016](https://discourse.nodered.org/u/dpatel2016)
#### Post date: [23 March 2023 19:54 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/6 "2023-03-23T19:54:31Z")
Is it possible to add an alarm string to the vertical lines and view it when hovered on it?
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [23 March 2023 20:35 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/7 "2023-03-23T20:35:16Z")
Sure, reconfigue the messages so the last is the null, then whatever the topic is becomes the hover.
As both readings are at same time, you get both, you could add a delay to separate them and then may get 1 topic displayed.
You could also do some fliping of the 300 and 7000 for AlarmOn and AlarmOff, so the marker point for On are at top, and Off are at bottom.
There are other options you could start reading here [node-red-dashboard/config-fields.md at master · node-red/node-red-dashboard · GitHub](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md) , and look at Chartjs
Example flow
```auto
[{"id":"97d9830834e8c12e","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"testdata","payload":"$round(($random()*4+1)*1000)","payloadType":"jsonata","x":110,"y":4300,"wires":[["8d7a0896f74d0ea1"]]},{"id":"8d7a0896f74d0ea1","type":"trigger","z":"65617ffeb779f51c","name":"","op1":"","op2":"","op1type":"pay","op2type":"pay","duration":"1","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":290,"y":4300,"wires":[["92468ec4564b3841"],["f0aacdbaf6a2855a"]]},{"id":"92468ec4564b3841","type":"ui_chart","z":"65617ffeb779f51c","name":"Dosing","group":"2f3ae701487f7d88","order":0,"width":0,"height":0,"label":"","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"7500","removeOlder":"1","removeOlderPoints":"500","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#cc2e06","#fff370","#fffa78","#2ca02c","#ff6a6a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":790,"y":4280,"wires":[[]]},{"id":"f0aacdbaf6a2855a","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"$$.payload > 4000 ? \"AlarmOn\" : \"AlarmOff\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":180,"y":4340,"wires":[["0a6d0373bc21e693"]]},{"id":"ec024b0207681054","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"set","p":"hold","pt":"msg","to":"$$.topic = \"AlarmOn\" ? $$.payload + 600 : $$.payload - 600","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":4340,"wires":[["b8e26d941358aa02","92468ec4564b3841"]]},{"id":"b8e26d941358aa02","type":"trigger","z":"65617ffeb779f51c","name":"","op1":"","op2":"null","op1type":"pay","op2type":"json","duration":"50","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":470,"y":4400,"wires":[["be9832edfd92b0df"],["92468ec4564b3841"]]},{"id":"966796f1b6775a5a","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":590,"y":4260,"wires":[["92468ec4564b3841"]]},{"id":"be9832edfd92b0df","type":"change","z":"65617ffeb779f51c","name":"","rules":[{"t":"move","p":"hold","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":4400,"wires":[["92468ec4564b3841"]]},{"id":"0a6d0373bc21e693","type":"rbe","z":"65617ffeb779f51c","name":"","func":"rbe","gap":"","start":"","inout":"out","septopics":false,"property":"topic","topi":"topic","x":330,"y":4340,"wires":[["ec024b0207681054","b16dea35babde805"]]},{"id":"b16dea35babde805","type":"debug","z":"65617ffeb779f51c","name":"debug send topic alarm change state","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"topic","targetType":"msg","statusVal":"","statusType":"auto","x":590,"y":4200,"wires":[]},{"id":"2f3ae701487f7d88","type":"ui_group","name":"Read","tab":"a42d8adbe9caeb3d","order":1,"disp":false,"width":"15","collapse":false,"className":""},{"id":"a42d8adbe9caeb3d","type":"ui_tab","name":"Pumpe_01","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@dpatel2016](https://discourse.nodered.org/u/dpatel2016)
#### Post date: [28 March 2023 18:10 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/8 "2023-03-28T18:10:48Z")
Do you have an example flow for the last two pictures you have? I tried that, but the identical faults starts connecting to each other.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [27 April 2023 18:10 UTC](https://discourse.nodered.org/t/mark-an-event-on-a-chart/76812/9 "2023-04-27T18:10:48Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.