Graphics Programs Reference

In-Depth Information

All the
tbody
table rows are set to a
width
of
10%
because you want to place them side by

side, and there are 10 of them, so 100% (the full width of the table) divided by 10 is 10. h en

just place the rows next to each other (see Figure 6-17).

#day02
{
left
:
10%
;}

#day03
{
left
:
20%
;}

#day04
{
left
:
30%
;}

#day05
{
left
:
40%
;}

#day06
{
left
:
50%
;}

#day07
{
left
:
60%
;}

#day08
{
left
:
70%
;}

#day09
{
left
:
80%
;}

#day10
{
left
:
90%
;}

tbody
td
{
bottom
:
0
;}

225

Figure 6-17: Setting up the containment for each bar of the graph.

h is is kind of the tedious part: writing out the let of set for every row. Just imagine doing it

for a whole month! (h at is why you get a script to write this sort of thing out for you instead

of doing it by hand, of course. More on that later.)

At this point, make the bars stand up as appropriate. And this is where it gets really tedious,

because a height has to be computed for every single one and then assigned. Just to get

started, the highest value needs to be determined; in this case, it's
251,969
. h en pick a value

at or above that which represents the very top of the graph. It could be 260,000; 275,000; or

even 300,000. For this example, go with 260,000.

Having done that, next divide every single value by that maximum to get a percentage. So for

the i rst row, which contains the numbers
151,308
and
70,342
, the percentages are 58.2%

and 27.05%, respectively. h ose are the
height
values to assign to the
td
elements in the

Search WWH ::

Custom Search