Hi,
I am tast to integrate bar chart that display workpiece number on x axis and cycle time in sec on y axis. Then there need to be a standard line that changeable from the slider and reset the graph when hit reset. Below is what it need to look like,
And This is the existing flow
[
{
"id": "18fa426c33c60391",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "bbbf2aa79551d7db",
"type": "function",
"z": "18fa426c33c60391",
"name": "Set start time",
"func": "var now = new Date(); // current time\nflow.set(\"startTime\", now);\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 380,
"y": 180,
"wires": [
[
"9180877e8499ebbe"
]
]
},
{
"id": "9180877e8499ebbe",
"type": "function",
"z": "18fa426c33c60391",
"name": "Run Time",
"func": "var now = new Date();\n\nsec = (now - flow.get(\"startTime\"))/1000;\n\nglobal.set(\"sec\",sec)\n\nmsg.payload = sec\n\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 600,
"y": 180,
"wires": [
[
"e8672e41e7961812"
]
]
},
{
"id": "e8672e41e7961812",
"type": "function",
"z": "18fa426c33c60391",
"name": "Cal Cycle Time",
"func": "if (msg.payload == 0){\n cycletime = 0\n} else {\n var counterTotal = parseInt(global.get(\"counterTotal\") || 0);\n var sec = parseFloat(global.get(\"sec\") || 0);\n cycletime = (sec/counterTotal).toFixed(2);\n}\n\nflow.set(\"cycletime\",cycletime)\n\nmsg.payload = cycletime\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 890,
"y": 240,
"wires": [
[
"5d644c77c1600d8f"
]
]
},
{
"id": "f3027fc19d463cfe",
"type": "function",
"z": "18fa426c33c60391",
"name": "CounterTotal",
"func": "var counterTotal = global.get(\"counterTotal\")||0\n\nif (msg.payload == \"reset\"){\n counterTotal = 0\n} else {\n counterTotal ++\n}\n\nglobal.set(\"counterTotal\",counterTotal)\n\nmsg.payload = counterTotal\n\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 610,
"y": 330,
"wires": [
[
"e8672e41e7961812",
"5d644c77c1600d8f"
]
]
},
{
"id": "a24a56b87b4e7a71",
"type": "inject",
"z": "18fa426c33c60391",
"name": "start time",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 180,
"y": 180,
"wires": [
[
"bbbf2aa79551d7db"
]
]
},
{
"id": "43eef9f47337b171",
"type": "inject",
"z": "18fa426c33c60391",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "1",
"payloadType": "str",
"x": 400,
"y": 450,
"wires": [
[
"9180877e8499ebbe",
"f3027fc19d463cfe"
]
]
},
{
"id": "5d644c77c1600d8f",
"type": "ui_chart",
"z": "18fa426c33c60391",
"name": "",
"group": "c23e6d4fa3e08e21",
"order": 9,
"width": 0,
"height": 0,
"label": "chart",
"chartType": "bar",
"legend": "true",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "",
"ymax": "",
"removeOlder": 1,
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"className": "",
"x": 1130,
"y": 330,
"wires": [
[]
]
},
{
"id": "3dbc5f41b5a829f8",
"type": "ui_button",
"z": "18fa426c33c60391",
"name": "",
"group": "c23e6d4fa3e08e21",
"order": 9,
"width": 0,
"height": 0,
"passthru": false,
"label": "RESET",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "reset",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 180,
"y": 300,
"wires": [
[
"bbbf2aa79551d7db",
"f3027fc19d463cfe"
]
]
},
{
"id": "704095afa15bd21c",
"type": "ui_slider",
"z": "18fa426c33c60391",
"name": "ct slider",
"label": "",
"tooltip": "",
"group": "c23e6d4fa3e08e21",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": "20",
"step": 1,
"className": "",
"x": 180,
"y": 510,
"wires": [
[]
]
},
{
"id": "c23e6d4fa3e08e21",
"type": "ui_group",
"name": "Button control",
"tab": "07c354039ca33a40",
"order": 1,
"disp": true,
"width": "12",
"collapse": false,
"className": ""
},
{
"id": "07c354039ca33a40",
"type": "ui_tab",
"name": "Senior Project",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
At the moment it looklike the chart use new information to update the existing bar rather than creating new bar. I am not sure how I should approach this.
Thank you in advance
