Join Chris Converse for an in-depth discussion in this video Adding label and value text to the bars, part of Creating an Animated Bar Chart with jQuery.
So the first thing we want to do is put a paragraph tag inside of each one of…the chart-bar divs and put the value inside of the p tag.…So let's add another line after the this.CSS jQuery statement.…Let's create another jQuery statement,…$(this).html();.…Inside of the parentheses, we're going to type two tick mark for a string…literal, we're going to put a p tag.…
After the string literal but still inside of the parenthesis, we're going to…type a plus sign, another jQuery statement,…$(this).attr for attribute('bar-value').…Outside of the parenthesis we're going to type a plus sign, two tick marks for a…string literal, and then we're going to end the paragraph tag.…
Next we're going to add a paragraph tag inside of each one of the chart X axis,…so that we can line those up on the X axis right underneath the bars.…So let's type a $('.chart-x-axis').append();.…So what append is going to do is add each one of these items into the…chart-x-axis to the last item that we added.…
So it's going to continue to append each one of these items.…
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