Join Chris Converse for an in-depth discussion in this video Animating the bars based on their value, part of Create an Animated Bar Chart with jQuery.
- View Offline
Now to animate the bars of our chart we are going to create a new function.…So after the function positionBars I will type function, space, animateChart,…beginning and ending parentheses, beginning and ending bracket. Split the brackets open.…Now inside of the animateChart function we are going to type a jQuery statement,…dollar sign, parenthesis, two tick marks for a string literal,….chart-area, space, .chart-bar.…
After the parenthesis we are going to type .each, beginning and ending…parentheses, semicolon.…Inside of the each statement we are going to type function, beginning and ending…parentheses, beginning and ending bracket.…Split that function open. So we are going to search for each of the chart bars…inside of the chart area, and when we find each one the first thing we are going…do is set a variable.…So var, space, revisedValue, we are going to set that equal to, we're going to…type Number, beginning and ending parentheses, semicolon. Inside of Number we are…going to put a jQuery statement, dollar sign, beginning and ending parentheses,…
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