How to draw xy charts?

Dashboard
1

Hello all!

I want to draw a simple xy chart like shown in the example. How can I do this?
I'm struggling for days now of getting rid of the time based x-axis.

image

2

I have an old example,see if it helps.

[{"id":"c4f537f2.375308","type":"ui_template","z":"407e1abc.6d1cb4","group":"c7a27394.057878","name":"CSS","order":6,"width":0,"height":0,"format":"<style>\n    canvas.chart.chart-line {\n        height:calc(100%) !important;\n        width: calc(100%) !important;\n        background-image:linear-gradient(0.5turn, #f69d3c00,#f69d3c20, #f69d3c00);\n    }\n    \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":770,"y":2300,"wires":[[]]},{"id":"bb7019ee.9d8e08","type":"inject","z":"407e1abc.6d1cb4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":2380,"wires":[["82bd568f.ac0638","27d4e78.5dbe518"]]},{"id":"82bd568f.ac0638","type":"function","z":"407e1abc.6d1cb4","name":"modify chart options","func":"let gridcolors = 'rgba(255, 160, 0, 0.3)'\nmsg.ui_control = {\n    options: {\n        legend: {\n            display: false\n        },\n        tooltips: {\n            enabled: false\n        },\n        scales: {\n            xAxes: [{\n                type: 'linear',\n                id: 'custom-x-axis',\n                position:'bottom',\n                padding:100,\n                gridLines:{\n                    color:gridcolors,\n                    zeroLineColor:'rgba(123, 113, 113, 0.75)',\n                    tickMarkLength:7,\n                    drawTicks:false\n                },\n                ticks: {\n                    fontColor:\"#ccc\",\n                    max: 60,\n                    min: 0,\n                    stepSize: 10\n                   \n                }\n            }],\n            yAxes: [{\n                id: 'custom-y-axis',\n                \n                gridLines:{\n                    color:gridcolors,\n                    zeroLineColor:'red',\n                    tickMarkLength:5,\n                    drawTicks:false\n                },\n                ticks: {\n                    fontColor:\"#ccc\",\n                    max: 30,\n                    min: -30,\n                    stepSize: 10\n                }\n            }]\n       }\n    }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":540,"y":2400,"wires":[["38072b72.56e0a4"]]},{"id":"27d4e78.5dbe518","type":"function","z":"407e1abc.6d1cb4","name":"data collection","func":"var data = [\n    {x:1,y:5},\n    {x:15,y:2},\n    {x:30,y:7}\n]\n\n\n\nmsg.payload = [{\n    \"series\": [\"A\"],\n    \"xAxisID\": 'custom-x-axis',\n    \"yAxisID\": 'custom-y-axis',\n    \"data\": [data],\n    \"labels\": [\"\"]\n}]\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":2360,"wires":[["38072b72.56e0a4"]]},{"id":"38072b72.56e0a4","type":"ui_chart","z":"407e1abc.6d1cb4","name":"","group":"c7a27394.057878","order":5,"width":9,"height":"6","label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#00b3ff","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":770,"y":2380,"wires":[[]]},{"id":"c7a27394.057878","type":"ui_group","name":"CHART","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"9","collapse":false},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2 Likes
3

Thanks a lot! This works quite well!

image
image980Ă—661 29.9 KB

4

@hotNipi
Thanks for this example. I'm playing around with the code for showing the position of my Roomba on the map, and it's working now.
A Question about a secondary color appeared. May you have an Idea for that.
I played with the examples on node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub
But at moment it seems I'm not able to add a second colored line

msg.payload = [{
    "series": ["A","B"],
    "xAxisID": 'custom-x-axis',
    "yAxisID": 'custom-y-axis',
    "data": [[data],[data2]],
    "labels": ["X","Y"]
}];

Do you have an Idea?

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.