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