JSFiddle - React, Tailwind, and code Playground

by nickdunbar

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    
</script>
<body>
    <div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
  </body>
</html>

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', 'Revenues');
    data.addRows([
       [ 'Fred','Ann',107.91],
		['Bill','Ann',47.86],
		['Carol','Ann',817.9],
		['Jim','Kevin',400],
		['Ann','Kevin',973.67],
		['Sally','Kevin',146.47],
		['Kevin','EVP Sales',1520.14]
        ]);

    // Set chart options
    var options = {
      width: 500,
      height: 300,
        formatNumber: '$### bn',
        sankey: {
		iterations: 64,
		node: {
		pattern: '$### bn', nodePadding: 30, interactivity: true, label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: false,
                         italic: true }	
		},
		link: {
			//colorMode: 'source',
			pattern: '$### bn'
			},
	allowHtml: 'true',
	tooltip: {isHtml: 'true'}
			}

    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }