HTML and CSS Reference
In-Depth Information
•
Loop inside each column to get the row and cell data;
•
Create a bar object (
barObj{}
) to store the properties for each bar, such as its label,
height and mark-up;
•
Add the mark-up property to the column, applying a CSS class of
'.fig'+j
to color
code each bar in the column, wrapping the label in a
span
;
•
Add the object to our
bars[]
array so that we can access the data later;
•
Piece it all together by adding the columns to a container element.
Bonus points if you noticed that we didn't set the height of the bars. This is so that we have
more control later on over how the bars are displayed.
Now that we have our bars, let's work on labelling our graph. Because the code to display the
labels is quite similar, talking you through all of it won't be necessary. Here's how we display
the y-axis:
// Add y-axis to graph
var
yLegend
=
tableData
.
yLegend
();
var
yAxisList
=
$
(
'<ul class="y-axis"></ul>'
);
$
.
each
(
yLegend
,
function
(
i
) {
var
listItem
=
$
(
'<li><span>'
+
this
+
'</span></li>'
)
.
appendTo
(
yAxisList
);
});
yAxisList
.
appendTo
(
graphContainer
);
This breaks down as follows:
•
Get the relevant table data for our labels,
•
Create an unordered list (
ul
) to contain our list items;
•
Loop through the label data, and create a list item (
li
) for each label, wrapping each
label in a
span
;
•
Attach the list item to our list;
•
Finally, attach the list to a container element.
