Stacked Column Chart from JSON - CanvasJS JavaScript Charts

Stacked Column Chart from 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 dpe1 = [];
var dpe2 = [];
var dpe3 = [];
var dpme = [];
var dporr = [];
var dpnex = [];
var dataPoints4 = [];
var data;

var chart3 = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Customer Last Month Reports Summary",
    fontSize: 20
  },
  axisX: {
    labelAngle: 270,
    labelFontSize: 15
  },
  axisY: {
    interval: 10,
    maximum: 100
  },
  dataPointWidth: 40,
  data: [
    {
      type: "stackedColumn",
      legendText: "No Exceptions",
      showInLegend: "true",
      //indexLabel: "#percent %",
      dataPoints: dpnex,
      color: "green"
    },
    {
      type: "stackedColumn",
      //indexLabel: "#percent %",
      legendText: "E1 Exceptions",
      showInLegend: "true",
      dataPoints: dpe1,
      color: "yellow"
    },
    {
      type: "stackedColumn",
      //indexLabel: "#percent %",
      legendText: "E2 Exceptions",
      showInLegend: "true",
      dataPoints: dpe2,
      color: "red"
    },
    {
      type: "stackedColumn",
      //indexLabel: "#percent %",
      legendText: "E3 Exceptions",
      showInLegend: "true",
      dataPoints: dpe3,
      color: "orange"
    },
    {
      type: "stackedColumn",
      //indexLabel: "#percent %",
      legendText: "Manually Entered",
      showInLegend: "true",
      dataPoints: dpme,
      color: "blue"
    },
    {
      type: "stackedColumn",
      //indexLabel: "#percent %",
      legendText: "Overriden",
      showInLegend: "true",
      dataPoints: dporr,
      color: "grey"
    },

    {

      type: "stackedColumn",
      dataPoints: dataPoints4
    }
  ]
});

$.ajax({
  type: "GET",
  url: "https://api.myjson.com/bins/qywhs",
  dataType: "json",
  success: function(data) {
    for (var i = 0; i < data.length; i++) {
      dpnex.push({
        label: "No Exception",
        y: parseFloat(data[i].NOExceptions)
      });
      dpe1.push({
        label: "E1",
        y: parseFloat(data[i].E1Exceptions)
      });
      dpe2.push({
        label: "E2",
        y:...