0
224
ViewsDynamically update bar chart using javascript/html/css
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:
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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 class="percentage percentage-11"><span class="text">IE 11: 11.33%</span></dd>
<dd class="percentage percentage-49"><span class="text">Chrome: 49.77%</span></dd>
<dd class="percentage percentage-16"><span class="text">Firefox: 16.09%</span></dd>
<dd class="percentage percentage-5"><span class="text">Safari: 5.41%</span></dd>
<dd class="percentage percentage-2"><span class="text">Opera: 1.62%</span></dd>
<dd class="percentage percentage-2"><span class="text">Android 4.4: 2%</span></dd>
</dl>
·
Juan Pablo Isaza
Report
Answer question