Line chart not display after switch to bar and back to line

Dashboard
1

Hi,

I am new here and I have here a poject with sensor data´s what I display in a chart node. Thats work great but I display the data for one day as line chart and the week/month/year in a bar chart (data summery).

The default view is line chart and when i will change to bar I must press 2 times of the bar button to display the bar´s. Ok, that is not the problem. The workaround is I send 2 times the data information to the chart (node.send before return msg).

But the big problem is that i can not change back from bar to line. I see the line chart for milliseconds but than is the chart empty and I can display only the bar´s.

I have here a test flow to demonstrate the problem. I hope someone can me help. Big thanks.

[{"id":"fab6ba27.60d1e8","type":"ui_button","z":"2b13e84e.a17d5","name":"","group":"d3f45d80.19c25","order":1,"width":"4","height":"1","passthru":false,"label":"Line Chart","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"linechart","x":360,"y":120,"wires":[["672b743e.e8c374"]]},{"id":"ac4b0f8c.bf071","type":"ui_button","z":"2b13e84e.a17d5","name":"","group":"d3f45d80.19c25","order":2,"width":"4","height":"1","passthru":false,"label":"Bar Chart","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"barchart","x":350,"y":200,"wires":[["672b743e.e8c374"]]},{"id":"672b743e.e8c374","type":"function","z":"2b13e84e.a17d5","name":"","func":"var msg2 = {};\nvar chart = [];\n\nif (msg.topic === \"linechart\") {\n    chart = [{\n                \"series\": [\"A\", \"B\", \"C\"],\n                \"data\": [\n                            [{ \"x\": 1504029632890, \"y\": 5 },\n                             { \"x\": 1504029636001, \"y\": 4 },\n                             { \"x\": 1504029638656, \"y\": 2 }\n                            ],\n                            [{ \"x\": 1504029633514, \"y\": 6 },\n                             { \"x\": 1504029636622, \"y\": 7 },\n                             { \"x\": 1504029639539, \"y\": 6 }\n                            ],\n                            [{ \"x\": 1504029634400, \"y\": 7 },\n                             { \"x\": 1504029637959, \"y\": 7 },\n                             { \"x\": 1504029640317, \"y\": 7 }\n                            ]\n                        ],\n                \"labels\": [\"\"]\n            }];\n    msg2.payload = chart;\n    msg2.ui_control = {\"look\": \"line\", \"legend\": false, \"interpolate\": \"linear\", \"xformat\": \"dd HH:mm\", \"colors\":['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFFFFF', '#000000', '#000000']};\n\n    \n} else {\n    chart = [{\n                \"series\": [\"X\", \"Y\", \"Z\" ],\n                \"data\": [ [5,6,9,10], [3,8,5,11], [6,7,2,12] ],\n                \"labels\": [ \"Jan\", \"Feb\", \"Mar\", \"Apr\" ]\n            }];\n    msg2.payload = chart;\n    msg2.ui_control = {\"look\": \"bar\", \"legend\": true, options: { scales: { xAxes: [{stacked: false}], yAxes: [{stacked: false}] } }, \"colors\":['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFFFFF', '#000000', '#000000']};\n}\n\nreturn msg2;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":670,"y":180,"wires":[["85343536.a61a6","218f2c02.82c46c"]]},{"id":"85343536.a61a6","type":"ui_chart","z":"2b13e84e.a17d5","name":"","group":"d3f45d80.19c25","order":2,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":880,"y":180,"wires":[["a90ba68.e4029d8"]]},{"id":"a90ba68.e4029d8","type":"debug","z":"2b13e84e.a17d5","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1160,"y":180,"wires":[]},{"id":"218f2c02.82c46c","type":"debug","z":"2b13e84e.a17d5","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":880,"y":260,"wires":[]},{"id":"d3f45d80.19c25","type":"ui_group","name":"Group 1","tab":"2cec688c.1d16d","order":1,"disp":true,"width":"24","collapse":false},{"id":"2cec688c.1d16d","type":"ui_tab","name":"Test","icon":"dashboard","order":6,"disabled":false,"hidden":false}]
2

Welcome to the forum @Torakas.

There are two issues.

The reason it won't go back to the line is that the line chart does not like having the options that you have specified for the bar chart. The solution to that is to add options: {} to the ui_control object that you send to the line chart, to reset the options that you set when you set it to a bar.

As to why you have to send two messages then it seems it is not possible to change the chart type and send the chart the data in the same message. The solution is first to send a message with a payload containing an empty array, and setting the chart parameters with the ui_control property, then send another message with the chart data. This works for me in the function node

var msg2 = {};
var chart = [];

if (msg.topic === "linechart") {
    chart = [{
                "series": ["A", "B", "C"],
                "data": [
                            [{ "x": 1504029632890, "y": 5 },
                             { "x": 1504029636001, "y": 4 },
                             { "x": 1504029638656, "y": 2 }
                            ],
                            [{ "x": 1504029633514, "y": 6 },
                             { "x": 1504029636622, "y": 7 },
                             { "x": 1504029639539, "y": 6 }
                            ],
                            [{ "x": 1504029634400, "y": 7 },
                             { "x": 1504029637959, "y": 7 },
                             { "x": 1504029640317, "y": 7 }
                            ]
                        ],
                "labels": [""]
            }];
    msg2.payload = chart;
    node.send({payload: [],ui_control: {"look": "line", "legend": false, "interpolate": "linear", "xformat": "dd HH:mm", "colors":['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFFFFF', '#000000', '#000000'], options: {}}});

    
} else {
    chart = [{
                "series": ["X", "Y", "Z" ],
                "data": [ [5,6,9,10], [3,8,5,11], [6,7,2,12] ],
                "labels": [ "Jan", "Feb", "Mar", "Apr" ]
            }];
    msg2.payload = chart;
    node.send({payload: [], ui_control: {"look": "bar", "legend": true, options: { scales: { xAxes: [{stacked: false}], yAxes: [{stacked: false}] } }, "colors":['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFFFFF', '#000000', '#000000']}});
}

return msg2;

A minor point is that it is considered good practise to modify the message passed in rather than making a new message, so rather than creating msg2 and setting its payload to the chart data I would set msg.payload to the chart data and return msg.

3

Thanks @Colin, thats has help.

4

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