Help to Change X- Axis Value

General
1

Hi All,

I want create chart coast time value, but i've some problems:

  1. I can't setup the X-Axis Value starting from 0.
  2. When i change to seconds format (ss) the grid of x - axis value is repeating in same number

image

and this is my code:

[{"id":"ba2115b.00c9968","type":"ui_button","z":"8d8b4aff.20e398","name":"","group":"f2474495.4bf07","order":0,"width":0,"height":0,"passthru":false,"label":"STOP","color":"","bgcolor":"","icon":"STOP","payload":"open","payloadType":"str","topic":"control","x":326.666748046875,"y":1337.7780151367188,"wires":[["1b5972d8.5cfebd"]]},{"id":"1b5972d8.5cfebd","type":"q-gate","z":"8d8b4aff.20e398","name":"","controlTopic":"control","defaultState":"closed","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","queueCmd":"queue","defaultCmd":"default","triggerCmd":"trigger","flushCmd":"flush","resetCmd":"reset","maxQueueLength":"10","keepNewest":false,"x":514.4444580078125,"y":1185.555419921875,"wires":[["d9ef51fe.23b4"]]},{"id":"63827d5a.371e04","type":"change","z":"8d8b4aff.20e398","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"close","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":483.33331298828125,"y":1090.000244140625,"wires":[["b5ee1ca5.ca60b8"]]},{"id":"77358662.02957","type":"ui_button","z":"8d8b4aff.20e398","name":"","group":"f2474495.4bf07","order":0,"width":0,"height":0,"passthru":false,"label":"Reset","color":"","bgcolor":"","icon":"Reset","payload":"[ ]","payloadType":"json","topic":"","x":481.11114501953125,"y":1404.444580078125,"wires":[["d9ef51fe.23b4"]]},{"id":"656ff435.244cdc","type":"switch","z":"8d8b4aff.20e398","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lte","v":"30","vt":"str"},{"t":"gte","v":"30","vt":"str"}],"checkall":"true","outputs":2,"x":346.66668701171875,"y":1175.5556640625,"wires":[["63827d5a.371e04"],["1b5972d8.5cfebd"]]},{"id":"b5ee1ca5.ca60b8","type":"function","z":"8d8b4aff.20e398","name":"","func":"msg.topic=\"control\";\nreturn msg;","outputs":1,"noerr":0,"x":528.8888888888889,"y":1143.3333333333333,"wires":[["1b5972d8.5cfebd"]]},{"id":"e12fc9b3.04d67","type":"ui_slider","z":"8d8b4aff.20e398","name":"","label":"slider","group":"f2474495.4bf07","order":0,"width":0,"height":0,"passthru":true,"topic":"","min":0,"max":"3600","step":"100","x":153.33333333333334,"y":1196.6666666666667,"wires":[["656ff435.244cdc"]]},{"id":"d9ef51fe.23b4","type":"ui_chart","z":"8d8b4aff.20e398","name":"","group":"f2474495.4bf07","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"s","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":"10","removeOlderPoints":"6","removeOlderUnit":"1","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":875.5556030273438,"y":1244.4443359375,"wires":[[],[]]},{"id":"f2474495.4bf07","type":"ui_group","z":"","name":"Default","tab":"b9b1148a.325448","disp":true,"width":"38"},{"id":"b9b1148a.325448","type":"ui_tab","z":"","name":"Test Coast Time","icon":"dashboard"}]

Please help me to fix this problem

Thanks & Regards,

2

I can't try you code because I miss one node, the q gade, so I can't help you that well. One thing that might help you is to go to the chart editor and change the x-axis to something like "the last 10 hours OR 200 points". That should make your graph already a bit more readible. Oh and change the "S" to "SSS" in the X-axis label.

3

well - 20 points is better than 6 and keeps it reactive... - also as Louise suggested try a different scale label - maybe s.SS for seconds and hundredths.

4

Thank you @Louise , @dceejay

Now the graph is a little bit better. But, how to start from 0 second in X-Axis? Because i want to visualization the total time from high Rpm until reach the 0 rpm., when i push the Stop Button.

Just info, the slider only for simulation the input representative for Speed.

5

To force chart x axis to show desired values you will need to feed the chart complete set of data. Commonly mentioned as show historic data in charts. Otherwise the chart deals the data as live data and your time values will be actual timestamps when every data point is registered. There is no way to tell the chart that treat this timestamp as zero time

I did little example how you probably can reach what you are looking for.

[{"id":"cc3821d2.db51f","type":"ui_button","z":"5fe9ca97.61b3e4","name":"","group":"2f6e8bab.46edd4","order":0,"width":0,"height":0,"passthru":false,"label":"Reset","tooltip":"","color":"","bgcolor":"","icon":"Reset","payload":"[ ]","payloadType":"json","topic":"reset","x":750,"y":380,"wires":[["1a2e8e9d.b6faf1"]]},{"id":"1a2e8e9d.b6faf1","type":"function","z":"5fe9ca97.61b3e4","name":"","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// calculate time difference\nvar time = new Date().getTime() - startmoment\n// create chart point object\nvar ob = {x:time, y:msg.payload}\n// collect datapoints\nchartdata.push(ob)\n\n// limit data collection length\nif(chartdata.length > 10){\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":970,"y":360,"wires":[["426c4405.d48a4c","92064055.13b72"]]},{"id":"5ac991b1.d7d58","type":"ui_slider","z":"5fe9ca97.61b3e4","name":"","label":"slider","tooltip":"","group":"2f6e8bab.46edd4","order":0,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":"3600","step":"100","x":750,"y":320,"wires":[["1a2e8e9d.b6faf1"]]},{"id":"426c4405.d48a4c","type":"ui_chart","z":"5fe9ca97.61b3e4","name":"","group":"2f6e8bab.46edd4","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"s.SS","interpolate":"linear","nodata":"","dot":true,"ymin":"0","ymax":"3600","removeOlder":"10","removeOlderPoints":"200","removeOlderUnit":"1","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":1150,"y":400,"wires":[[]]},{"id":"92064055.13b72","type":"debug","z":"5fe9ca97.61b3e4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1170,"y":320,"wires":[]},{"id":"2f6e8bab.46edd4","type":"ui_group","z":"","name":"Default","tab":"b53c52d3.abce2","disp":true,"width":"38"},{"id":"b53c52d3.abce2","type":"ui_tab","z":"","name":"Test Coast Time","icon":"dashboard"}]

1 Like
6

Greats!, Thank you very much @hotNipi

Your function is working well in my code. Now i can visualization the coast time chart as per time reach to 0 speed.

Thanks & Regards,

image
image.png573Ă—548 17.5 KB

7

Hi @hotNipi ,

I've just edited some function in your code with formula:
deg = time /1440 * 360
adh = msg.payload
xnew = adh * sin(radians(deg))
ynew = adh * cos(radians(deg))

But, the chart it's not working well, only x value is changed.

Here is my code, please help me to fix this Math function

[{"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":[["34f068d0.6e25a"]]},{"id":"34f068d0.6e25a","type":"function","z":"8d8b4aff.20e398","name":"","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// calculate time difference\nvar deg = (new Date().getTime() - startmoment ) / 1440 * 360\nvar adh = msg.payload\nvar xnew = adh * (Math.sin * (Math.radians * deg))\nvar ynew = adh * (Math.cos * (Math.radians * deg))\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 > 3600){\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":546,"y":893,"wires":[["74c6bff1.02afc","f2388017.c69628"]]},{"id":"447e0c83.7897ec","type":"ui_slider","z":"8d8b4aff.20e398","name":"","label":"slider","tooltip":"","group":"e3824b36.3f4de","order":0,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":"3600","step":"100","x":326,"y":853,"wires":[["34f068d0.6e25a"]]},{"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":"s.SS","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"3600","removeOlder":"24","removeOlderPoints":"3600","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":"f2388017.c69628","type":"debug","z":"8d8b4aff.20e398","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":746,"y":853,"wires":[]},{"id":"e3824b36.3f4de","type":"ui_group","z":"","name":"Default","tab":"8fd59465.d1e5e","disp":true,"width":"9","collapse":false},{"id":"8fd59465.d1e5e","type":"ui_tab","z":"","name":"Test Coast Time","icon":"dashboard"}]
8

If I understand it correctly, you are trying to do a little trigonometry.
It really helps if you study a bit of Math with JavaScript in terms of what is possible and syntax wise.
https://www.w3schools.com/jsref/jsref_obj_math.asp

But anyway, this way the calculations produce at least some numbers. I don't really know is this Math properly done because of you didn't mention the purpose of the calculations and what is the expected outcome.

function radians (degrees) {
  return degrees * Math.PI / 180;
}

var deg = (new Date().getTime() - startmoment ) / 1440 * 360
var adh = msg.payload
var xnew = adh * Math.sin(radians(deg))
var ynew = adh * Math.cos(radians(deg))

// debug calculated values
node.warn(xnew+" "+ynew)
9

Yes your right, i want to create chart with trigonometry function. I've done with excel, so i want implementation it into Node-red.

image
image.png1089Ă—489 33.6 KB

So the chart output will become like this,

image
image.png955Ă—690 64.1 KB

I've try to add:

function radians (degrees) {
  return degrees * Math.PI / 180;
}

But still didn't work...

10

Check the syntax and debug the properties like shown
node.warn(value)

11

The debug shown:

5/14/2019, 12:48:30 PMnode: 34f068d0.6e25afunction : (warn)

"NaN NaN"

12

NaN means "not a number"
Show whole content of function node.

13

Here is the whole of function node:


// declare variables
var startmoment = context.get("startmoment")
var chartdata = context.get("chartdata") || []


// reset button has topic 'reset'. clear all data
if(msg.topic === "reset"){
 startmoment = undefined;
 context.set("startmoment",startmoment)
 context.set("chartdata",[]);
 msg.payload = []
 return msg
}

// keep startmoment undefined if not set and no new data yet.
// after reset first data marks initial time
if(startmoment === undefined){
 startmoment = new Date().getTime();
 context.set("startmoment",startmoment)
}

function radians (degrees) {
  return degrees * Math.PI / 180;
}

// calculate time difference
var deg =(new Date().getTime() - startmoment ) / 1440 * 360
var adh = msg.payload
var xnew = adh * Math.sin * (radians(deg))
var ynew = adh * Math.cos * (radians(deg))

node.warn(xnew+" "+ynew)

// create chart point object
var ob = {x:xnew, y:ynew}
// collect datapoints
chartdata.push(ob)

// limit data collection length
if(chartdata.length > 3600){
 chartdata.shift()
}
//store data set
context.set("chartdata",chartdata);


//prepare object for chart
//see how and why https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
msg.payload = [{
"series": ["A"],
"data": [chartdata],
"labels": [""]
}]


return msg;
14

Wrong syntax.
var xnew = adh * Math.sin * (radians(deg))

Correct syntax
var xnew = adh * Math.sin(radians(deg))

15

Thanks for the correction @hotNipi.

The debug now give me the output number, but the chart is going crazy.

image

And I've check is wrong sintax in "deg" function
var deg = (new Date().getTime() - startmoment ) / 1440 * 360

16

Chart does what is told to do :upside_down_face:. Now all depends on your input and calculations.

17

:smiley: Thank you @hotnipi for your help.

I'll check my calculations first, there is wrong at there.

18

After making changes using the functions below, I get the same results according to the calculations in Excel. but it only lasts up to 59 seconds (degree 14.75), after which the "deg" value returns to 0. So the chart overrides the previous line chart.

var deg = new Date().getSeconds() / 1440 * 360

image

image

*1440 means 60 minutes * 24 hours

19 

// declare variables
var startmoment = context.get("startmoment")
var chartdata = context.get("chartdata") || []


// reset button has topic 'reset'. clear all data
if(msg.topic === "reset"){
 startmoment = undefined;
 context.set("startmoment",startmoment)
 context.set("chartdata",[]);
 msg.payload = []
 return msg
}

// keep startmoment undefined if not set and no new data yet.
// after reset first data marks initial time
if(startmoment === undefined){
 startmoment = new Date().getTime();
 context.set("startmoment",startmoment)
}

// calculate time difference


function radians (degrees) {
  return degrees * Math.PI / 180;
}

// circular graph depends on input rate and desired number of datapoints (chart resolution)
// here is example of 60 points with input rate once per second

// how many data points there will be for full circle
var steps = 60
// current angle in degrees depends on current second value. can be minute or whatever. corelates with input rate  
var deg = (360 / steps) * new Date().getSeconds();

var adh = msg.payload
var xnew = adh * Math.sin(radians(deg))
var ynew = adh * Math.cos(radians(deg))

// debug calculated values
node.warn(xnew+" "+ynew)

// create chart point object
var ob = {x:xnew, y:ynew}
// collect datapoints
chartdata.push(ob)

// limit data collection length
if(chartdata.length > 3600){
 chartdata.shift()
}
//store data set
context.set("chartdata",chartdata);


//prepare object for chart
//see how and why https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
msg.payload = [{
"series": ["A"],
"data": [chartdata],
"labels": [""]
}]


return msg;
20

Hi @hotNipi

Your code work for 60 seconds full circle, but how to set 1440 steps in full circle of 24 hours? I'm trying to check and add function increment but still not work yet. The problem is, my formula in excel use increment in minutes. Start at 0:00 until 0:00 next day the total increment value is 1440. Maybe there a way to get minutes and hour data in time stamp then convert it to increment value?