Create an Animated Bar Chart with jQuery

with Chris Converse
please wait ...
Create an Animated Bar Chart with jQuery
Video duration: 0s 39m 36s Intermediate


In this course, Chris Converse creates an animated bar chart or other visual graphic with jQuery. This approach is dynamic, allowing a designer to adjust the size of a chart and letting jQuery calculate the new position and size of the bars based on the data associated with each bar. The course also covers designing the chart with HTML and CSS, as well as creating labels and timing delays with jQuery.

To preview the finished project, visit

Topics include:
  • Adding markup for chart bars
  • Adding jQuery and CSS to an HTML document
  • Declaring and setting the global variables
  • Writing a custom function to position the bars
  • Adding labels and value text to the bars
  • Animating the bars based on their value
  • Fading in bar values labels after the bar animations
  • Adjusting chart sizing by updating CSS values
3D + Animation Business Web

Previewing the final project

- [Voiceover] Hi, this is Chris Converse and this is a course on creating an animated bar chart. I want to start by opening the exercise files and showing you the final project we're going to be creating throughout this course. We're going to start by opening the index.html file. Like you'll notice when this opens right away we have a bar chart in the center here. Each of the bars will animate in succession, and after each bar animates we'll have a label that fades on showing us the value of each one of the chart bars. I'll hit reload on here so we can see this one more time. Now the technique we're going to use to build this is going to be a hybrid approach between static design and dynamic design.

We're going to be using HTML and CSS to construct the outer shell of the chart, and then we're going to use JavaScript and jQuery to calculate the height of each one of the bars both in relation to each other and in relation to the overall height of the chart. This will give us the ability to change the height and dimensions of the chart and have the bars redraw themselves based on that relationship. To show an example of that working I'm going to open up another page here. In the first version we have the same chart, with changes being made to the overall width of the chart, the number of bars, and the height of the chart.

So if I hit reload here, I'll get the exact same animation. The relative heights of each of these items in relation to the overall chart is changing. And I'll show a second example, and hit reload of the same chart again showing more bars, and the overall height being much less than the taller version, and we can see the bars are drawing themselves in relation to each other and the height of the overall chart as well. So this gives us a lot of flexibility through CSS to change parameters of our chart and not have to go back and recalculate the individual heights. The other consideration we have in here is we're using a little bit of CSS3 here to create semi-transparency in the backgrounds and round the corners on the individual bars.

Some of these techniques are not going to translate to IE7 and 8 so what we've done here is provided two sets of CSS alternatives for Internet Explorer. Option one will allow us to use a semi-transparent ping file to maintain some of that transparency effect that we have here. And the trade off to this approach is since we are using a background ping we can't use the individual icon background graphics for the individual bars. Whereas option two gives us the ability to pick a solid color in the background and still use the background image to bring in the individual icons.

So it's your choice on how you want this design to translate to IE7 and 8, and you'll find these files inside of the Internet Explorer ie.css file that we'll talk about in the next video where we go through the individual files that are included in the exercise files. So I hope this sounds interesting, and if so, let's get started with the first movie.

please wait ...