Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container1" style="height: 450px; min-width: 300px"></div>
<!--<div id="container2" style="height: 300px; min-width: 300px"></div> -->
<div id="container3" style="max-height: 140px; min-width: 300px"></div>

<div id="container4" style="max-height: 140px; min-width: 300px"></div>

JavaScript

var LABEL_HEIGHT = 25;
var CIRCLE_RADIUS = 7;
var LINE_LENGTH = 500;

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) {
	var chartVal = findVal(currentIndex, chart.series[0].points);
  
  var seriesLength = chart.series.length;

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

  //draw label
  if(chart.chartLabel){
    chart.chartLabel.hide();
  }
    
    chart.chartLabel = chart.renderer.label('', pxX, pxY, 'callout', chartVal.plotX + chart.plotLeft, ((chartVal.plotY|| 0) + chart.plotTop))
      .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: Highcharts.getOptions().colors[3],
            padding: 8,
            r: 5,
            zIndex: 999
        })
        .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.series[0].points[currentIndex].plotY : chart.plotHeight ) + chart.plotTop), 
    CIRCLE_RADIUS).attr({
      fill: Highcharts.getOptions().colors[5],
      stroke: 'black',
      'stroke-width': 1,
      zIndex: 5
  }).add();

    //draw...