I know this topic has been discussed before but couldn't find a final solution, at least for my case. Following the example by @hotNipi here. I have modified the example for my need.
So, the node "gets" a weather/wind data for next 15 hours and injects it to a function node(s) and finally to a chart. I would like to show the wind speed as a series in a line. Then the labels on x-axis would show the wind direction in degrees (later perhaps as arrows). The following code does this, but I had to modify the chart data from object to array. So instead of having an array of objects containing both x and y information, there is now only an array of y-information. By that I can add the label array information as well. But if having both x and y information (x being time info), it replaces also the labels with the same (time-) data on x-axis.
[{"id":"3fdcdad.83c5b26","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"76dc8761.387f78","type":"inject","z":"3fdcdad.83c5b26","name":"increment","topic":"increment","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":103,"y":82,"wires":[[]]},{"id":"2c42e356.1c018c","type":"function","z":"3fdcdad.83c5b26","name":"update element in data array ","func":"var data = context.get(\"data\") || [];\nif(data.length === 0 || msg.topic === \"clear\"){\n data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];\n}\nif(msg.topic === \"increment\"){\n var hour = new Date().getHours();\n data[hour] ++;\n}\ncontext.set(\"data\",data);\nmsg.payload = data;\nreturn msg;","outputs":1,"noerr":0,"x":353,"y":102,"wires":[["f2160551.1e8238"]]},{"id":"f2160551.1e8238","type":"function","z":"3fdcdad.83c5b26","name":"format data for chart","func":"var data = msg.payload;\n\nmsg.payload = [{\n \"series\": [ \"X\" ],\n \"data\": [ data ],\n //\"labels\": [ \"00\",\"01\",\"02\",\"03\",\"04\",\"05\",\"06\",\"07\",\"08\",\"09\",\"10\",\"11\",\"12\",\"13\",\"14\",\"15\",\"16\",\"17\",\"18\",\"19\",\"20\",\"21\",\"22\",\"23\"]\n \"labels\": msg.label\n}];\n\nmsg.topic = \"Wind\";\nreturn msg;","outputs":1,"noerr":0,"x":470.1428451538086,"y":177.71428680419922,"wires":[["5ce2a306.0f717c"]]},{"id":"5ce2a306.0f717c","type":"ui_chart","z":"3fdcdad.83c5b26","name":"","group":"36b14f7d.72b","order":0,"width":0,"height":0,"label":"CHART","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":true,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":720.1428184509277,"y":150.5714340209961,"wires":[[]]},{"id":"3e384d22.5b3fe2","type":"inject","z":"3fdcdad.83c5b26","name":"clear","topic":"clear","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":113,"y":122,"wires":[["2c42e356.1c018c"]]},{"id":"dd985f8f.7373a","type":"inject","z":"3fdcdad.83c5b26","name":"Get wind data","topic":"","payload":"{\"cod\":\"200\",\"message\":0,\"cnt\":5,\"list\":[{\"dt\":1582632000,\"main\":{\"temp\":1.8,\"feels_like\":-1.32,\"temp_min\":1.57,\"temp_max\":1.8,\"pressure\":998,\"sea_level\":998,\"grnd_level\":992,\"humidity\":49,\"temp_kf\":0.23},\"weather\":[{\"id\":800,\"main\":\"Clear\",\"description\":\"taivas on selkeä\",\"icon\":\"01d\"}],\"clouds\":{\"all\":0},\"wind\":{\"speed\":0.35,\"deg\":83},\"sys\":{\"pod\":\"d\"},\"dt_txt\":\"2020-02-25 12:00:00\"},{\"dt\":1582642800,\"main\":{\"temp\":-0.64,\"feels_like\":-4.34,\"temp_min\":-0.81,\"temp_max\":-0.64,\"pressure\":997,\"sea_level\":997,\"grnd_level\":991,\"humidity\":62,\"temp_kf\":0.17},\"weather\":[{\"id\":800,\"main\":\"Clear\",\"description\":\"taivas on selkeä\",\"icon\":\"01d\"}],\"clouds\":{\"all\":0},\"wind\":{\"speed\":1.28,\"deg\":140},\"sys\":{\"pod\":\"d\"},\"dt_txt\":\"2020-02-25 15:00:00\"},{\"dt\":1582653600,\"main\":{\"temp\":-1.95,\"feels_like\":-6.12,\"temp_min\":-2.07,\"temp_max\":-1.95,\"pressure\":996,\"sea_level\":996,\"grnd_level\":990,\"humidity\":68,\"temp_kf\":0.12},\"weather\":[{\"id\":802,\"main\":\"Clouds\",\"description\":\"ajoittaisia pilviä\",\"icon\":\"03n\"}],\"clouds\":{\"all\":42},\"wind\":{\"speed\":1.94,\"deg\":83},\"sys\":{\"pod\":\"n\"},\"dt_txt\":\"2020-02-25 18:00:00\"},{\"dt\":1582664400,\"main\":{\"temp\":-1.92,\"feels_like\":-6.82,\"temp_min\":-1.98,\"temp_max\":-1.92,\"pressure\":993,\"sea_level\":993,\"grnd_level\":988,\"humidity\":68,\"temp_kf\":0.06},\"weather\":[{\"id\":804,\"main\":\"Clouds\",\"description\":\"pilvinen\",\"icon\":\"04n\"}],\"clouds\":{\"all\":100},\"wind\":{\"speed\":2.98,\"deg\":70},\"sys\":{\"pod\":\"n\"},\"dt_txt\":\"2020-02-25 21:00:00\"},{\"dt\":1582675200,\"main\":{\"temp\":-1.98,\"feels_like\":-7.66,\"temp_min\":-1.98,\"temp_max\":-1.98,\"pressure\":991,\"sea_level\":991,\"grnd_level\":986,\"humidity\":67,\"temp_kf\":0},\"weather\":[{\"id\":804,\"main\":\"Clouds\",\"description\":\"pilvinen\",\"icon\":\"04n\"}],\"clouds\":{\"all\":100},\"wind\":{\"speed\":4.07,\"deg\":69},\"sys\":{\"pod\":\"n\"},\"dt_txt\":\"2020-02-26 00:00:00\"}],\"city\":{\"id\":660561,\"name\":\"Porvoo\",\"coord\":{\"lat\":60.3923,\"lon\":25.6651},\"country\":\"FI\",\"timezone\":7200,\"sunrise\":1582608643,\"sunset\":1582644640}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":134.28571319580078,"y":284.28570556640625,"wires":[["484668fb.773d48"]]},{"id":"484668fb.773d48","type":"function","z":"3fdcdad.83c5b26","name":"Sort data","func":"var speed = 0.0;\nvar time = \"\";\nvar dataarray = [];\nvar labelarray = [];\n\n\nfor (i=0; i<5; i++){\n speed = msg.payload.list[i].wind.speed;\n time = msg.payload.list[i].dt_txt;\n //dataarray[i] = {\"x\":time,\"y\":speed}; //using this will prevent labels\n dataarray[i] = speed;\n labelarray[i] = msg.payload.list[i].wind.deg;\n}\n\nmsg.payload = dataarray;\nmsg.label = labelarray;\n\n\nreturn msg;\n","outputs":1,"noerr":0,"x":392.2222557067871,"y":278.5714282989502,"wires":[["f2160551.1e8238"]]},{"id":"36b14f7d.72b","type":"ui_group","z":"","name":"Default","tab":"f03a0560.6154a8","disp":true,"width":"12","collapse":false},{"id":"f03a0560.6154a8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
The problem I have is that if you point the line with the mouse, it shows in popup the value, but unfortunately it picks the label value and converts that to ms, I suppose. That information may confuse the user. It would be fine to show the wind direction in the popup as well, or even only there but don't know how.
Am I doing something wrong? Could you propose a better way to have independent x-axis labels which wouldn't interfere with popup values?
Thanks!
