Sankey chart in node-red

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

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}]
1 Like

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.