Highcharts Demo

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container-1"></div>
<div id="container-2"></div>

CSS

#container-1,
#container-2 {
    width: 50%;
    margin: 0 auto;
    float: left;
}

JavaScript

function createChart(container, integration, linkLength) {
    Highcharts.chart(container, {
        chart: {
            type: 'networkgraph',
            plotBorderWidth: 1
        },
        title: {
            text: 'Phrasal verbs'
        },
        subtitle: {
            text: 'Integration: ' + integration
        },
        plotOptions: {
            networkgraph: {
                layoutAlgorithm: {
                    enableSimulation: true,
                    integration: integration,
                    linkLength: linkLength
                },
                keys: ['from', 'to'],
                marker: {
                    radius: 5,
                    lineWidth: 1
                }
            }
        },
        series: [{
            nodes: [{
                id: 'for',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 2,
                    fillColor: 'red'
                }
            }, {
                id: 'up',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 15,
                    fillColor: 'red'
                }
            }, {
                id: 'back',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 2.5,
                    fillColor: 'red'
                }
            }, {
                id: 'away',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 2.5,
                    fillColor: 'red'
                }
            }, {
                id: 'down',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 5.5,
                    fillColor: 'red'
                }
            }, {
               ...