Network / Force Directed Graph - Highcharts

author(s): Paweł Fus

by tnhu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>

JavaScript

/* (function(H) {
  H.wrap(H.seriesTypes.networkgraph.prototype.pointClass.prototype, 'getLinkAttribues', function(proceed) {
    var linkOptions = this.series.options.link,
      pointOptions = this.options;

    return {
      'stroke-width': H.pick(pointOptions.width, linkOptions.width),
      stroke: H.pick(pointOptions.color, linkOptions.color),
      dashstyle: 'Dot' //H.pick(pointOptions.dashStyle, linkOptions.dashStyle)
    };

  });
}(Highcharts)); */

Highcharts.chart('container', {
  chart: {
    type: 'networkgraph'
  },

  plotOptions: {
    networkgraph: {
      layoutAlgorithm: {
        enableSimulation: true
      }
    }
  },
  series: [{
    link: {
      color: 'green',
      width: '3'
    },
    dataLabels: {
      enabled: false
    },
    data: [{
      from: 'Europe',
      to: 'UK'
    }, {
      from: 'Europe',
      to: 'Poland',
      color: 'red',
      dashStyle: 'Dot'
    }, {
      from: 'Europe',
      to: 'Italy'
    }, {
      from: 'UK',
      to: 'London'
    }, {
      from: 'UK',
      to: 'Bristol'
    }, {
      from: 'London',
      to: 'London Centre'
    }, {
      from: 'Poland',
      to: 'Warsaw'
    }, {
      from: 'Poland',
      to: 'Krakow',
      color: 'black'
    }, {
      from: 'Italy',
      to: 'Roma'
    }, {
      from: 'Italy',
      to: 'Piza'
    }]
  }]
});