JSFiddle - React, Tailwind, and code Playground

by untg99

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 dataPointsR = [];

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "stackedBar using JSOdata"
    },
   data: dataPointsR
});

$.ajax({
type: 'GET',
url: 'https://s3-ap-southeast-2.amazonaws.com/fiddlef/KPIReport.json',
dataType: 'json',
success: function(data) {
console.log("Data is: " + data);
$.each(data, function(key, val) {
   var dataPointR = [];
   console.log("NEW OBJECT HERE\n")
   console.log("Have items as: " + key + " : "+ val)
   $.each(val, function(key2, val2) {
   var DateEpoch = ConvertDate(key2);
      console.log("Have other items as: " + key2 + " : " + val2);
       dataPointR.push({"x": DateEpoch, "y": val2})
   })
   dataPointsR.push({"toolTipContent":"{label}<br/>{name}, <strong>{m} {y}</strong>","showInLegend":"true","type":"stackedColumn","xValueType":"dateTime","name": key ,"dataPoints": dataPointR})
})

$.each(dataPointsR, function(key5, val5){
   console.log("NEW OBJECT HERE\n");
   console.log("Have key and val as: " + key5 + ":" + val5);
$.each(val5, function(key6, val6){
      console.log("Have key and val as: " + key6 + ":" + val6);
})
})

  for (var i = 0; i < data.length; i++) {
    dataPoints1.push({
      x: data[i].x,
      y: data[i].y1
    });
     dataPoints2.push({
      x: data[i].x,
      y: data[i].y2
    });
     dataPoints3.push({
      x: data[i].x,
      y: data[i].y3
    });
  }
   
  chart.render();
}
});

function ConvertDate(dateToConvert) {
    
var parts = dateToConvert.match(/(\d{4})\-(\d{2})\-(\d{2})/);
var returnDate = Date.UTC(+parts[1], parts[2], +parts[3]);//, +parts[4], +parts[5]);
console.log("Converted date to: " + returnDate);
return returnDate;
}