Current Situation: I am currently in the process of iterating through a machine learning model and dynamically updating my "divs" as text labels. My goal is to transform these values into individual bars that visually represent the values instead of just displaying them as text.
Example In Action: Here's an example that illustrates what I'm working on. It's worth noting that the real code includes a function called predict() that continuously updates the values of the labels. The ultimate objective is to update the value of each bar within this function. Any assistance in converting this into a bar chart would be greatly appreciated.
let labelContainer = document.getElementById("label-container");
let maxPredictions = 8;
// this object is being updated constantly
let prediction = [
{
"className": "Prediction 1",
"probability": .1
},
{
"className": "Prediction 2",
"probability": .2
},
{
"className": "Prediction 3",
"probability": .05
},
{
"className": "Prediction 4",
"probability": .25
},
{
"className": "Prediction 5",
"probability": .1
},
{
"className": "Prediction 6",
"probability": .20
},
{
"className": "Prediction 7",
"probability": .05
},
{
"className": "Prediction 8",
"probability": .05
}
];
function init() {
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
// this function is constantly being called
function predict() {
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
init();
predict();
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="label-container"></div>
</body>Desired Visual Outcome: