Highcharts Demo

author(s): Torstein Hønsi

by klsakthi

HTML

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

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="container1" style="height: 300px; min-width: 300px"></div>
<div id="container2" style="height: 300px; min-width: 300px"></div>

JavaScript

var LABEL_HEIGHT = 25;
var CIRCLE_RADIUS = 5;
var LINE_LENGTH = 200;

function findVal(index, myArray){
    if(index < myArray.length) {
      return {
        x: myArray[index].x, 
        y: myArray[index].y, 
        plotX: myArray[index].plotX, 
        plotY: myArray[index].plotY
      };
    }
}

function drawItems(chart, currentIndex) {
debugger;
	var chartVal = findVal(currentIndex, chart.series[0].points);
  
  var seriesLength = chart.series.length;

  var pxX = chart.xAxis[0].toPixels(chartVal.x, true);
  var pxY = chart.yAxis[0].toPixels(chartVal.y + LABEL_HEIGHT*(seriesLength-1), true);
  var i=0;
  var chartValText;
  var text = '';
  for(i=0; i <seriesLength; i++){
  	chartValText = findVal(currentIndex, chart.series[i].points);
    text = text + 'x: ' + chartValText.x + ', y: ' + chartValText.y +'<br>';
  }

  //draw label
  if(chart.chartLabel){
    chart.chartLabel.hide();
  }
    
    chart.chartLabel = chart.renderer.label('', pxX, pxY, 'callout', chartVal.plotX + chart.plotLeft, (chartVal.plotY + chart.plotTop))
      .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: Highcharts.getOptions().colors[3],
            padding: 8,
            stroke: 'red',
            'stroke-width': 2,
            r: 5,
            zIndex: 6
        })
        .add();
        
  chart.chartLabel.show()
    .attr({
    text: text
  });


  //draw circle
  if(chart.circle){
  	chart.circle.hide();
   }
  
    chart.circle = chart.renderer.circle(chart.series[0].points[currentIndex].plotX + chart.plotLeft, chart.series[0].points[currentIndex].plotY + chart.plotTop, CIRCLE_RADIUS).attr({
      fill: Highcharts.getOptions().colors[5],
      stroke: 'black',
      'stroke-width': 1,
      zIndex: 5
  }).add();

    //draw line
    if(chart.line){
      chart.line.destroy();
    }


     var lineStartXposition = chart.series[0].points[currentIndex].plotX + chart.plotLeft;
     var lineStartYposition =...