HTML and CSS Reference
In-Depth Information
Next up, we'll declare some variables to manage our data and container elements, plus some
timer variables for animation. Here's the code:
// Declare some common variables and container elements
var bars = [];
var figureContainer = $ ( '<div id="figure"></div>' );
var graphContainer = $ ( '<div class="graph"></div>' );
var barContainer = $ ( '<div class="bars"></div>' );
var data = $ ( data );
var container = $ ( container );
var chartData ;
var chartYMax ;
var columnGroups ;
// Timer variables
var barTimer ;
var graphTimer ;
Nothing too exciting here, but these will be very useful later.
Getting The Data
Besides simply displaying the data, a good bar chart should have a nice big title, clearly
labelled axes and a color-coded legend. We'll need to strip the data out of the table and format
it in a way that is more meaningful in a graph. To do that, we'll create a JavaScript object that
stores our data in handy little functions. Let's give birth to our tableData{} object:
// Create table data object
var tableData = {
// Get numerical data from table cells
chartData : function () {
// Get heading data from table caption
chartHeading : function () {
Search WWH ::

Custom Search