Create An Animated Bar Graph With HTML, CSS And jQuery - Practical JavaScript Techniques - page 57

}
return columnGroups ;

}

Here's how it breaks down:

•

Create the columnGroups[] array to store the data;

•

Get the number of columns by counting the table cells ( td ) in the first row;

•

For each column, find the number of rows in the table body ( tbody ), and create another

array to store the table cell data;

•

Then loop through each row and grab the data from each table cell (via the jQuery

text() function), and then add it to the table cell data array.

Once our object is full of juicy data, we can start creating the elements that make up our graph.

Using The Data

Using the jQuery $.each function, we can now loop through our data at any point and create
the elements that make up our graph. One of the trickier bits involves inserting the bars that
represent each species inside the yearly columns.

Here's the code:

// Loop through column groups, adding bars as we go
$ . each ( columnGroups , function ( i ) {
// Create bar group container
var barGroup = $ ( '<div class="bar-group"></div>' );
// Add bars inside each column
for ( var j = 0 , k = columnGroups [ i ]. length ; j < k ; j ++ ) {
// Create bar object to store properties (label, height, code, etc.) and
add it to array
// Set the height later in displayGraph() to allow for left-to-right
sequential display
var barObj = {};
barObj . label = this [ j ];