Plotly - example charts

I've been playing with Plotly for a few days, and have received a lot of kind support from @bakman2, so would like to share what I've got so far, in case anyone else is interested.
The complete flow as attached below.

The usual way to install a 3rd party script/library is to create a static folder, install & run the script/library from there. However, in these examples there is no need to do this, as plotly.js is being loaded using a CDN and a ui-template node.

flow

In all 3 examples, the chart data is formed from an object of arrays, comprising of the x & y data values, such as {"x":["Saturday","Sunday","Monday"],"y":["58.6","65.7","43"]}.
For the chart to fill the dashboard element size, data must to be injected into the chart, otherwise the chart will be collapsed.

Example 1 is a simple static line chart, in which I've disabled interactivity (incl zoom & pan) to make it easier use on a phone. To do this, I added { displayModeBar: false }, { staticPlot: true }, { displaylogo: false } to the Plotly.newPlot command.

Example 2 has been structured to be a Bar chart, by adding type: 'bar', to the data section. Again, this is also a static chart.

Example 3 is an interactive chart, which has a modal toolbar top right, to zoom, pan, change the scaling etc. (it can also be 'pinched' & 'double tapped' on a phone/tablet)
I've also introduced an additional datasource - windspeed & windgusts, and placed them on 2 different axis (left & right).
Finally, I've formatted the left axis data to be a Bar chart. whilst the right axis data is a dashed line.

If you look through the respective ui_template node's code, you can see what I've added/removed to change the layouts, to build up how the data is presented.
To find out more about the plethora of layout functions, have a look at plotly.com.

(Not wishing to insult your intelligence... but) I found the easiest way to shortcut the very lengthy plotly documentation (which covers both javascript & Python) is to simply google search, prefacing the search with plotly javascript, so for example plotly javascript bar chart.

