Highcharts Demo

author(s): Torstein Hønsi

by thatdataguyau

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
    border: 1px solid silver;
}

#csv {
	display: none;
}

JavaScript

team = '';
function linksClick(point) {

chart2.series[0].data.forEach(function(l) {
if (point.id!=team) {
    if ((l.className != point.id) & (l.className != point.className)) {
    	l.setState('unselected');
      l.off = true;
    } else {
    l.setState('selected');
    l.off = false;
    }
    } else {
    l.setState('selected')
    l.off = false;
    }});

  if (!point.id) {
  	team = point.className
  } else {
  	team = point.id
  }
	
    
   
}


function linksHover(point) {
	chart2.series[0].data.forEach(function(l) {
  if (team) {
    if ((l.off)) {
    	l.setState('unselected');//setState('unselected');
    } 
    }
    }
    )
    
}

var chart2 = Highcharts.chart('container', {
		tooltip: {
    formatter: function() {
    if (this.point.off) {
    return false
    } else if (this.point.isNode) {
    return this.point.id
    }
    else {
    return this.point.className + ' ' + this.point.toNode.name + ': <b>' + this.point.weight + '%</b><br/>'
    }
    }
    },

    title: {
        text: 'Road To The Holy Grail'
    },
    plotOptions: {
    sankey: {
    	states:{
      'unselected':{
      'linkOpacity':'0'
      },
      'selected':{
      'linkOpacity':'0.5'
      },
      'hover':{
      'enabled':false
      }
      },
      point: {
        events: {
          click: function() {
            linksClick(this)
          },
          mouseOver: function() {
          linksHover(this)
          },
          mouseOut: function() {
          linksHover(this)
          }
        }
      }
    }
  },
    series: [
    
    {
    id:'finalsData',
    name:'Node',
    keys: ['from', 'to', 'weight','color','className','off'],
    type: 'sankey',
    showInLegend: false,
    nodes:[
        {id:'RIC',column:0,color:'rgb(255, 255, 0)'},
        {id:'MEL',column:0,color:'#db0a0a'},
        {id:'WCE',column:0,color:'rgb(255, 209, 25)'},
        {id:'COL',column:0,color:'#000000'},
        {id:'GWS',column:0,color:'rgb(255, 144, 0)'},
       ...