switch chart

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 800px; height: 800px; margin: 0 auto;"></div>

JavaScript

/*TODO
    2 arrows between nodes
    data label on arrow
    tooltip on errow
    mouse over on arrow
    bubble datalabel position
    Automatic postioning of nodes (depending on number of nodes)
    margin inside plotarea
    
    apply limit on number of arrows
    animation
    
*/
$(function () {
    var maxSize = 100;
    $('#container').highcharts({

        chart: {
            type: 'bubble'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Customer switch behaviour'
        },

        legend: {
            enabled: false
        },
        xAxis: {
            lineWidth: 0,
            gridLineWidth: 0,
            min: 0,
            max: 100,
            tickLength: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            }
        },

        yAxis: {
            lineWidth: 0,
            gridLineWidth: 0,
            min: 0,
            max: 100,
            tickLength: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            }
        },

        tooltip: {
            headerFormat: '',
            pointFormat: '{point.z}',
            shared: false,
            hideDelay: 10
        },
        plotOptions: {
            bubble: {
                animation: false,
                minSize: 0,
                maxSize: maxSize,
                color: '#92d400',
                marker: {
                    fillOpacity: 1
                },
                dataLabels: {
                    enabled: true,
                    format: "{point.name}",
                    color: 'black',
                    style: {
                        textShadow: 'none',
                        fontSize: '14px',
                        fontFamily: 'arial'
                    }

                }
            }
        },

        series: [{
            data: [{
            ...