- Chart Gallery
- Sankey Diagram
- Energy Flow Chart
Energy Flow Chart
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "sankey",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Energy Flows (TWh/y)",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 40,
"top": 20,
"bottom": 20,
"right": 80
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"data": [
[
"Hydro",
"Electricity grid",
5
],
[
"Coal reserves",
"Coal",
64
],
[
"Coal imports",
"Coal",
31
],
[
"Gas reserves",
"Natural Gas",
82
],
[
"Gas imports",
"Natural Gas",
2034
],
[
"Oil reserves",
"Oil",
108
],
[
"Oil imports",
"Oil",
772
],
[
"Land based bioenergy",
"Bio-conversion",
18
],
[
"Agricultural \"waste\"",
"Bio-conversion",
37
],
[
"Other waste",
"Bio-conversion",
40
],
[
"Coal",
"Solid",
95
],
[
"Other waste",
"Solid",
14
],
[
"Bio-conversion",
"Solid",
30
],
[
"Natural Gas",
"Gas",
2117
],
[
"Bio-conversion",
"Gas",
40
],
[
"Oil",
"Liquid",
880
],
[
"Bio-conversion",
"Liquid",
8
],
[
"Bio-conversion",
null,
18
],
[
"Solid",
"Thermal generation",
33
],
[
"Solid",
"Industry",
106
],
[
"Gas",
"Thermal generation",
1153
],
[
"Gas",
"Heating and cooling (homes)",
518
],
[
"Gas",
"Heating and cooling (commercial)",
141
],
[
"Gas",
"Lighting & appliances (homes)",
8
],
[
"Gas",
"Lighting & appliances (commercial)",
9
],
[
"Gas",
"Industry",
301
],
[
"Gas",
"Agriculture",
2
],
[
"Gas",
null,
24
],
[
"Liquid",
"Industry",
199
],
[
"Liquid",
"Road transport",
322
],
[
"Liquid",
"Rail transport",
7
],
[
"Liquid",
"Domestic aviation",
15
],
[
"Liquid",
"International aviation",
189
],
[
"Liquid",
"National navigation",
22
],
[
"Liquid",
"International shipping",
130
],
[
"Liquid",
"Agriculture",
4
],
[
"Thermal generation",
"Electricity grid",
576
],
[
"Thermal generation",
"District heating",
16
],
[
"Thermal generation",
null,
593
],
[
"Electricity grid",
"Heating and cooling (homes)",
61
],
[
"Electricity grid",
"Heating and cooling (commercial)",
31
],
[
"Electricity grid",
"Lighting & appliances (homes)",
103
],
[
"Electricity grid",
"Lighting & appliances (commercial)",
92
],
[
"Electricity grid",
"Industry",
228
],
[
"Electricity grid",
"Road transport",
14
],
[
"Electricity grid",
"Rail transport",
7
],
[
"Electricity grid",
"Agriculture",
4
],
[
"Electricity grid",
null,
41
],
[
"District heating",
"Industry",
16
]
],
"palette": {
"type": "distinct",
"items": [
"#64b5f6",
"#1976d2",
"#ef6c00",
"#ffd54f",
"#455a64",
"#96a6a6",
"#dd2c00",
"#00838f",
"#00bfa5",
"#ffa000"
]
},
"dropoff": {
"tooltip": {
"enabled": false
},
"normal": {
"fill": {
"keys": [
{
"offset": 0,
"color": "red"
},
{
"offset": 1,
"color": "white"
}
],
"angle": -90,
"mode": false,
"opacity": 1
},
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": false
}
},
"hovered": {
"labels": {
"enabled": true
}
}
},
"flow": {
"tooltip": {
"enabled": false
},
"normal": {
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": false
}
},
"hovered": {
"labels": {
"enabled": true
}
}
},
"node": {
"tooltip": {
"useHtml": true,
"anchor": "center-bottom"
},
"normal": {
"stroke": "none",
"labels": {
"zIndex": 3,
"enabled": true,
"useHtml": true,
"position": "center-top",
"anchor": "center-bottom"
}
},
"hovered": {
"labels": {}
}
},
"nodeWidth": 50,
"nodePadding": 30,
"curveFactor": 0.2
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/sankey-diagram/energy-flow-chart/data.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.anychart-tooltip {
font-size: 0.6em;
background: #fff;
color: #333;
box-shadow: 0 0 5px #333;
padding: 20px;
}
.anychart-tooltip h5 {
margin: 0 0 5px;
}
.anychart-tooltip ul {
margin: 0 0 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create sankey chart
var chart = anychart.sankey();
// set title for chart
chart.title('Energy Flows (TWh/y)');
// set chart's data
chart.data(getData());
// set chart's padding
chart.padding(20, 80, 20, 40);
// set chart's flows curvature
chart.curveFactor(0.2);
// set chart's node width
chart.nodeWidth(50);
// set chart's node padding
chart.nodePadding(30);
// set node's label position
chart
.node()
.normal()
.labels()
.anchor('center-bottom')
.position('center-top');
// set tooltips position for node
chart.node().tooltip().anchor('center-bottom');
// disable tooltips for flows and dropoffs
chart.flow().tooltip().enabled(false);
chart.dropoff().tooltip().enabled(false);
// enable HTML-mode for node's tooltip and set formatter for it
chart
.node()
.tooltip()
.useHtml(true)
.format(function () {
var tooltip = '';
var i;
var ul;
var income;
var outcome;
var conflict;
if (this.income.length) {
income = 0;
ul = '<ul>';
for (i = 0; i < this.income.length; i++) {
ul +=
'<li>' +
this.income[i].name +
': ' +
this.income[i].value +
'</li>';
income += this.income[i].value;
}
ul += '</ul>';
tooltip += '<h5>Income(' + income + '):</h5>' + ul;
}
if (this.outcome.length) {
outcome = 0;
ul = '<ul>';
for (i = 0; i < this.outcome.length; i++) {
ul +=
'<li>' +
this.outcome[i].name +
': ' +
this.outcome[i].value +
'</li>';
outcome += this.outcome[i].value;
}
ul += '</ul>';
tooltip += '<h5>Outcome(' + outcome + '):</h5>' + ul;
}
if (this.dropoff > 0) {
tooltip += '<h5>Dropoff: ' + this.dropoff + '</h5>';
}
if (this.isConflict) {
if (income > outcome + this.dropoff) {
conflict = income - (outcome + this.dropoff);
tooltip +=
'<h5>Conflict:</h5><ul><li> income is greater than outcome by ' +
conflict +
'</li></ul>';
} else {
conflict = outcome + this.dropoff - income;
tooltip +=
'<h5>Conflict:</h5><ul><li>outcome is greater than income by ' +
conflict +
'</li></ul>';
}
}
return tooltip;
});
// set node's label formatter
chart
.node()
.labels()
.useHtml(true)
.format(function () {
if (this.isConflict) {
return '<b style="color: red">' + this.name + '</b>';
}
return this.name;
});
// Set flow's normal and hovered fill
chart.flow({
normal: {
fill: function () {
return anychart.color.lighten(this.sourceColor, 0.5) + ' ' + 0.3;
}
},
hovered: {
fill: function () {
return this.sourceColor + ' ' + 0.9;
}
}
});
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
This is an energy flow chart. Each box on the right is a way we use energy. Each box on the left is a place we get energy. In between are the changes the energy goes through. The height of each line is proportional to the amount of energy