Network / Force Directed Graph - Highcharts

author(s): Paweł Fus

by Rajan Paneru

HTML

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

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

CSS

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

JavaScript

(function(H) {
  H.wrap(H.seriesTypes.networkgraph.prototype.pointClass.prototype, 'renderLink', function(proceed) {
    var point = this;

    proceed.call(this);

    if (!point.isNode) {
      point.importEvents();

      H.objectEach(this.events, function(event, eventType) {
        if (H.isFunction(event)) {
          point.graphic.on(eventType, function(e) {
            event.call(point, e);
          });

          (point.dataLabels || []).forEach(function(label) {
            if (label) {
              label.on(eventType, function(e) {
                event.call(point, e);
              });
            }
          });
        }
      });
    }
  });
})(Highcharts);


window.lol = Highcharts.chart('container', {
  chart: {
    type: 'networkgraph'
  },
  plotOptions: {
    networkgraph: {
      keys: ['from', 'to'],
      layoutAlgorithm: {
        enableSimulation: true
      }
    }
  },
  series: [{
    link: {
      width: 2
    },
    marker: {
      radius: 10
    },
    point: {
      events: {
        click: function() {
          if (this.isNode) {
            console.log('clicked node:', this);
          } else {
            console.log('clicked link:', this);
          }
        }
      }
    },
    data: [
      ['Proto Indo-European', 'Balto-Slavic'],
      ['Proto Indo-European', 'Germanic'],
      ['Proto Indo-European', 'Celtic'],
      ['Proto Indo-European', 'Italic']
    ]
  }]
});