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

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

90 views

Creating A Sankey Diagram Using JavaScript

Uploaded by

Pranav Thakkar

We take content rights seriously. If you suspect this is your content, claim it here.

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: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>

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