Create an Animated Bar Chart with jQuery
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 codifydesign.com.
- 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
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.
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.
HTML5 Projects: Interactive Charts36,524 Views
Create an Expandable FAQ Listing with jQuery38,819 Views
Create Animated Rollovers with jQuery42,905 Views
HTML5: Geolocation in Depth79,803 Views
HTML5 Projects: Personalized Ads33,754 Views
PHP with MySQL Essential Training3,907,848 Views
Deke's Techniques1,435,609 Views
Git Essential Training2,578,682 Views
PHP with MySQL Beyond the Basics2,199,079 Views