Dynamically update bar chart using javascript/html/css-CodePudding

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:

CodePudding user response：

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 >${classPrediction}</div>
            <div >
              <div  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>

CodePudding user response：

For visualizing your predictability bars you can do something like what I found from CSS-tricks - Making Charts with CSS. note: the snippet might not work here so check it out in the link above or test it in codepen.io

dl {
  display: flex;
  background-color: white;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  position: relative;
  padding: 20px;
}

dt {
  align-self: flex-start;
  width: 100%;
  font-weight: 700;
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 20px;
  margin-left: 130px;
}

.text {
  font-weight: 600;
  display: flex;
  align-items: center;
  height: 40px;
  width: 130px;
  background-color: white;
  position: absolute;
  left: 0;
  justify-content: flex-end;
}

.percentage {
  font-size: .8em;
  line-height: 1;
  text-transform: uppercase;
  width: 100%;
  height: 40px;
  margin-left: 130px;
  background: repeating-linear-gradient(
  to right,
  #ddd,
  #ddd 1px,
  #fff 1px,
  #fff 5%
);
  
  &:after {
    content: "";
    display: block;
    background-color: #3d9970;
    width: 50px;
    margin-bottom: 10px;
    height: 90%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .3s ease;
    cursor: pointer;
  }
  &:hover,
  &:focus {
    &:after {
       background-color: #aaa; 
    }
  }
}

@for $i from 1 through 100 {
  .percentage-#{$i} {
    &:after {
      $value: ($i * 1%);
      width: $value;
    }
  }
}

html, body {
  height: 500px;
  font-family: "fira-sans-2",sans-serif;
  color: #333;
}

<dl>
  <dt>
    Browser market share June 2015
  </dt>
  <dd ><span >IE 11: 11.33%</span></dd>
  <dd ><span >Chrome: 49.77%</span></dd>
  <dd ><span >Firefox: 16.09%</span></dd>
  <dd ><span >Safari: 5.41%</span></dd>
  <dd ><span >Opera: 1.62%</span></dd>
  <dd ><span >Android 4.4: 2%</span></dd>
</dl>