Highcharts test tool

by Torstein Hønsi

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$(function () {
    Highcharts.chart('container', {

        chart: {
            type: 'bubble'
        },

        title: {
            text: 'Highcharts Bubbles with symbols'
        },

        series: [{
            data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]],
            marker: {
                symbol: 'square'
            },
            name: 'Square'
        }, {
            data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]],
            marker: {
                symbol: 'diamond'
            },
            name: 'Diamond'
        }, {
            data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]],
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            },
            name: 'Sun'
        }]

    });
});