Sankey Example

An example of a Google Sankey Chart.

by zstone422

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}"></script>
       <div id="sankey_basic" style="width: 900px; height: 200px;"></div>
<div>
    <div id="chart-container">FusionCharts will render here</div> 
    <div id='controllers' style='position:relative;text-align:center'>
        <input id='exportpdf' type='Button' value='Export to PDF' />&nbsp;&nbsp;
        <input id='exportsvg' type='Button' value='Export to SVG' />&nbsp;&nbsp;
        <input id='exportpng' type='Button' value='Export to PNG' />
    </div>
</div>

JavaScript

google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'Industry 1', 'Region 1', 1 ],
          [ 'Industry 1', 'Region 2', 7 ],
          [ 'Industry 1', 'Region 3', 6 ],
          [ 'Industry 2', 'Region 3', 2 ],
          [ 'Industry 2', 'Region 1', 9 ],
          [ 'Industry 2', 'Region 6', 4 ],
          [ 'Industry 3', 'Region 4', 1 ],
          [ 'Industry 3', 'Region 6', 7 ],
          [ 'Industry 3', 'Region 1', 6 ],
          [ 'Industry 4', 'Region 4', 2 ],
          [ 'Industry 4', 'Region 5', 9 ],
          [ 'Industry 4', 'Region 2', 4 ]
        ]);

        var options = {
          width: 600,
        };

        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
        
        // Export chart method
                   var exportFC = function () {
                       var types = { 
                           "exportpdf": "pdf",
                           "exportsvg": "svg",
                           "exportpng": "png"
                       };
                       if (e && e.sender && e.sender.exportChart) {
                            e.sender.exportChart({
                               exportFileName: "FC_sample_export",
                               exportFormat: types[this.id]
                           });
                       }
                   };
          
      }