Stacked Column Chart with Data from JSON data - CanvasJS JavaScript Charts

Stacked Column Chart with Data from JSON data - 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 dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];
var dataPoints4 = [];
var dataPoints5 = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Stacked Column from JSON Data"
  },
  data: [{
    type: "stackedColumn",
    dataPoints: dataPoints1
  },{
    type: "stackedColumn",
    dataPoints: dataPoints2
  },{
    type: "stackedColumn",
    dataPoints: dataPoints3
  },{
    type: "stackedColumn",
    dataPoints: dataPoints4
  },{
    type: "stackedColumn",
    dataPoints: dataPoints5
  }]
});

$.ajax({
  type: 'GET',
  url: 'https://api.myjson.com/bins/fal8s',
  dataType: 'json',
  success: function(data) {
    for (var i = 0; i < data.length; i++) {
      console.log(data[i].CustName);
      dataPoints1.push({
        label: data[i].CustName,
        y: data[i].E1Exceptions
      });
      dataPoints2.push({
        label: data[i].CustName,
        y: data[i].E2Exceptions
      });
      dataPoints3.push({
        label: data[i].CustName,
        y: data[i].E3Exceptions
      });
      dataPoints4.push({
        label: data[i].CustName,
        y: data[i].ManuallyEntered
      });
      dataPoints5.push({
        label: data[i].CustName,
        y: data[i].Overriden
      });
    }

    chart.render();
  }
});