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
Source:stackexchange.com