nodered 차트 마우스 팁값 변경하기

Mouse위치에 툴팁 커스트마이징!

 

 

 

핵심1  format data for chart

var data = msg.payload;

msg.payload = [{
    "series": [ "X" ],
    "data": [ data ],
    //"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"]
    "labels": msg.label
}];

msg.topic = "Wind";
return msg;

이것을 합쳐서 테이블을 생성하게됩니다.

Sort data

var speed = 0.0;
var time = "";
var dataarray = [];
var labelarray = [];


for (i=0; i<5; i++){
  speed = msg.payload.list[i].wind.speed;
  time = msg.payload.list[i].dt_txt;
  //dataarray[i] = {"x":time,"y":speed}; //using this will prevent labels
  dataarray[i] = speed;
  labelarray[i] = msg.payload.list[i].wind.deg;
}

msg.payload = dataarray;
msg.label = labelarray;


return msg;

 

 

 

전체소스

[{"id":"3fdcdad.83c5b26","type":"tab","label":"Flow 4 chartExam","disabled":false,"info":""},{"id":"76dc8761.387f78","type":"inject","z":"3fdcdad.83c5b26","name":"increment","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"increment","payload":"","payloadType":"date","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,"initialize":"","finalize":"","libs":[],"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,"initialize":"","finalize":"","libs":[],"x":556.1428527832031,"y":218.71427536010742,"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,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":755.1428146362305,"y":142.57141494750977,"wires":[[]]},{"id":"3e384d22.5b3fe2","type":"inject","z":"3fdcdad.83c5b26","name":"clear","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"clear","payload":"","payloadType":"date","x":113,"y":122,"wires":[["2c42e356.1c018c"]]},{"id":"dd985f8f.7373a","type":"inject","z":"3fdcdad.83c5b26","name":"Get wind data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"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","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,"initialize":"","finalize":"","libs":[],"x":370.2222595214844,"y":283.5714282989502,"wires":[["f2160551.1e8238"]]},{"id":"36b14f7d.72b","type":"ui_group","name":"Default","tab":"f03a0560.6154a8","order":1,"disp":true,"width":"12","collapse":false},{"id":"f03a0560.6154a8","type":"ui_tab","name":"Home","icon":"dashboard"}]