dynamic charts using chart.js

Question

I am using the same function to create multiple charts dynamically but, it always displays only 1 chart(last one). I am not able to figure out the bug/issue in my code.

var charts = [];
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);
}

Link : jsfiddle

Answer 1

Using of innerHTML is creating problem

 elementDom.innerHTML += "<div style='width:400px;'><canvas id='" + canvasId + "'></canvas></div>";

Instead of these create dynamic elements

  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);

 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> 

Fiddle demo