Highcharts Demo

author(s): Paweł Fus

by tnhu

HTML

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

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

CSS

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

JavaScript

const chars = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
const LOOP = 3
const nodes = []
const edges = []

for (let i = 0; i < LOOP; i++) { 
	chars.forEach(n => {
  	nodes.push(n + i)
  })
}

nodes.forEach(n1 => { 
  nodes.forEach(n2 => { 
    if (n1 != n2) {
      edges.push([n1, n2]) 
    }
  })
})

console.log('Nodes', nodes.length, 'Edges:', edges.length)

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
        plotBorderWidth: 1
    },
    title: {
        text: 'Networkgraph with random initial positions'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to']
        }
    },
    series: [{
        layoutAlgorithm: {
            enableSimulation: true,
                  friction: -0.9,
                  initialPositions: 'circle',
                  maxIterations: 100,
                  integration: 'euler',
                  maxSpeed: 1,
                  linkLength:  300
        },
        name: 'K8',
        data: edges
    }]
});