Network / Force Directed Graph - Highcharts

author(s): Paweł Fus

by jeffersonswartz

HTML

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

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

CSS

#container {
  min-width: 320px;
  max-width: 800px;
  margin: 0 auto;
}

JavaScript

// Add the nodes option through an event call. We want to start with the parent
// item and apply separate colors to each child element, then the same color to
// grandchildren.
Highcharts.addEvent(
  Highcharts.seriesTypes.networkgraph,
  'afterSetOptions',
  function(e) {
    var colors = Highcharts.getOptions().colors,
      i = 0,
      nodes = {};
    e.options.data.forEach(function(link) {

      if (link[0] === 'Proto Indo-European') {
        nodes['Proto Indo-European'] = {
          id: 'Proto Indo-European',
          marker: {
            radius: 20
          }
        };
        nodes[link[1]] = {
          id: link[1],
          marker: {
            radius: 10
          },
          color: colors[i++]
        };
      } else if (nodes[link[0]] && nodes[link[0]].color) {
        nodes[link[1]] = {
          id: link[1],
          color: nodes[link[0]].color
        };
      }
    });

    e.options.nodes = Object.keys(nodes).map(function(id) {
      return nodes[id];
    });
  }
);

Highcharts.chart('container', {
  chart: {
    type: 'networkgraph',
    height: '100%'
  },
  title: {
    text: 'The Indo-European Language Tree'
  },
  subtitle: {
    text: 'A Force-Directed Network Graph in Highcharts'
  },
  plotOptions: {
    networkgraph: {
      keys: ['from', 'to'],
      layoutAlgorithm: {
        enableSimulation: true,
        friction: -0.9
      }
    },
    series: {
      cursor: "pointer",
      lineWidth: that.defaults.linewidth,
      point: {
        events: {
          click: function(event) {
          	
          }
        }
      }
    }
  },
  series: [{
    dataLabels: {
      enabled: true,
      linkFormat: ''
    },
    data: [
      ['Proto Indo-European', 'Balto-Slavic'],
      ['Proto Indo-European', 'Germanic'],
      ['Proto Indo-European', 'Celtic'],
      ['Proto Indo-European', 'Italic'],
      ['Proto Indo-European', 'Hellenic'],
      ['Proto Indo-European', 'Anatolian'],
      ['Proto Indo-European',...