Can anyone assist me with adjusting the width of bars in a horizontal bar graph based on percentage data? Check out my code on jsfiddle here
Thank you in advance!
var data = {
"box1": {
"bar1": "80%",
"bar2": "60%",
"bar3": "40%",
"bar4": "50%",
"total": "60%",
},
};
$(document).ready(function() {
$(".score-text").html(data.box1.total);
$(".data").text(data.box1.bar1);
$(".data").text(data.box1.bar2);
$(".data").text(data.box1.bar3);
$(".data").text(data.box1.bar4);
});
body {
background: #efefef;
width: 100%;
margin: 0px;
text-align: center;
}
h2 {
font-family: 'Noto Sans', serif;
color: #b71f38;
font-weight: 300;
margin: 0px;
}
h3 {
font-family: 'Noto Sans', serif;
color: #444444;
font-weight: 200;
margin: 0px;
}
#colLeft {
width: 50%;
float: left;
}
#colRight {
width: 50%;
float: right;
}
#row {
background: #e2e2e2;
width: auto;
height: 230px;
margin: 15px;
border-radius: 5px;
}
#insideColLeft {
width: 30%;
float: left;
}
#insideColRight {
width: 69%;
float: right;
padding-top: 8px;
padding-right: 5px;
}
.circle {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
width: 150px;
position: relative;
background: #b71f38;
}
.circle:before {
content: "";
display: block;
padding-top: 100%;
}
.circle-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.score-text {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
line-height: 1em;
font-size: 30px;
font-family: 'Fjalla One', sans-serif;
color: #ffffff;
}
.date {
font-family: 'Fjalla One', sans-serif;
text-align: center;
color: #333333;
}
ul.graph {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.graph li {
margin: 10px;
height: 25px;
background: #ccc;
color: #fff;
}
ul.graph li.data {
background: #f4ebb8;
}
<div id="row">
<h2>Title</h2>
<h3>Subtitle</h3>
<div id="insideColLeft">
<div class="circle">
<div class="circle-inner">
<div class="score-text">
</div>
</div>
</div>
</div>
<div id="insideColRight">
<ul class="graph">
<li class="data">bar 1</li>
<li class="data">bar 2</li>
<li class="data">bar 3</li>
<li class="data">bar 4</li>
</ul>
</div>
</div>If I have multiple datasets, how can I create a loop to iterate through each one? Also, if I want to load data from a local CSV file, check out the updated js fiddle here