Join Chris Converse for an in-depth discussion in this video Adding markup for chart bars, part of Creating an Animated Bar Chart with jQuery.
Now the bars of our chart are actually going to be created out of div elements,…and so what we're going to do is inside of the chart-area div let's hit a return…and let's add some divs inside of here.…So I'll start the first div tag, div space, and the first attribute is going to…be an attribute that we make up, call bar-value.…We're going to set that equal to, two quotes then 376 as the value, hit a space.…Label equals two quotes, again another variable we're making up.…
We'll call this Sporting, hit a space.…Next we'll type class, this is going to equal chart-bar then a space and add…a second class called sporting, and we'll end that div tag.…So what we're doing here is adding in the sporting class and the chart-bar class…to this particular div and bar value is going to be the height that that bar is…going to animate to, and the label Sporting is going to be what we're going to…add to the X Axis when we generate the different bars across the chart.…
Now to save us a little time, let's come over to code snippets.…
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