CSS Barchart

by colintoh

HTML

<div id="bar-chart">
    <div id="bar-desc">
        <div id="bar-desc-wrapper">
        Overview of the question statistics
        </div>
    </div>
</div>

CSS

body{
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-family:lucida grande;
    
}

#bar-chart{
    width:1000px;
    height:300px;
    //background:rgba(0,0,0,0.6);
    border-bottom:3px solid #fff;
    font-size:30px;
    font-weight:bold;
    position:relative;
}

#bar-desc{
    position:absolute;
    bottom:-50px;
    left:0;
    width:100%;
}

#bar-desc-wrapper{
    text-align:center;
}

.bar-section{
    width:33%;
    height:100%;
    display:table;
    float:left;
}

.bar-container{
    display:table-row;
}

.bar-wrapper{
    display:table-cell;
    vertical-align:bottom;
    width:10%;
    position:relative;
}

.bar-wrapper p{
    text-align:center;
    text-shadow:0px 3px 3px rgba(0,0,0,0.9);
}

.bar-class{
    width:100%;
    -webkit-border-top-left-radius:20px;
    
}

.bar1{
    background:#02b7fa;
    height:0;
    -webkit-transition:1s ease-in-out;
    -webkit-box-shadow:10px -10px 0px #0289bb,5px -5px 0px #0289bb,10px 0px 0px #0289bb;
}

.bar2{
    background:#da20b5;
    height:0%;
    -webkit-transition:1s ease-in-out;
    -webkit-box-shadow:10px -10px 0px #a70487,5px -5px 0px #a70487,10px 0px 0px #a70487;
}

.buffer{
    width:10%;
}

JavaScript

var barArray = [{
    right: {
        'height': '70'
    },
    wrong: {
        'height': '30'
    }},
{
    right: {
        'height': '60'
    },
    wrong: {
        'height': '40'
    }},
               {
    right: {
        'height': '88'
    },
    wrong: {
        'height': '11'
    }}];

for (var i = 0; barArray[i]; i++) {
    var id = "bar-section" + i;
    var string = "";
    string += "<div class='bar-section'><div class='bar-container'></div><div class='pri bar-wrapper'><p>Q"+(i+1)+"</p><div class='bar1 bar-class'></div></div><div class='sec bar-wrapper'><div class='bar2 bar-class'></div></div><div class='buffer bar-wrapper'></div></div>";
    $('#bar-chart').append(string);
    $('.bar-section:last').attr('id', id);
    var bar1H = $('#bar-chart').height() * barArray[i].right.height /100;
    var bar2H = $('#bar-chart').height() * barArray[i].wrong.height /100;
    setTimeout(function(bar1H,bar2H,id) {
        $('#' + id + ' .bar1').css('height', bar1H+ 'px');
        $('#' + id + ' .bar2').css('height', bar2H+ 'px');
    }, 1000, bar1H,bar2H,id);
}

/*setTimeout(function(){$('.bar1,.bar2').css('height', '150px');},1000);*/