Join Chris Converse for an in-depth discussion in this video Writing a custom function to position the bars, part of Create an Animated Bar Chart with jQuery.
Now that our global variables are being defined once the document ready has…triggered, let's add a few lines after the document ready and let's create a…first custom function.…So let's type function, space, positionBars.…That's going to be the name of our function, beginning and ending parenthesis,…beginning and ending bracket. Let's split that open on the bracket.…So inside of here, what we're going to do first is figure out how many times we…see chart-bar inside of the chart-area.…So if we switch back to our HTML really quick;…inside of here we have all of the chart-bar classes defined to each one of these…divs inside of the chart-area.…
So what we're going to do over here in jQuery is run in each statement, pick out…each time we find that particular instance.…So let's add a dollar sign, beginning and ending parenthesis, two tick marks…inside, first string literal, dot chart- area which is targeting the parent div…space dot chart-bar.…Outside the parenthesis we're going to type dot each beginning and ending…
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