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

teamId = '';

function linksClick(point) {

  if (point.isNode & point.column == 0) {
    teamIdNew = point.id
  } else if (point.teamId) {
    teamIdNew = point.teamId
  } else {
    teamIdNew = null
  }

  if (teamId == teamIdNew) {
    teamId = 'All'
  } else {
    teamId = teamIdNew
  }

  if (teamId != 'All') {
    chart2.series[0].data.forEach(function(l) {
      if (l.teamId == teamId) {
        l.off = false
        l.setState('selected')
      } else {
        l.off = true
        l.setState('unselected')
      }
    })
  } else {
    chart2.series[0].data.forEach(function(l) {
      l.off = false
      l.setState('selected')
    })

  }
}

function linksHover(point) {
  chart2.series[0].data.forEach(function(l) {
    if (l.off) {
      l.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.teamId + ' ' + 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', 'teamId', 'off'],
      type: 'sankey',
      showInLegend: false,
      nodes: [{
          id: 'RIC',
          column: 0,
          color: 'rgb(255, 255, 0)'
       ...