Basic Column Chart with index labels from external JSON - CanvasJS Javascript charts

Basic Column Chart with index labels from external JSON - CanvasJS Javascript charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title: {
    text: "Basic Column Chart with Index"
  },
  data: [{
    type: "splineArea",
    dataPoints: dataPoints,
    xValueFormatString:"D/MM"
  }]
});

function addData(data) {
  var lowest = data[0].ppm, highest = data[0].ppm, label;
  for(var i = 0; i < data.length; i++){
    highest = (highest >= data[i].ppm) ? highest : data[i].ppm;
    lowest = 	(lowest <= data[i].ppm) ? lowest : data[i].ppm;
  }

  for (var j = 0; j < data.length; j++) {
    label = (data[j].ppm === highest || data[j].ppm === lowest)?((data[j].ppm)===highest?"high":"low"):"";
    dataPoints.push({
      x: data[j].time,
      y: data[j].ppm,
      indexLabel: label
    });
  }
  chart.render();
}

$.getJSON("https://api.myjson.com/bins/1g0yt2", addData);