Scribd
Upload
147 views4 pages

JavaScript Sankey Diagram Guide

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
Copyright
© © All Rights Reserved
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
147 views4 pages

JavaScript Sankey Diagram Guide

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
Copyright
© © All Rights Reserved
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="./[Link]">

</head>

<body>
<p>
Author: Pranav Thakkar
</br>
<a href="[Link]
target="_top">thakkarpranav@[Link]</a>
</br>
<a href="[Link]
target="_top">pranavthakkar@[Link]</a>
</p>

<script src="[Link]
<script src="[Link]
<script src="[Link]

<div id="chartdiv"></div>

<script src="./[Link]"></script>

</body>

</html>

Pranav Thakkar – Jan 2020 1


CREATING A SANKEY DIAGRAM USING JAVASCRIPT
Using AmCharts

JAVASCRIPT
//Author: Pranav Thakkar
//thakkarpranav@[Link]
//pranavthakkar@[Link]

/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* [Link]
*
* Documentation is available at:
* [Link]
* ---------------------------------------
*/

// Themes begin
[Link](am4themes_animated);
// Themes end

var chart = [Link]("chartdiv", [Link]);


[Link] = 0; // this creates initial fade-in

[Link] = [
{ 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 = [Link]("hover");


[Link] = 0.6;

[Link] = "from";
[Link] = "to";
[Link] = "value";

// for right-most label to fit


[Link] = 30;
[Link] = 90;
[Link] = 90;

// make nodes draggable


var nodeTemplate = [Link];

Report Date 2
CREATING A SANKEY DIAGRAM USING JAVASCRIPT
Using AmCharts

[Link] = true;
[Link] = "Drag me!";
[Link] = true;
[Link] = 20;

// make nodes draggable


var nodeTemplate = [Link];
[Link] = "Click to show/hide or drag to rearrange";
[Link] = true;
[Link] = [Link]

//export
[Link] = new [Link]();

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

You might also like