Bubble Chart - large/complex

by jlbriggs

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height:600px;"></div>

JavaScript

var chart;
chart = new Highcharts.Chart({
    chart:{
        renderTo:'container',
        defaultSeriesType:'scatter',
        zoomType:'xy',
        margin:25,
        borderWidth:1,
        borderColor:'#999',
    },
    credits:{enabled:false},
    title:{text:''},
    tooltip:{
        borderWidth:1,
        formatter:function() {
            return ''+
            'Cartons: '+this.x +'<br/>'+'Hours: '+this.y +'<br/>'+'SKU\'s: '+this.point.skus;
        }
    },
    legend:{
        layout:'vertical',
        align:'right',
        verticalAlign:'bottom',
        x:20,
        y:-25,
        backgroundColor:'rgba(255,255,255,0)',
        borderWidth:0,
    },
    plotOptions:{
        scatter:{
            marker:{
                radius:3,
                states:{
                    hover:{enabled:false}
                }
            },
            states:{
                hover:{enabled: false}
            },
            cursor:'pointer',
            point:{
                events:{
                    click:function(){
                        //location.href = this.options.url;
                        window.open(this.options.url);
                    }
                }
            }
        },
        line:{
            shadow:false,
            visible:false,
            enableMouseTracking:false,
            lineWidth:1,
            marker:{enabled:false},
            states:{
                hover:{
                    lineWidth:0
                }
            }
        },
        borderWidth:1,
        borderColor:'#ccc',
    },
    xAxis:{
        title:{text:''},
        min:0,
        tickInterval:250,
        lineColor:'#ccc',
        tickColor:'#ccc',
        endOnTick:false,
        showFirstLabel:false,
        maxPadding:.025
    },
    yAxis:{
        title:{text:''},
        plotLines:[
            {value:2,width:2,color:'#999'},            ],
        min:0,
        tickInterval:1,
        gridLineColor:'#eee',
        endOnTick:false
  ...