Bar Chart Table

Percentage of budget   Budget   Value 50%  100%  150%  200%    Travel  25488    Internet  9999    Qualification  43215    Salaries  500000

One BarChart consists of 3 tables (apart from the main table layout):

1. table_1 sits in a table cell with 400 pixel in width and devides it into two equally sized parts (50% width each)
2. table_2 is in the left part (100% width)
3. table_3 is in the right part (100% width)

The style sheet class "frame" is applied to table_2 in order to render the black 100%-frame.
The colored bar is rendered by a GIF which has a width of 1px and a height of 12px.
This bar is located in table_2 and table_3 and is "streched" according to the calculated BarChart value.
As long as the chart value is <=100%, the GIF in table_3 is "trans_bar.gif": an invisible transparent GIF.
If the chart value exceeds 100%, "red.gif" will replace the other GIFs in both cells .
If the chart value is 0%, the GIF is trans_bar.gif in table_2 as well.

with 150% scale

Percentage of budget   Budget   Value 50%  100%  150%    Travel  25488    Internet  9999    Qualification  43215    Salaries  500000

with 100% scale

Percentage of budget   Budget   Value 50%  100%    Travel  25488    Internet  9999    Qualification  43215    Salaries  500000

with smaller scale

Percentage of budget   Budget   Value 50%  100%  150%  200%    Travel  25488    Internet  9999    Qualification  43215    Salaries  500000

 top