Drag and drop bubbles demo

by Nick Karnik

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<link rel="stylesheet" href="http://blacklabel.github.io/custom_events/css/styles.css">
<script src="http://blacklabel.github.io/bubble_dragndrop/bubble-dragndrop.js"></script>
<div id="chart"></div>

JavaScript

$(function () {
    $('#chart').highcharts({
        chart: {
            renderTo: 'chart',
            type: 'bubble',
            borderWidth: 5,
            borderColor: '#e8eaeb',
            borderRadius: 0,
            backgroundColor: '#f7f7f7',
        },
        title: {
            style: {
                'fontSize': '1em'
            },
            useHTML: true,
            align: 'left',
            x: -5,
            y: 8,
            text: '<span class="chart-title"> Drag and drop bubbles  <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>',
        },
        tooltip: {
            followTouchMove: true,
            followPointer: true
        },
        series: [{
            data: [
                [10, 20, 3],
                [5, 13, 10],
                [40, 32, 15]
            ]
        }, {
            data: [
                [5, 5, 20],
                [21, 12, 10],
                [22, 5, 9]
            ]
        }, {
            data: [
                [7, 3, 14],
                [13, 10, 4],
                [12, 13, 14]
            ]
        }]
    })
});