Sankey chart in node-red

Dashboard
1

Dear All,

Hope you are doing well :slight_smile:
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

2

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}]
3

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

4

Thank you @knolleary and @hotNipi for your reference, I will explore and test it first.

Will be back after get result.

Appreciate your support