Google Charts - Sankey
f the example found here - https://developers.google.com/chart/interactive/docs/gallery/sankey.
by dfederighi
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="sankey_basic" style="width: 800px; height: 300px;"></div>
JavaScript
google.load('visualization', '1.1', {packages: ['sankey']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {html: true}});
data.addRows([
[ 'A', 'X', 5, 'Generate this dynamically'],
[ 'A', 'Y', 7, '... and this ...'],
[ 'A', 'Z', 6, '... and so on ...'],
[ 'B', 'X', 2, '... and so on ...'],
[ 'B', 'Y', 9, '...'],
[ 'B', 'Z', 4, '...'],
[ 'A', 'D', 6, '...']
]);
// Sets chart options.
var options = {
width: 'auto',
tooltip: {
isHtml: true,
textStyle: {
color: '#666'
},
showColorCode: true
},
sankey: {
node: {
interactivity: true,
// node colors will cycle thru array
colors: [
'red',
'orange',
'yellow',
'green',
'blue',
'violet'
],
label: {
fontSize: 14,
color: '#000',
bold: true,
italic: true
}
},
link: {
interactivity: true,
colorMode: 'none'
}
}
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
google.visualization.events.addListener(chart, 'select', function() {
var sel = chart.getSelection();
console.log('selection:', data.getValue(sel[0].row, 0), data.getValue(sel[0].row, 1));
});
chart.draw(data, options);
}