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
properly
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
