JS bar charts

by Florian Bar

HTML

<a href="#" class="button" id="resetChart">Reset charts</a>

<ul class="bar-chart">
    <li class="bar-chart__item red" data-bar-value="100"></li>
    <li class="bar-chart__item orange" data-bar-value="75"></li>
    <li class="bar-chart__item green" data-bar-value="50"></li>
    <li class="bar-chart__item blue" data-bar-value="25"></li>
</ul>

<ul class="bar-chart">
    <li class="bar-chart__item red" data-bar-value="100"></li>
    <li class="bar-chart__item orange" data-bar-value="75"></li>
    <li class="bar-chart__item green" data-bar-value="50"></li>
    <li class="bar-chart__item blue" data-bar-value="25"></li>
</ul>

CSS

body { padding: 15px; }
.button {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    background-color: #eee;
    margin: 0 0 15px;
} 
.bar-chart { 
    margin: 0 0 20px; 
    padding: 0; 
    list-style-type: none; 
}
.bar-chart__item {
    height: 10px;
    margin: 0 0 5px;
    background-color: #eee;
}
.bar-chart__indicator {
    display: block;
    width: 0%;
    height: 10px;
    background-color: #666;
    transition: width 1s ease-in-out 0.75s;
}
.red .bar-chart__indicator {
    background-color: rgb(244, 67, 54);
}
.blue .bar-chart__indicator {
    background-color: rgb(33, 150, 243);
}
.green .bar-chart__indicator {
    background-color: rgb(76, 175, 80);
}
.orange .bar-chart__indicator {
    background-color: rgb(255, 152, 0);
}

JavaScript

var charts = document.querySelectorAll('.bar-chart');

console.log(document.querySelectorAll('.bar-chart .bar-chart__item').length);

for (var c = 0; c < charts.length; c++) {
    var bars = charts[c].querySelectorAll('.bar-chart__item');

    for (var b = 0; b < bars.length; b++) {
        var bar = bars[b];
        var value = bar.getAttribute("data-bar-value");
        bar.innerHTML = '<div class="bar-chart__indicator" />';
		var indicator = bar.querySelectorAll('.bar-chart__indicator')[0];
        
        setBarWidth(indicator, value);
    }
}

function setBarWidth(indicator, value) {
    setTimeout(function () {
    	indicator.style.width = value + '%';
    }, 1);
}

function resetBarWidth(charts) {    
    for (var c = 0; c < charts.length; c++) {
        var bars = charts[c].querySelectorAll('.bar-chart__item');

        for (var b = 0; b < bars.length; b++) {
            var bar = bars[b];
            var indicator = bar.querySelectorAll('.bar-chart__indicator')[0].style.width = '0%';
        }
    }
}

document.getElementById('resetChart').addEventListener("click", function () {    
    resetBarWidth(charts);
});