Dynamically update bar chart using javascript/html/css

January 13, 2022

Context: I’m currently iterating through a machine learning model and dynamically updating my "divs" just as text labels. I’d like to take the values that I’m currently getting, but instead of them just being text I’d like for them to be individual bars that show what the value is.

Working example: Here is a working example with comments. One this to note is that in the real code, the predict() function is constantly being called and updating the values of my current labels. So the goal is to update the value of each bar in that function. Any help on turning this into a bar chart is really appreciated.

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

Visual Example of what i’m going for roughly:

>Solution :

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>