ClientFinder bubble chart

ClientFinder bubble chart

by Pat Dobson

HTML

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

<h3>Chart #1</h3>
<div id="container" ></div>

<h3>Chart #2</h3>
<div id="container2" ></div>

CSS

.highcharts-tooltip h3 {
    margin: 0.3em 0;
}

JavaScript

jQuery(function () {
	
  	var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
                { x: 1, y: 1, z: 1, label: 'data #2' },
                { x: 2, y: 2, z: 2, label: 'data #3' },
                { x: 3, y: 3, z: 3, label: 'data #4' },
                { x: 4, y: 4, z: 4, label: 'data #5' },
                { x: 5, y: 5, z: 5, label: 'data #6' },
                { x: 6, y: 6, z: 6, label: 'data #7' }]; 
		
    var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
                { x: 1, y: 1, z: 1, label: 'data #2' },
                { x: 2, y: 1, z: 1, label: 'data #3' },
                { x: 3, y: 2, z: 2, label: 'data #4' },
                { x: 4, y: 2, z: 2, label: 'data #5' },
                { x: 5, y: 1, z: 1, label: 'data #6' },
                { x: 6, y: 0, z: 0, label: 'data #7' }]; 

    jQuery('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
            credits: false,

        legend: {
            enabled: false
        },

        title: {
            text: ''
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: ''
            },
           categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
        },

        yAxis: {
            startOnTick: true,
            min: -1,
            max: 7,
            showFirstLabel: false,
            showLastLabel: false,
            tickInterval: 1,
            title: {
                text: 'Score'
            },
            labels: {
                format: '{value}'
            },
            maxPadding: 0.2
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<table>',
            pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
                '<tr><th>Score:</th><td>{point.y}</td></tr>',
            footerFormat: '</table>',
            followPointer: true
       ...