Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container1" style="width: 600px; height: 200px; margin: 0 auto;"></div>
<div id="container2" style="width: 600px; height: 200px; margin: 0 auto;"></div>

JavaScript

$(function() {
    $('#container1').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts Bubbles'
        },

        xAxis: {
            gridLineWidth: 1,
            max: 5
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false
        },

        plotOptions: {
            bubble: {
                minSize: 3,
                maxSize: 100
            }
        },

        series: [{
            data: [
                [1, 1, 1],
                [2, 1, 2],
                [3, 1, 3],
                [4, 1, 4]
            ],
            zMin: 1,
            zMax: 4
        }]

    });
    
    
    $('#container2').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts Bubbles'
        },

        xAxis: {
            gridLineWidth: 1,
            max: 5
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false
        },

        plotOptions: {
            bubble: {
                minSize: 3,
                maxSize: 50
            }
        },

        series: [{
            data: [
                [1, 1, 5],
                [2, 1, 3],
                [3, 1, 3],
                [4, 1, 12]
            ],
            zMin: 1,
            zMax: 4
        }]

    });
});