Highcharts Demo

by djakacki

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

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#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: 'Arts & Sciences',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 20,
                    fillColor: 'red'
                }
            }, {
                id: 'Engineering',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 2,
                    fillColor: 'red'
                }
            }, {
                id: 'Management',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 3,
                    fillColor: 'red'
                }
            }, {
                id: 'Sophomore',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 12,
                    fillColor: 'green'
                }
            }, {
                id: 'Junior',
                dataLabels: {
                    enabled: true
                },
                marker: {
                    radius: 5,
                    fillColor: 'green'
                }
...