Dynamically update bar chart using javascript/html/css
This is something you could work with as a starter template.
I multiplied the value * 100 for visuals.
let labelContainer = document.getElementById("label-container");
let maxPredictions = 8;
// this object is constantly being updated
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
let el = document.createElement("div")
el.className = 'prediction-bar'
labelContainer.appendChild(el);
}
}
// 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 = `
<div class="name-progress">${classPrediction}</div>
<div class="progress">
<div class="inner-progress" style="width:${prediction[i].probability.toFixed(2)*100}%">${prediction[i].probability.toFixed(2)*100}%
</div>
</div>`;
}
}
init();
predict();#label-container > div {
margin: 0.5em;
}
.prediction-bar {
display: flex;
}
.progress {
flex: 1;
background: #000;
position: relative;
border-radius: 0.25rem;
padding: 0.25rem;
position: relative;
overflow: hidden;
color: #fff;
margin-left: 1rem;
}
.inner-progress {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: red;
text-align: right;
}<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>