Highcharts Demo

author(s): Torstein Hønsi

by Black Label

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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

var currentIncidentName = 'John Smith',
  nodeCount = 0;

Highcharts.addEvent(
  Highcharts.seriesTypes.networkgraph,
  'afterSetOptions',
  function(e) {
    var i = 0,
      nodes = {};
    e.options.data.forEach(function(link) {
      if (link.from === currentIncidentName) {
        console.log(link)
        nodes[currentIncidentName] = {
          id: currentIncidentName,
          className: 'relationship-tree-node-' + link.type + ' relationship-master-node',
          marker: {
            radius: 28
          },
          dataLabels: {
            className: 'relationship-master-node-label',
            y: 22
          }
        };
        console.log(nodes[currentIncidentName]);
      } else {
        var nameOfNode = link.from,
          nameOfNodeToString = nameOfNode.replace(/ /g, "-"),
          notPerson = (link.type !== 'person') ? 'not-a-person' : '',
          markerRadius = (link.type !== 'person') ? 18 : 22,
          yPosition = (link.type !== 'person') ? 15 : 18;

        nodes[nameOfNode] = {
          id: nameOfNode,
          marker: {
            radius: markerRadius
          },
          dataLabels: {
            y: yPosition
          },
          className: 'relationship-tree-node-' + link.type + ' ' + notPerson
        }
      }
    });

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

Highcharts.chart('container', {
  chart: {
    type: 'networkgraph',
    marginTop: 50
  },
  title: {
    text: ''
  },
  plotOptions: {
    networkgraph: {
      keys: ['from', 'to'],
      layoutAlgorithm: {
        enableSimulation: false,
        integration: 'verlet',
        linkLength: 150
      }
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    marker: {
      radius: 18
    },
    link: {
      color: "rgba(100, 100, 100, 0.8)",
      dashStyle: "dash"
    },
    point: {
      events: {
        click: function() {
          var point = this;

          if (!point.linksHidden)...