Sankey Example My

An example of a Google Sankey Chart.

by Usermane

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="sankey_basic" style="width: 900px; height: 300px;"></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([
         ['GT1','Sweeping',1],
['GT2','Sweeping',1],
['GT3','Sweeping',1],
['GT4','Sweeping',1],
['GT5','Sweeping',1],
['GT6','Sweeping',1],
['GT1','Fanning',1],
['GT2','Fanning',1],
['GT4','Fanning',1],
['GT5','Fanning',1],
['GT3','Brushing',1],
['GT6','Brushing',1],
['GT1','Strumming',1],
['GT3','Strumming',1],
['GT4','Strumming',1],
['GT3','J -Stroke',1],
['GT6','J -Stroke',1],
['GT1','Swivel',1],
['GT2','Swivel',1],
['GT5','Swivel',1],
['GT6','Swivel',1],
['GT1','Scooping',1],
['GT2','Scooping',1],
['GT4','Scooping',1],
['GT5','Scooping',1],
['GT6','Scooping',1],
['GT2','Framing',1],
['GT3','Framing',1]
        ]);

        // Sets chart options.
    var colors = ['#f45f42', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      width: 300,
      height: 400,
      sankey: {
        node: {label: { fontName: 'Roboto',
                         fontSize: 18,
                         color: '#871b47',
                         bold: true,
                         italic: false } ,
          colors: colors
        },
        link: {
          colorMode: 'source',
          colors: colors
        }
      }
    };

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