Finally the output debug is same with my calculations in Excel. Here is the correction:
// hours + minutes convertion
var min = new Date().getHours() *60 + new Date().getMinutes()
//create degree for 1440 point in 24 hours
var deg = min /1440*360
Hi All,
The input value is correct, but the chart still overlap. 
[{"id":"f2205dc7.f3bac","type":"ui_button","z":"8d8b4aff.20e398","name":"","group":"e3824b36.3f4de","order":0,"width":0,"height":0,"passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","icon":"Reset","payload":"[ ]","payloadType":"json","topic":"reset","x":326,"y":913,"wires":[["f8421723.1a58e8"]]},{"id":"74c6bff1.02afc","type":"ui_chart","z":"8d8b4aff.20e398","name":"","group":"e3824b36.3f4de","order":0,"width":"0","height":"0","label":"chart","chartType":"line","legend":"false","xformat":"SS","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":726,"y":933,"wires":[[]]},{"id":"7037e1c.362942","type":"inject","z":"8d8b4aff.20e398","name":"","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":143,"y":801,"wires":[["5a6d7f96.e1f8b"]]},{"id":"5a6d7f96.e1f8b","type":"function","z":"8d8b4aff.20e398","name":"","func":"rnd = Math.round (Math.random()*30);\nmsg.payload = rnd;\nreturn msg;","outputs":1,"noerr":0,"x":293,"y":813,"wires":[["f8421723.1a58e8"]]},{"id":"f8421723.1a58e8","type":"function","z":"8d8b4aff.20e398","name":"test","func":"\n// declare variables\nvar startmoment = context.get(\"startmoment\")\nvar chartdata = context.get(\"chartdata\") || []\n\n\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment)\n context.set(\"chartdata\",[]);\n msg.payload = []\n return msg\n}\n\n// keep startmoment undefined if not set and no new data yet.\n// after reset first data marks initial time\nif(startmoment === undefined){\n startmoment = new Date().getTime();\n context.set(\"startmoment\",startmoment)\n}\n\n// increment function\nvar i = 0;\n\nfunction increment(n){\n\n n++;\n return n;\n}\n\ni=increment(i);\n\n// calculate time difference\n\n\nfunction radians (degrees) {\n return degrees * Math.PI / 180;\n}\n\n// hours + minutes convertion\nvar min = new Date().getHours() *60 + new Date().getMinutes()\n\n//create degree for 1440 point\nvar deg = min /1440*360\n\nvar adh = msg.payload\nvar xnew = adh * Math.sin(radians(deg))\nvar ynew = adh * Math.cos(radians(deg))\n\n// debug calculated values\nnode.warn(deg+ \" \"+adh +\" \"+xnew+\" \"+ynew)\n\n// create chart point object\nvar ob = {x:xnew, y:ynew}\n// collect datapoints\nchartdata.push(ob)\n\n// limit data collection length\nif(chartdata.length > 1440){\n chartdata.shift()\n}\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\n\n//prepare object for chart\n//see how and why https://github.com/node-red/node-red-dashboard/blob/master/Charts.md\nmsg.payload = [{\n\"series\": [\"A\"],\n\"data\": [chartdata],\n\"labels\": [\"\"]\n}]\n\n\nreturn msg;","outputs":1,"noerr":0,"x":526,"y":860,"wires":[["74c6bff1.02afc"]]},{"id":"e3824b36.3f4de","type":"ui_group","z":"","name":"Default","tab":"8fd59465.d1e5e","disp":true,"width":"12","collapse":false},{"id":"8fd59465.d1e5e","type":"ui_tab","z":"","name":"Test Coast Time","icon":"dashboard"}]
I think it's the deg calculation is wrong.
Formula should be
360 / total_steps * current_step
Thanks a lot @hotNipi , i've change the formula yesterday, and keep the simulation work until now. Here is the Pic now:
And now you probably need to change the x axis to indicate more realistic values.
Here's the solution:
msg.payload = [{
"series": ["A"],
"xAxisID": 'custom-x-axis',
"yAxisID": 'custom-y-axis',
"data": [chartdata],
"labels": [""]
}]
msg.ui_control = {
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'linear',
id: 'custom-x-axis',
position:'bottom',
ticks: {
fontColor:"#ccc",
max: 30,
min: -30,
stepSize: 10
}
}],
yAxes: [{
id: 'custom-y-axis',
ticks: {
fontColor:"#ccc",
}
}]
}
}
}
Hi @hotNipi , thanks for the solutions. I'm trying to put your code in my code, but still not change the X-Axis scale.
- left = X-Axis label i put 2 spaces with unchanged code
- right = combine with your solutions
[{"id":"f2205dc7.f3bac","type":"ui_button","z":"8d8b4aff.20e398","name":"","group":"4e9781d0.863e7","order":0,"width":0,"height":0,"passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","icon":"Reset","payload":"[ ]","payloadType":"json","topic":"reset","x":326,"y":913,"wires":[["f8421723.1a58e8"]]},{"id":"74c6bff1.02afc","type":"ui_chart","z":"8d8b4aff.20e398","name":"","group":"e3824b36.3f4de","order":0,"width":"9","height":"9","label":"chart","chartType":"line","legend":"false","xformat":" ","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#ff0000","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":726,"y":933,"wires":[[]]},{"id":"7037e1c.362942","type":"inject","z":"8d8b4aff.20e398","name":"","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":143,"y":801,"wires":[["5a6d7f96.e1f8b"]]},{"id":"5a6d7f96.e1f8b","type":"function","z":"8d8b4aff.20e398","name":"","func":"rnd = Math.round (Math.random()*30);\nmsg.payload = rnd;\nreturn msg;","outputs":1,"noerr":0,"x":293,"y":813,"wires":[["f8421723.1a58e8"]]},{"id":"f8421723.1a58e8","type":"function","z":"8d8b4aff.20e398","name":"test","func":"\n// declare variables\nvar startmoment = context.get(\"startmoment\")\nvar chartdata = context.get(\"chartdata\") || []\n\n\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment)\n context.set(\"chartdata\",[]);\n msg.payload = []\n return msg\n}\n\n// keep startmoment undefined if not set and no new data yet.\n// after reset first data marks initial time\nif(startmoment === undefined){\n startmoment = new Date().getTime();\n context.set(\"startmoment\",startmoment)\n}\n\n\n\n// calculate time difference\n\n\nfunction radians (degrees) {\n return degrees * Math.PI / 180;\n}\n\n// hours + minutes convertion\nvar min = new Date().getHours() *60 + new Date().getMinutes()\n\n//create degree for 1440 point\nvar deg = 360/ 1440 * min\n\nvar adh = msg.payload\nvar xnew = adh * Math.sin(radians(deg))\nvar ynew = adh * Math.cos(radians(deg))\n\n// debug calculated values\nnode.warn(deg+ \" \"+adh +\" \"+xnew+\" \"+ynew)\n\n// create chart point object\nvar ob = {x:xnew, y:ynew}\n// collect datapoints\nchartdata.push(ob)\n\n// limit data collection length\nif(chartdata.length > 1440){\n chartdata.shift()\n}\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\n\n//prepare object for chart\n//see how and why https://github.com/node-red/node-red-dashboard/blob/master/Charts.md\nmsg.payload = [{\n\"series\": [\"A\"],\n\"data\": [chartdata],\n\"labels\": [\"\"]\n}]\n\n\nreturn msg;","outputs":1,"noerr":0,"x":526,"y":860,"wires":[["74c6bff1.02afc"]]},{"id":"1076704a.386908","type":"ui_button","z":"8d8b4aff.20e398","name":"","group":"f6a7bb74.cf2a6","order":0,"width":0,"height":0,"passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","icon":"Reset","payload":"[ ]","payloadType":"json","topic":"reset","x":1061,"y":932,"wires":[["d936016b.7da5f"]]},{"id":"f84ec1a3.50318","type":"ui_chart","z":"8d8b4aff.20e398","name":"","group":"c7a27394.057878","order":0,"width":"9","height":"9","label":"chart","chartType":"line","legend":"false","xformat":"mm","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#ff0000","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":1461,"y":952,"wires":[[]]},{"id":"9251a607.5109c","type":"inject","z":"8d8b4aff.20e398","name":"","topic":"","payload":"25","payloadType":"str","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":858,"y":820,"wires":[["d936016b.7da5f"]]},{"id":"d936016b.7da5f","type":"function","z":"8d8b4aff.20e398","name":"test fix","func":"\n// declare variables\nvar startmoment = context.get(\"startmoment\")\nvar chartdata = context.get(\"chartdata\") || []\n\n\n// reset button has topic 'reset'. clear all data\nif(msg.topic === \"reset\"){\n startmoment = undefined;\n context.set(\"startmoment\",startmoment)\n context.set(\"chartdata\",[]);\n msg.payload = []\n return msg\n}\n\n// keep startmoment undefined if not set and no new data yet.\n// after reset first data marks initial time\nif(startmoment === undefined){\n startmoment = new Date().getTime();\n context.set(\"startmoment\",startmoment)\n}\n\n\n\n// calculate time difference\n\n\nfunction radians (degrees) {\n return degrees * Math.PI / 180;\n}\n\n// hours + minutes convertion\nvar min = new Date().getHours() *60 + new Date().getMinutes()\n\n//create degree for 1440 point\nvar deg = 360/ 1440 * min\n\nvar adh = msg.payload\nvar xnew = adh * Math.sin(radians(deg))\nvar ynew = adh * Math.cos(radians(deg))\n\n// debug calculated values\nnode.warn(deg+ \" \"+adh +\" \"+xnew+\" \"+ynew)\n\n// create chart point object\nvar ob = {x:xnew, y:ynew}\n// collect datapoints\nchartdata.push(ob)\n\n// limit data collection length\nif(chartdata.length > 1440){\n chartdata.shift()\n}\n//store data set\ncontext.set(\"chartdata\",chartdata);\n\n\n//prepare object for chart\n//see how and why https://github.com/node-red/node-red-dashboard/blob/master/Charts.md\n//msg.payload = [{\n//\"series\": [\"A\"],\n//\"data\": [chartdata],\n//\"labels\": [\"\"]\n//}]\n\nmsg.payload = [{\n\"series\": [\"A\"],\n\"xAxisID\": 'custom-x-axis',\n\"yAxisID\": 'custom-y-axis',\n\"data\": [chartdata],\n\"labels\": [\"\"]\n}]\n\nmsg.ui_control = {\n options: {\n legend: {\n display: false\n },\n scales: {\n xAxes: [{\n type: 'linear',\n id: 'custom-x-axis',\n position:'bottom',\n ticks: {\n fontColor:\"#ccc\",\n max: 30,\n min: -30,\n stepSize: 10\n }\n }],\n yAxes: [{\n id: 'custom-y-axis',\n ticks: {\n fontColor:\"#ccc\",\n \n }\n }]\n }\n }\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":1261,"y":879,"wires":[["f84ec1a3.50318"]]},{"id":"4e9781d0.863e7","type":"ui_group","z":"","name":"Reset Ampchart","tab":"8fd59465.d1e5e","order":3,"disp":true,"width":"9","collapse":false},{"id":"e3824b36.3f4de","type":"ui_group","z":"","name":"Default","tab":"8fd59465.d1e5e","order":1,"disp":false,"width":"9","collapse":false},{"id":"f6a7bb74.cf2a6","type":"ui_group","z":"","name":"Reset Fix Data","tab":"8fd59465.d1e5e","order":4,"disp":true,"width":"9","collapse":false},{"id":"c7a27394.057878","type":"ui_group","z":"","name":"Fix Data","tab":"8fd59465.d1e5e","order":2,"disp":false,"width":"9","collapse":false},{"id":"8fd59465.d1e5e","type":"ui_tab","z":"","name":"Digital Ampchart","icon":"dashboard","disabled":false,"hidden":false}]
What are the versions of Node-RED and dashboard you are currently using
For dashboard is 2.14.0 and for Node-Red is 0.20.5.
Might be the dashboard update helps
Still same result... Is the syntax of X-Axis Label is wrong?
Your flow works well in my setup. x-axis configuration will be overrided so it does not mater.
ah... The problem is from my browser (Google Chrome)... So, i'm trying to open it in Mozilla Firefox is working well..
For me it works with chrome as well. Maybe you should clear browser cache?
1 Like
Hi @hotNipi
Can you help me, for example change the line color and multiple line with this function?
Thanks
I share the link where all configurable options can be found. https://www.chartjs.org/docs/latest/charts/line.html
I'm a bit busy to do experiments and examples right now, hope you can figure it out if you explore the document.
Oh ok, I'm sorry ... Thank you @hotNipi for the link.
Can you help to change in the x axis values in chart given x=[0.0, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5];
