Hyperlinks on Google Sankey nodes - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Hyperlinks on Google Sankey nodes

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Sankey Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="sankey_basic"></div> 
      <script type="text/javascript">
google.charts.load('current', {
  callback: function () {/* w  ww  .j a va 2  s.c  o  m*/
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['sankey']
});
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    [ 'A', 'X', 5 ],
    [ 'A', 'Y', 7 ],
    [ 'A', 'Z', 6 ],
    [ 'B', 'X', 2 ],
    [ 'B', 'Y', 9 ],
    [ 'B', 'Z', 4 ]
  ]);

  var options = {
    width: 600,
      sankey: {
          node: {
              interactivity: true
          }
      }
  };
  var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
  google.visualization.events.addListener(chart, 'select', function() {
    var sel = chart.getSelection();
    if (sel.length) {
      switch (sel[0].name) {
        case 'A':
          window.open('http://www.bing.com');
          break;
        case 'B':
          window.open('http://www.yahoo.com');
          break;
        default:
          window.open('http://www.google.com');
      }
    }
  });
  chart.draw(data, options);
}

      </script>  
   </body>
</html>

Related Tutorials