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
() {
…
},
