Simple animated HTML5 / CSS / jQuery bar chart

Hey all, in this article I’ll briefly go over how I made this animated bar chart with CSS and jQuery.

The demo and source are available below, I used Less, but you can view the compiled CSS in the demo, also.

Note: If you missed the animation, you can simply press “rerun” in the bottom right corner of the demo when you hover your mouse over it.

The HTML

Let’s go over the HTML. While I am sure there are multiple options for this, it seemed easiest for me to go with two ul elements inside of a div. One ul will be used for the vertical axis and values. The other one will be for the horizontal axis and values as well as the bars in the chart itself.

<div id="chart">
  <ul id="numbers">
    <li><span>100%</span></li>
    <li><span>90%</span></li>
    <li><span>80%</span></li>
    <li><span>70%</span></li>
    <li><span>60%</span></li>
    <li><span>50%</span></li>
    <li><span>40%</span></li>
    <li><span>30%</span></li>
    <li><span>20%</span></li>
    <li><span>10%</span></li>
    <li><span>0%</span></li>
  </ul>

  <ul id="bars">
    <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li><div data-percentage="44" class="bar"></div><span>Option 5</span></li>
    <li><div data-percentage="23" class="bar"></div><span>Option 6</span></li>
  </ul>
</div>

The CSS

As you can see from the HTML above, we will be using data attributes for the percentage values (height of the bars) so that we can use jQuery to animate them.

In the future, we will be able to do this using only CSS, as described here. The idea here is that in the future one could use something like

width: attr(width);
height: attr(height);

This is not yet possible, though. That being said we simply make one list go vertically and the other horizontally. The horizontal list has a child element to contain the bars, we initialize that to 0 height so that jQuery can animate it to the height of the data-percentage property

@import url(http://fonts.googleapis.com/css?family=Roboto:400+700);
body {
  background: #30303A;
  font-family: Roboto;
}
#chart {
  width: 650px;
  height: 300px;
  margin: 30px auto 0;
  display: block;
}
#chart #numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}
#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #444;
  position: relative;
  bottom: 30px;
}
#chart #numbers li:last-child {
  height: 30px;
}
#chart #numbers li span {
  color: #eee;
  position: absolute;
  bottom: 0;
  right: 10px;
}
#chart #bars {
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 600px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #444;
}
#chart #bars li {
  display: table-cell;
  width: 100px;
  height: 300px;
  margin: 0;
  text-align: center;
  position: relative;
}
#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 15px;
  background: #49E;
  position: absolute;
  bottom: 0;
}
#chart #bars li .bar:hover {
  background: #5AE;
  cursor: pointer;
}
#chart #bars li .bar:hover:before {
  color: white;
  content: attr(data-percentage) '%';
  position: relative;
  bottom: 20px;
}
#chart #bars li span {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
}

The JavaScript

The last part, the JavaScript is really simple. We will be using each() to loop through all the list items and give the bars the height of the data-percentage attribute value using some animation.

$(function() {
  $("#bars li .bar").each( function( key, bar ) {
    var percentage = $(this).data('percentage');

    $(this).animate({
      'height' : percentage + '%'
    }, 1000);
  });
});

Share the knowledge!
000000