nv bubble chart

nv atlas

by Nelu Malancea

HTML

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

<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>

JavaScript

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

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        plotOptions: {
            bubble: {
                tooltip: {
                    headerFormat: '<b>{point.point.name}</b><br><table>',
                    pointFormat: '<tr><td>Price Index:</td><td>{point.x}</td></tr><tr><td>HCO Price:</td><td>${point.y}</td></tr><tr><td>Annual Spend:</td><td>${point.z}</td></tr>',
                    footerFormat: '</table>'
                }
            }
        },
        tooltip: {
            useHTML: true
        },
        title: {
            text: 'Top 25 products for [company]',
            style: {
                color: '#8c8f94',
                fontSize: '9px',
                fontWeight: 700,
                textTransform: 'uppercase',
            }
        },
        series: [{
            data: [
                {name: 'John', x: 97, y: 36, z: 72},
                {name: 'Bill', x: 94, y: 74, z: 60},
                {name: 'Alice', x: 68, y: 76, z: 58},
                {name: 'Alex', x: 64, y: 87, z: 56},
                {name: 'Wendy', x: 68, y: 27, z: 73},
                {name: 'Tim', x: 74, y: 99, z: 42},
                {name: 'Josh', x: 79, y: 38, z: 7},
                {name: 'Ion', x: 51, y: 69, z: 40},
                {name: 'Peter', x: 38, y: 23, z: 33},
                {name: 'Sasha', x: 57, y: 86, z: 31}
            ],
            color: '#0194d3'
        }],
        xAxis: {
            title: {
                text: 'Price Index',
                style: {
                    color: '#8C8F94',
                    textTransform: 'uppercase',
                    fontSize: '9px'
                }
            },
            labels: {
                y: 20,
                style: {
                    color: '#8C8F94',
                    fontSize: '9px'
                }
            },
        },
        yAxis: {
            title: {
                text: 'HCO...