HTML and CSS Reference
In-Depth Information
By repeating this technique, we can add the legend, x-axis labels and headings for our graph.
Before we can display our graph, we need to make sure that everything we've done is added
to our container element.
// Add bars to graph
barContainer . appendTo ( graphContainer );
// Add graph to graph container
graphContainer . appendTo ( figureContainer );
// Add graph container to main container
figureContainer . appendTo ( container );
Displaying The Data
All that's left to do in jQuery is set the height of each bar. This is where our earlier work, storing
the height property in a bar object, will come in handy.
We're going to animate our graph sequentially, one by one, uno por uno.
One possible solution is to use a callback function to animate the next bar when the last
animation is complete. However, the graph would take too long to animate. Instead, our graph
will use a timer function to display each bar after a certain amount of time, regardless of how
long each bar takes to grow. Rad!
Here's the displayGraph() function:
// Set the individual height of bars
function displayGraph ( bars , i ) {
// Changed the way we loop because of issues with $.each not resetting
if ( i < bars . length ) {
// Animate the height using the jQuery animate() function
$ ( bars [ i ]. bar ). animate ({
height : bars [ i ]. height
}, 800 );
// Wait the specified time, then run the displayGraph() function again
Search WWH ::

Custom Search