[{"id":"5e0d9a67.116c84","type":"ui_template","z":"a444a9ff.e7a408","group":"2e16cb22.999174","name":"Load Plotly CDN","order":17,"width":0,"height":0,"format":"<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":580,"y":3120,"wires":[[]]},{"id":"1ca80c56.a7c7d4","type":"comment","z":"a444a9ff.e7a408","name":"Plotly example flows","info":"","x":150,"y":3120,"wires":[]},{"id":"c5db9e69.e34e5","type":"inject","z":"a444a9ff.e7a408","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"str","x":130,"y":3200,"wires":[["a230896e.9204c8"]]},{"id":"a230896e.9204c8","type":"change","z":"a444a9ff.e7a408","name":"World temperatures - bar chart","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"x\":[\"London\",\"Canberra\",\"Paris\",\"Vienna\",\"Dhaka\",\"Brussels\",\"Sofia\",\"Ottawa\"],\"y\":[\"58.6\",\"65.7\",\"43\",\"48\",\"73.4\",\"53.5\",\"67.1\",\"38.9\"]}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":3200,"wires":[["75a92564.21e79c"]]},{"id":"75a92564.21e79c","type":"ui_template","z":"a444a9ff.e7a408","group":"6aa20356.9b59bc","name":"Example 2","order":2,"width":16,"height":8,"format":"<div id=\"example2\"></div>\n<script>\n\n// Initialize chart\nvar data = [{x:[0],y:[0]}];\nvar layout = {\n    title:'Awaiting data',\n    };\nPlotly.newPlot('example2', data, layout);\n\n// Update data & layout\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n       \n    var data = [{\n        x:msg.payload.x,\n        y:msg.payload.y,\n        type: 'bar',\n        connectgaps: true\n        }];\n        \n    var layout = {\n        title: \"World Temperatures (2)\",\n        titlefont: {\n            size: 22,\n            },\n        autosize: true,\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff',\n        'xaxis': {\n           title: 'Location',\n            fixedrange: true\n            },\n        'yaxis': {\n            title: 'Temperature °F',\n            fixedrange: true\n            }\n        };\n\n    Plotly.newPlot('example2', data, layout, { displayModeBar: false }, { staticPlot: true }, { displaylogo: false },)\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":3200,"wires":[[]]},{"id":"10ba8dc7.179372","type":"change","z":"a444a9ff.e7a408","name":"wind/gusts twin axis line chart","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"wind\":[\"20.2\",\"19.1\",\"15.0\",\"12.9\",\"9.8\",\"7.6\",\"6.5\",\"6.4\",\"6.2\",\"6.1\",\"6.0\",\"5.8\",\"5.7\",\"8.6\",\"12.5\",\"18.5\",\"24.5\",\"27.5\",\"28.5\",\"28\"],\"gust\":[\"27.3\",\"24.4\",\"22.5\",\"18.4\",\"17.4\",\"15.3\",\"13.2\",\"11.2\",\"9.1\",\"8.0\",\"8.0\",\"11.9\",\"13.8\",\"15.8\",\"17.7\",\"20.6\",\"24.5\",\"28.4\",\"30.3\",\"31.2\"],\"time\":[\"2020-07-24 16:49:29\",\"2020-07-24 16:59:29\",\"2020-07-24 17:09:29\",\"2020-07-24 17:19:29\",\"2020-07-24 17:29:29\",\"2020-07-24 17:39:29\",\"2020-07-24 17:49:29\",\"2020-07-24 17:59:29\",\"2020-07-24 18:09:29\",\"2020-07-24 18:19:29\",\"2020-07-24 18:29:29\",\"2020-07-24 18:39:29\",\"2020-07-24 18:49:29\",\"2020-07-24 18:59:29\",\"2020-07-24 19:09:29\",\"2020-07-24 19:19:29\",\"2020-07-24 19:29:29\",\"2020-07-24 19:39:29\",\"2020-07-24 19:49:29\",\"2020-07-24 19:59:29\"]}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":3240,"wires":[["15fd89a9.5f48a6"]]},{"id":"32886b1c.7c3c64","type":"inject","z":"a444a9ff.e7a408","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"str","x":130,"y":3240,"wires":[["10ba8dc7.179372"]]},{"id":"66e905d7.65d2bc","type":"inject","z":"a444a9ff.e7a408","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"str","x":130,"y":3160,"wires":[["324422cd.18882e"]]},{"id":"324422cd.18882e","type":"change","z":"a444a9ff.e7a408","name":"UK Temperature - line chart","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"x\":[\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"],\"y\":[\"4.6\",\"4.9\",\"9.3\",\"14.2\",\"17.4\",\"19.3\",\"20.8\",\"21.6\",\"19.2\",\"14.3\",\"9.8\",\"6.3\"]}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":3160,"wires":[["2e5762f6.c687fe"]]},{"id":"2e5762f6.c687fe","type":"ui_template","z":"a444a9ff.e7a408","group":"6aa20356.9b59bc","name":"Example 1","order":1,"width":16,"height":8,"format":"<div id=\"example1\"></div>\n<script>\n\n// Initialize chart\nvar data = [{x:[0],y:[0]}];\nvar layout = {\n    title:'Awaiting data',\n    };\nPlotly.newPlot('example1', data, layout);\n\n// Update data & layout\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n       \n    var data = [{\n        x:msg.payload.x,\n        y:msg.payload.y,\n        connectgaps: true\n        }];\n\n    var layout = {\n        title: \"Monthly UK Temperatures (1)\",\n        titlefont: {\n            size: 22,\n            },\n        autosize: true,\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff',\n        'xaxis': {\n            title: 'Month',\n            fixedrange: true\n            },\n        'yaxis': {\n            title: 'Average Temperature °C',\n            mode: 'lines',\n            fixedrange: true\n            }\n        };\n\n    Plotly.newPlot('example1', data, layout, { displayModeBar: false }, { staticPlot: true }, { displaylogo: false },)\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":3160,"wires":[[]]},{"id":"15fd89a9.5f48a6","type":"ui_template","z":"a444a9ff.e7a408","group":"6aa20356.9b59bc","name":"Example 3","order":3,"width":16,"height":8,"format":"<div id=\"example3\"></div>\n<script>\n\n// Initialize chart\nvar layout = {\n    title:'Awaiting data',\n    };\nvar data = [{x:[0],y:[0]}];\nPlotly.newPlot('example3', data, layout);\n\n// Update data & layout\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        \n    var winddata = {\n        x:msg.payload.time,\n        y:msg.payload.wind,\n        name: 'wind-speed',\n        type: 'bar',\n        marker: {\n            color: '#8080ff',\n            opacity: 0.7,\n            line:   {\n            color: '#0033cc',\n            width: 1.5\n                    }\n                },\n        connectgaps: true\n     };\n     \n    var gustdata = {\n        x:msg.payload.time,\n        y:msg.payload.gust,\n        name: 'wind-gust',\n        mode: 'lines',\n        line: {\n           dash: 'dashdot',\n           color: '#ff0000'\n            },\n        yaxis: 'y2',\n        connectgaps: true\n     };\n\nvar data = [gustdata,winddata];\n\n    var layout = {\n    title: 'Windspeed & Gust data (3)',\n    titlefont: {\n        size: 22,\n        },\n    showlegend: false,\n    plot_bgcolor: '#ffffff',\n    paper_bgcolor: '#ffffff',\n    'yaxis': {\n        title: 'Windspeed mph',\n        range: [0, 35],\n        color: '#0000ff'\n        },\n    'yaxis2': {\n        title: 'WindGusts mph',\n        range: [0, 35],\n        color: '#ff0000',\n        overlaying: 'y',\n        side: 'right'\n        },\n    'xaxis': {\n        title: 'Time recorded',\n       'tickformat': '%X'\n        }\n    };\n\n      console.log(data,layout)\n      Plotly.newPlot('example3', data, layout, { modeBarButtonsToRemove: ['toImage','toggleSpikelines'], displaylogo: false})\n     };\n  });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":3240,"wires":[[]]},{"id":"2e16cb22.999174","type":"ui_group","z":"","name":"Chart","tab":"567d8fae.98148","order":1,"disp":false,"width":"10","collapse":false},{"id":"6aa20356.9b59bc","type":"ui_group","z":"","name":"examples","tab":"d5ad8b85.f5ba18","order":1,"disp":true,"width":16,"collapse":false},{"id":"567d8fae.98148","type":"ui_tab","z":"","name":"Realtime Power","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","z":"","name":"Plotly","icon":"dashboard","disabled":false,"hidden":false}]

EDIT 27/7 - Improved initialization of chart

9 Likes

I'm leaving this placeholder post, as I hopefully will also add some realtime chart examples here.

Great example - just what I've been searching for for many days.

Thanks

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