Highcharts Demo

author(s): Torstein Hønsi

by michae1

HTML

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

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

CSS

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

JavaScript

var myData = [
  {x:1,y:2,z:10},
  {x:1,y:2.1,z:20},
  {x:1,y:2.1,z:30},
    {x:1,y:2.1,z:15},
      {x:1,y:2.1,z:30},
        {x:1,y:2.1,z:30},      {x:1,y:2.1,z:30},
        {x:1,y:2.1,z:20},{x:1,y:2.1,z:40},
];


var circles = [];

function addCircle(radius) {
	var coordss = findPosition(radius);
  circles.push({
  	x: coordss.x,
    y: coordss.y,
    z: radius
  });
}

function isCollision (newCircle) {
	var currentCircle;
  var deltaX;
  var deltaY;
  var distance;
	for (var i = 0, len = circles.length; i < len; i ++) {
  	currentCircle = circles[i];
    deltaX = newCircle.x - currentCircle.x;
    deltaY = newCircle.y - currentCircle.y;
    distance = Math.sqrt(deltaX*deltaX + deltaY*deltaY)
    if (distance < newCircle.z + currentCircle.z) {
    	return true;
    }
  }
  return false;
}

function findPosition (radius) {
	var minDistance;
  var deltaAngle = 1;
  var distance = 0;
  var x, y;
  for (var angle = 0; angle < 360; angle += deltaAngle) {
  	distance = 0
  	x = Math.cos(angle) * distance;
  	y = Math.sin(angle) * distance;
    while (isCollision({
      x: x,
      y: y,
      z: radius
    })) {
      distance++;
      x = Math.cos(angle) * distance;
      y = Math.sin(angle) * distance;
    };
    if (angle === 0 || distance < minDistance.distance) {
      minDistance = {
        distance: distance,
        coords: {
          x: x,
          y: y
        }
      }
    }
  }
  return {
    x: minDistance.coords.x,
    y: minDistance.coords.y
  }
}


addCircle(myData[0].z);

for (var i = 1; i<myData.length;i++){
	addCircle(myData[i].z, myData[i].name)
}


console.log('c',circles)


Highcharts.chart('container', {

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

    legend: {
        enabled: false
    },

    title: {
        text: 'Sugar and fat intake per country'
    },

    subtitle: {
        text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a...