Bubbles

by Adam Nekola

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 600px; width: 290px; margin: 0 auto"></div>
<button>Click</button

JavaScript

$(function () {
    $('#container').highcharts({
	    chart: {
	        type: 'bubble',
            marginTop:0,
            marginRight:0,
            marginBottom:0,
            marginLeft:50,
            spacingTop:0,
            spacingRight:50,
            spacingBottom:0,
            spacingLeft:0
	    },
        title: {
            text: ''
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        yAxis: {
            gridLineColor: null,
            lineColor: null,
            max: 11,
            labels: {
                enabled: true
            },
            title: {
                enabled: false
            }
        },
        xAxis: {
            lineColor: null
        },
        plotOptions: {
            bubble: {
                minSize:0,
                maxSize:87
            }
        },
	    series: [{
	        data: [[0,1,0],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0]]
	    },{
	        data: [[1,1,79],[1,2,5],[1,3,20],[1,4,20],[1,5,20],[1,6,20],[1,7,20],[1,8,20],[1,9,20],[1,10,20]]
	    }, {
	        data: [[2,10,93],[2,9,92],[2,8,85],[2,7,83],[2,6,73],[2,5,72],[2,4,63],[2,3,54],[2,2,25],[2,1,21]]
	    }]
	
	});
    
    var chart = $('#container').highcharts();
	
	$('button').click(function(e) {
       chart.series[1].data[0].update([1,1,55]);
	   		chart.series[1].data[2].update([1,3,35]);
			chart.series[2].data[0].update([2,10,44]);
	   		chart.series[2].data[2].update([2,8,11]);
    });
    
});