Grouped Stacked Column based on License Type - CanvasJS JavaScript Charts

Grouped Stacked Column based on License Type - 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 data = [];
var chart = new CanvasJS.Chart("chartContainer", {
  axisY: {
    title: "Count →"
  },
  axisY2: {  
    lineThickness: 0,    
    tickLength: 0,
    labelFormatter: function(e){
      return "";
    }
  },
  toolTip: {
  	shared: true,
    contentFormatter: function(e){
    	var content = "";
      var totalUserLicense = 0, totalGroupLicense = 0;
    	for(var i = 0; i < e.entries.length; i++) {
      	if(e.entries[i].dataPoint.name.includes("User")) {
        	totalUserLicense += e.entries[i].dataPoint.y;
        }
        if(e.entries[i].dataPoint.name.includes("Group")) {
        	totalGroupLicense += e.entries[i].dataPoint.y;
        }
      }
      content += "<strong>Total User License: " + totalUserLicense + "</strong><br/>";
      for(var i = 0; i < e.entries.length; i++) {      	
      	if(e.entries[i].dataPoint.name.includes("User")) {
        	content += (e.entries[i].dataPoint.name + ": "+ e.entries[i].dataPoint.y + "<br/>");
        }
      }
      content += "<br/><strong>Total Group License: " + totalGroupLicense + "</strong><br/>";
      for(var i = 0; i < e.entries.length; i++) {      	
      	if(e.entries[i].dataPoint.name.includes("Group")) {
        	content += (e.entries[i].dataPoint.name + ": "+ e.entries[i].dataPoint.y + "<br/>");
        }
      }
      return content;
    }
  },
  data: data
});

var userAvailable = [];
var userUsed = [];
var groupAvailable = [];
var groupUsed = [];

$.getJSON("https://api.myjson.com/bins/1flvl8", function(result){
  var res;
  for(var i=0;i<result.licenseSummary.length;i++){
    res = result.licenseSummary[i].licenseData;    
    for(var j=0;j<res.length;j++){
      if(res[j].licenseType.includes("User")) {      	
        userAvailable.push({label: result.licenseSummary[i].serverName, y: parseFloat(res[j].licenseData.available), name: "User License Available"});        
        userUsed.push({label: result.licenseSummary[i].serverName, y: parseFloat(res[j].licenseData.used), name: "User...