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
  },
  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 License Used"});                
      }
      else if(res[j].licenseType.includes("Group")) {      	
        groupAvailable.push({label: result.licenseSummary[i].serverName, y: parseFloat(res[j].licenseData.available), name: "Group license Available"});
        groupUsed.push({label: result.licenseSummary[i].serverName, y: parseFloat(res[j].licenseData.used), name: "Group license Used"});        
      }      
    }    
  }
  data.push({type:"stackedColumn", dataPoints: userAvailable });
  data.push({type:"stackedColumn", dataPoints: userUsed });
  data.push({type:"stackedColumn", dataPoints: groupAvailable, axisYType: "secondary" });
  data.push({type:"stackedColumn", dataPoints: groupUsed, axisYType: "secondary" });

  chart.render();
  chart.axisY2[0].set("maximum", chart.axisY[0].get("maximum"))
});