Range Column Chart from External JSON File - CanvasJS JavaScript Charts

Range Column Chart from External JSON File - 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="top_destinations" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];
var dataPoints1 = [];
var highlow = [];

var chart = new CanvasJS.Chart("top_destinations", {
  animationEnabled: true,
  theme: "light2",
  dataPointWidth: 20,
  title: {
    text: "YTD Top Destinations",
    fontSize: 15,
  },
  axisY: [{
    labelFormatter: function(e) {
      return e.value;
    },
  }],
  axisX: [{
    labelFormatter: function(e) {
      return e.value;
    },
  }],
  data: [{
    type: "rangeColumn",
    axisYindex: 0,
    yValueFormatString: "#,### Units",
    dataPoints: dataPoints
  }]
});

function addData(data) {
  for (var i = 0; i < data.length; i++) {
    highlow = [];

    highlow[0] = data[i].minspend;
    highlow[1] = data[i].maxspend;
    dataPoints.push({
      x: i,
      y: highlow
    });

  }
  chart.render();
}

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