Creating A Sankey Diagram Using JavaScript

This document describes how to create a Sankey diagram using JavaScript and the AmCharts library. It includes the HTML, JavaScript, and CSS code needed to generate a basic Sankey diagram with nodes that can be dragged and links that change opacity on hover. AmCharts is used to render the chart, which is displayed inside a <div> element. The data, node properties, and interactivity are configured through the JavaScript.

Uploaded by

Pranav Thakkar

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

88 views

Creating A Sankey Diagram Using JavaScript

Uploaded by

Pranav Thakkar

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 4

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:[email protected]?Subject=Hello%20ForSankeyDiagram"
target="_top">[email protected]</a>
</br>
<a href="mailto:[email protected]?Subject=Hello%20ForSankeyDiagram"
target="_top">[email protected]</a>
</p>

</body>

</html>

Pranav Thakkar – Jan 2020 1

CREATING A SANKEY DIAGRAM USING JAVASCRIPT
Using AmCharts

JAVASCRIPT
//Author: Pranav Thakkar
//[email protected]
//[email protected]

/**
* ---------------------------------------
* 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 {