Creating a Sankey Diagram using
JavaScript
Using AmCharts
HMTL
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sankey Diagram</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>
Author: Pranav Thakkar
</br>
<a href="mailto:thakkarpranav@yahoo.com?Subject=Hello%20ForSankeyDiagram"
target="_top">thakkarpranav@yahoo.com</a>
</br>
<a href="mailto:pranavthakkar@pranavthakkar.com?Subject=Hello%20ForSankeyDiagram"
target="_top">pranavthakkar@pranavthakkar.com</a>
</p>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<script src="./script.js"></script>
</body>
</html>
Pranav Thakkar – Jan 2020 1
CREATING A SANKEY DIAGRAM USING JAVASCRIPT
Using AmCharts
JAVASCRIPT
//Author: Pranav Thakkar
//thakkarpranav@yahoo.com
//pranavthakkar@pranavthakkar.com
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = [
{ from: "Boiler 9", to: "750#", value: 10 },
{ from: "Boiler 10", to: "750#", value: 8 },
{ from: "Boiler 11", to: "G", value: 4 },
{ from: "1B505", to: "750#", value: 4 },
{ from: "1B506", to: "750#", value: 50 },
{ from: "C", to: "750#", value: 3 },
{ from: "D", to: "G", value: 5 },
{ from: "D", to: "I", value: 2 },
{ from: "D", to: "H", value: 3 },
{ from: "E", to: "H", value: 6 },
{ from: "G", to: "J", value: 5 },
{ from: "I", to: "J", value: 1 },
{ from: "H", to: "J", value: 9 }
];
let hoverState = chart.links.template.states.create("hover");
hoverState.properties.fillOpacity = 0.6;
chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";
// for right-most label to fit
chart.paddingRight = 30;
chart.paddingTop = 90;
chart.paddingBottom = 90;
// make nodes draggable
var nodeTemplate = chart.nodes.template;
Report Date 2
CREATING A SANKEY DIAGRAM USING JAVASCRIPT
Using AmCharts
nodeTemplate.inert = true;
nodeTemplate.readerTitle = "Drag me!";
nodeTemplate.showSystemTooltip = true;
nodeTemplate.width = 20;
// make nodes draggable
var nodeTemplate = chart.nodes.template;
nodeTemplate.readerTitle = "Click to show/hide or drag to rearrange";
nodeTemplate.showSystemTooltip = true;
nodeTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer
//export
chart.exporting.menu = new am4core.ExportMenu();
Report Date 3
CREATING A SANKEY DIAGRAM USING JAVASCRIPT
Using AmCharts
CSS
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px
}
Report Date 4