bubble arrows study

by kzoon

HTML

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

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

JavaScript

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

	    chart: {
	        type: 'bubble'
	    },

	    title: {
	    	text: ''
	    },
	      yAxis: {
              min: 0,max:100,
            title: {
                text: ''
            }
        },      xAxis: {
              min: 0,max:100,
            title: {
                text: ''
            }
        },
             plotOptions: {
            bubble: {
                animation: false,
                minSize: 0,
                maxSize: 100,
             
            }
        },

	    series: [{
            
	        data: [[20,40,15],[45,50,45],[25,25,0]]
	    }, {
	        data: [[80,80,65],[45,70,59]]
	    } ]
	  }, function (chart) { // on complete
        var renderer = chart.renderer;
        putArrow(chart.series[0].data[0], chart.series[0].data[1], 5);
         putArrow(chart.series[1].data[0], chart.series[1].data[1], 5);


        function putArrow(pointStart, pointEnd, width) {

            drawArrow(chart.plotLeft + pointStart.plotX, chart.plotTop + pointStart.plotY, pointStart.shapeArgs.r,
            chart.plotLeft + pointEnd.plotX, chart.plotTop + pointEnd.plotY, pointEnd.shapeArgs.r, width);
        }

        function drawArrow(startX, startY, startRadius, endX, endY, endRadius, width) {

            var angle = Math.PI + Math.atan((endX - startX) / (endY - startY)),
                arrowLength = 2 * (width + 2),
                arrowWidth = 1 * (width + 2),
                path = [],
                startArrowX,
                startArrowY,
                margin = 2;

            if (endY >= startY) {
                //correct for circle radius
                startX -= ((startRadius + margin) * Math.sin(angle));
                startY -= ((startRadius + margin) * Math.cos(angle));
                endX += ((endRadius + margin) * Math.sin(angle));
                endY += ((endRadius + margin) * Math.cos(angle));

                //correct for arrow head length
                endX +=...