dynamic charts using chart.js

var impVolId = "idImpVolume";

var OverviewData = {
  "ImpDiskSpace": [{
    "Application": "LOS",
    "Server": "192.168.1.1",
    "DriveLetter": "D",
    "DriveLabel": "Local Drive",
    "SizeUsed": 450,
    "SizeFree": 50,
    "Threshold": [440, 480] //[ warning,critical]
  }, {
    "Application": "RAS",
    "Server": "192.168.3.2",
    "DriveLetter": "H",
    "DriveLabel": "RAS1",
    "SizeUsed": 460,
    "SizeFree": 40,
    "ThresholdWarning": 440,
    "ThresholdCritical": 480
  }]
}



var chart$ = (function() {

  var charts = [];

  var MakeDoughnut = function(canvasId, inputData, title) {
    if (canvasId !== null && canvasId !== undefined && canvasId.length > 0) {
      //valid canvas id
      if (inputData && inputData.length > 0) {
        // valid data
        if (title && title.length >= 0) {
          return drawChart(canvasId, "doughnut", ["Used", "Free"], inputData, title);
        } else {
          console.error("MakeDoughnut - invalid chart Title");
          return;
        }
      } else {
        //no data
        console.error("MakeDoughnut - invalid chart data");
        return;
      }
    } else { //invalid canvas id
      console.error("MakeDoughnut - invalid canvas id");
      return;
    }
  }

  function drawChart(canvasId, type, labels, inputData, title) {
    charts[canvasId] = new Chart(document.getElementById(canvasId), {
      type: type,
      data: {
        borderWidth: 5,
        labels: labels,
        datasets: [{
          backgroundColor: ["#008000", "#FF00FF", "#808000", "#00FF00", "#00FFFF", "#008080", "#0000FF", "#000080"],
          data: inputData
        }]
      },
      options: {
        cutoutPercentage: 70,
        title: {
          display: true,
          text: title,
          //   position:'left' //defaults to 'top'
        }
      }
    });
    return (charts[canvasId] !== null);
  }

  return {
    MakeDoughnut: MakeDoughnut,
  }
}());

var ui$ = (function() {
  var BuildDiskspace = function(parentId, inputData) {

    if (parentId == null || parentId.length <= 0) {
      console.error("BuildDiskspace : Root container id is invalid!")
      return false;
    }

    if (inputData == null || inputData.length <= 0) {
      console.error("BuildDiskspace : Input data is null/undefined or has no items in it!")
      return false;
    }
    var strHtml = "";
    var elementDom = document.getElementById(parentId);
    for (var index = 0; index < inputData.length; index++) {
      var element = inputData[index];
      var canvasId = "diskCanvasId" + index;

      var canvasDiv = document.createElement('div');
      canvasDiv.setAttribute("style", "width:400px");
      var canvasElem = document.createElement('canvas');
      canvasElem.setAttribute("id", canvasId);
      canvasDiv.appendChild(canvasElem)

      elementDom.appendChild(canvasDiv);

      if (!chart$.MakeDoughnut(canvasId, [element.SizeUsed, element.SizeFree], element.Server + " - " + element.DriveLetter + " : " + element.DriveLabel)) {
        console.error("BuildDiskspace : Error While building Chart for diskspace!");
        continue;
      }
    }
    return true;
  }
  var showElement = function(elements, display) {

    if (display) {
      for (var i = 0; i < elements.length; i++) {
        document.getElementById(elements[i]).style.display = display;
      }
    } else {
      for (var i = 0; i < elements.length; i++) {
        document.getElementById(elements[i]).style.display = "block";
      }
    }
  };
  return {
    BuildDiskspace: BuildDiskspace,
    showElement: showElement
  };

})();


if (ui$.BuildDiskspace(impVolId, OverviewData.ImpDiskSpace)) {
  ui$.showElement([impVolId], "flex");
} else {
  ui$.showElement([impVolId], "flex");
  document.getElementById(impVolId).innerHTML = "<h4>All is Well !!</h4>";
}

.flex-flow-row {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  flex-direction: row;
  flex-grow: 1;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<div id="idImpVolume" class="flex-flow-row" style="display:none;">
</div>