Dear All,
Hope you are doing well
Anybody have reference for creating Sankey chart in node-red ?
or maybe there are some tutorial for different type of chart visualization in node-red.
Thank you
Dear All,
Hope you are doing well
Anybody have reference for creating Sankey chart in node-red ?
or maybe there are some tutorial for different type of chart visualization in node-red.
Thank you
Advanced charts can be made using external charting libraries, for Sankey may be the Plotly is reasonable choice. Sankey Diagrams | JavaScript | Plotly
Here's the basics how it can be done using the ui_template
node.
[{"id":"60fc1dbf.2e7ea4","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"sankey example","order":9,"width":"15","height":"11","format":"<style>\n#plot{\n display: flex;\n justify-content: center;\n}\n</style>\n\n<div id=\"plot\"></div>\n\n<script>\nsetTimeout(function(){ \n d3.json('https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/sankey_energy_dark.json', function(fig){\n\n var data = {\n type: \"sankey\",\n domain: {\n x: [0,1],\n y: [0,1]\n },\n orientation: \"h\",\n valueformat: \".0f\",\n valuesuffix: \"TWh\",\n node: {\n pad: 15,\n thickness: 15,\n line: {\n color: \"black\",\n width: 0.5\n },\n label: fig.data[0].node.label,\n color: fig.data[0].node.color\n },\n link: {\n source: fig.data[0].link.source,\n target: fig.data[0].link.target,\n value: fig.data[0].link.value,\n label: fig.data[0].link.label\n }\n }\n \n var data = [data]\n \n var layout = {\n title: \"Energy forecast for 2050\",\n width: 780,\n height: 580,\n font: {\n size: 10,\n color: 'white'\n },\n plot_bgcolor: 'black',\n paper_bgcolor: 'black'\n }\n \n Plotly.newPlot('plot', data, layout)\n });\n}, 300);\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":300,"y":180,"wires":[[]]},{"id":"d6182ec3.536c","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"load plotly","order":10,"width":0,"height":0,"format":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly.min.js\" integrity=\"sha512-V0j9LhrK9IMNdFYZqh+IqU4cjo7wdxyHNyH+L0td4HryBuZ7Oq6QxP2/CWr6TituX31+gv5PnolvERuTbz8UNA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":290,"y":140,"wires":[[]]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"15","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
It will probably be possible using node-red-node-ui-vega (node) - Node-RED - Vega supports lots of different graph types.
Unfortunately I can't give you a working example.
Although this example shows a Sankey graph generated in vega - so you may be able to piece together what's needed... Sankey diagram with vega.js - bl.ocks.org
Thank you @knolleary and @hotNipi for your reference, I will explore and test it first.
Will be back after get result.
Appreciate your support
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.