It’s time to start drawing with data.
Let’s continue working with our simple dataset for now:
We’ll use this to generate a super-simple bar chart. Bar charts are essentially just rectangles, and an HTML
div is the easiest way to draw a rectangle. (Then again, to a web browser, everything is a rectangle, so you could adapt this example to use
spans or whatever element you prefer.)
Formally, a chart with vertically oriented rectangles is a column chart, and one with horizontal rectangles is a bar chart. In practice, most people just call them all bar charts, as I’ll do from now on.
div could work well as a data bar, shown in Figure 6-1.
Among web standards folks, this is a semantic no-no. Normally, one
shouldn’t use an empty
div for purely visual effect, but I am making
an exception for the sake of this example.
Because this is a
height are set with CSS
styles. Except for
height, each bar in our chart will share the same
display properties, so I’ll put those shared styles into a class called
bar, as an embedded style up in the
head of the document:
/* We'll override height later */