Highcharts test tool

by mrchief

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: [],
        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
         */
    }]

});

var 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;
        }());

chart.series[0].setData(data);