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

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

by canvasjs

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 Labels"
  },
  data: [{
    type: "column",
    dataPoints: dataPoints
  }]
});

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

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

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