Highcharts test tool

HTML

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

<div id="container" style="height: 400px; width: 600px"></div>

JavaScript

Highcharts.setOptions({
    global: {
        VMLRadialGradientURL: 'http://code.highcharts.com/gfx/vml-radial-gradient.png'
    }
});

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
    title: {
        text: 'Highcharts Bubbles'
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false
    },

    series: [
        {
            data: [ [ 20, 25, 150 ], [ 30, 35, 200 ] ],
            marker: {
                fillColor: 'green',
            },
        },
        {
        data: (function() {
            var arr = [];
            for (var i = 0; i < 20; i++) {
                arr.push([
                    Math.round(Math.random() * 100),
                    Math.round(Math.random() * 100),
                    Math.round(Math.random() * 100)
                ]);
            }
            return arr;
        }()),
        dataLabels: {
            //enabled: true
        },
        marker: {
             fillColor: {
                 radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                 stops: [
                     [0, 'rgba(255,255,255,0.5)'],
                     [1, 'rgba(69,114,167,0.5)']
                 ]
             }
        }
                                 
         /* 
         More available options:
         displayNegative: true, // whether to display below zThreshold
         minSize: 8,
         maxSize: '20%',
         negativeColor: null, // secondary color for Z values below zThreshold
         zThreshold: 0
         */
    }]

});