Highcharts Scatterplot Bubble Demo

author(s): J. Albert Bowden II

by J. Albert Bowden

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var formatterCountryNames = function() {
        // if mobile
        if (jQuery('#country-names').length) {
          return this.point.CountryCode
        } else {
          return this.point.Country
        }
      };


function draw_chart() {
    var url="https://dummy-project-448a4.firebaseio.com/2015/.json";
    $.getJSON(url,
        function(data){
            /** Declare options after success callback. */
            var options={
                chart: {
  renderTo: 'container',
  //margin: [0, 0, 0, 0],
  marginTop: 0,
  marginRight: 0,
  marginLeft: 70,
  spacing: [0,0,30,0],
  //marginBottom: 0,
  type: 'bubble',
  zoomType: 'xy',
  events: {
    // load: renderImage
  }
},
legend: {
  enabled: false
},
title: {
      	 text: null
},
xAxis: {
  labels: {
    enabled: false
  },
  tickPositions: [2.3, 4.4, 6.5, 10],
  min: 0,
  max: 10,
  align: 'low',
  gridLineWidth: 1,
  title: {
    text: 'Government Restrictions Index <strong>(GRI)</strong>',
    x: -30,
    y: 20,
    style: {
      color: "#000",
      fontWeight: 300
    }
  },
},
yAxis: {
  tickPositions: [1.4, 3.5, 7.1, 10],
  min: 0,
  max: 10,
  gridLineWidth: 1,
  startOnTick: false,
  endOnTick: false,
  //values: [1.4, 3.5, 7.1, 10],
  title: {
    x: -35,
    y: 20,
    text: 'Social Hostilities Index <strong>(SHI)</strong>',
    style: {
      color: "#000",
      fontWeight: 300
    }
  },
  labels: {
    enabled: false
  },
  maxPadding: 0.2,
},
tooltip: {
  followPointer: false,
  useHTML: true,
  backgroundColor: '#fff',
  borderColor: '#000'
  // formatter: formatterToolTips,
  // positioner: toolTipsPositioning
},
plotOptions: {
  bubble: {
    minSize: '7.5%'
  },
  series: {
    cursor: 'pointer',
    dataLabels: {
      enabled: true,
      formatter: formatterCountryNames,
      allowOverlap: true,
      strokeWidth: '0',
      textOutline: 'false',
      shadow: 'false',
      textShadow: 'false',
      // adds class to all labels
      className: 'className'
    },
   ...