# Help to Change X- Axis Value

**URL:** <https://discourse.nodered.org/t/help-to-change-x-axis-value/10874>\
**Category:** General\
**Created:** [7 May 2019 07:08 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874 "2019-05-07T07:08:28Z")\
**Posts on this page:** 18\
**Page:** 2

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [15 May 2019 04:44 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/21 "2019-05-15T04:44:46Z")

</div>

Finally the output debug is same with my calculations in Excel. Here is the correction:

```auto
// 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

```

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [15 May 2019 05:55 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/22 "2019-05-15T05:55:45Z")

</div>

Hi All,

The input value is correct, but the chart still overlap. ☹

```auto
[{"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"}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3458afb22848d5a61d10889d372d840de013d558.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 May 2019 06:14 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/23 "2019-05-15T06:14:55Z")

</div>

I think it's the deg calculation is wrong.  
Formula should be  
360 / total\_steps \* current\_step

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [16 May 2019 01:36 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/24 "2019-05-16T01:36:16Z")

</div>

Thanks a lot @hotNipi , i've change the formula yesterday, and keep the simulation work until now. Here is the Pic now:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/80809b32089079633564b6b5b1e0c9a5055098ed.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 May 2019 06:07 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/25 "2019-05-16T06:07:47Z")

</div>

And now you probably need to change the x axis to indicate more realistic values.

Here's the solution:

```auto
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",
                   
                }
            }]
       }
    }
}

```

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [16 May 2019 06:49 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/26 "2019-05-16T06:49:33Z")

</div>

Hi @hotNipi , thanks for the solutions. I'm trying to put your code in my code, but still not change the X-Axis scale.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d6fce8ba0612728fd14f1fffecd8f466f0a0134b.png)

- left = X-Axis label i put 2 spaces with unchanged code
- right = combine with your solutions

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 May 2019 06:52 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/27 "2019-05-16T06:52:23Z")

</div>

What are the versions of Node-RED and dashboard you are currently using

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [16 May 2019 06:57 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/28 "2019-05-16T06:57:27Z")

</div>

For dashboard is 2.14.0 and for Node-Red is 0.20.5.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 May 2019 06:59 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/29 "2019-05-16T06:59:20Z")

</div>

Might be the dashboard update helps

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [16 May 2019 07:09 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/30 "2019-05-16T07:09:12Z")

</div>

Still same result... Is the syntax of X-Axis Label is wrong?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a3e36ec6fff5892be967ad55856cb8b395e5d40c.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 May 2019 07:22 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/31 "2019-05-16T07:22:06Z")

</div>

Your flow works well in my setup. x-axis configuration will be overrided so it does not mater.

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [16 May 2019 07:35 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/32 "2019-05-16T07:35:29Z")

</div>

ah... The problem is from my browser (Google Chrome)... So, i'm trying to open it in Mozilla Firefox is working well..

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 May 2019 07:42 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/33 "2019-05-16T07:42:04Z")

</div>

For me it works with chrome as well. Maybe you should clear browser cache?

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [16 May 2019 07:46 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/34 "2019-05-16T07:46:58Z")

</div>

Perfectly ! Haha...  
Working well in Chrome too after clean up the cache files

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/08ee624a6545b001fd8c9875b2ca0e602418d316.png)

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [21 May 2019 02:39 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/36 "2019-05-21T02:39:20Z")

</div>

Hi @hotNipi

Can you help me, for example change the line color and multiple line with this function?

Thanks

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [21 May 2019 07:27 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/37 "2019-05-21T07:27:44Z")

</div>

I share the link where all configurable options can be found. [https://www.chartjs.org/docs/latest/charts/line.html](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.

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [21 May 2019 07:39 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/38 "2019-05-21T07:39:41Z")

</div>

Oh ok, I'm sorry ... Thank you @hotNipi for the link.

---

<div class="post-metadata">

**Author:** ![Yog12](https://avatars.discourse-cdn.com/v4/letter/y/a3d4f5/32.png) [@Yog12](https://discourse.nodered.org/u/Yog12)\
**Post date:** [17 July 2024 05:17 UTC](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874/39 "2024-07-17T05:17:39Z")

</div>

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];

[Previous page](https://discourse.nodered.org/t/help-to-change-x-axis-value/10874.md?page=1)