AnyChart Sankey sample

by andypotanin

HTML

<script src="//cdn.anychart.com/js/7.10.1/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script>

<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" />

<div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

anychart.onDocumentReady(function(){
 //creating the data
 var data = [
 {from: "France", to: "Canada", weight: 3000},
 {from: "France", to: "Germany", weight: 2000},
 {from: "France", to: "South Africa", weight: 1100},
 {from: "France", to: "Portugal", weight: 900},
 {from: "US", to: "China", weight: 2200},
 {from: "US", to: "Canada", weight: 400},
 {from: "US", to: "Germany", weight: 700},
 {from: "US", to: "Portugal", weight: 200},
 {from: "Canada", to: "China", weight: 1500},
 {from: "Canada", to: "Japan", weight: 3300},
 {from: "Canada", to: "England", weight: 550},
 {from: "Germany", to: "China", weight: 1100},
 {from: "Germany", to: "Japan", weight: 750},
 {from: "Germany", to: "England", weight: 400},
 {from: "South Africa", to: "China", weight: 3100},
 {from: "Portugal", to: "China", weight: 2100},
 {from: "Portugal", to: "Japan", weight: 1600}
 ];
//calling the Sankey function
var sankey_chart = anychart.sankey(data);
//customizing the width of the nodes
sankey_chart.nodeWidth("20%");
//setting the chart title
sankey_chart.title("Simple Sankey Diagram Example");
//customizing the vertical padding of the nodes
sankey_chart.nodePadding(20);
//setting the container id
sankey_chart.container("container");
//initiating drawing the Sankey diagram
sankey_chart.draw();
});