Vertical and Horizontal CSS Bar Graph

• Posted: September 10, 2008
• |
• Author: Vorleak Chy
• |
• Filed under: CSS
• |
• Tags: CSS, Statistics, Web, XHTML

Currently, you may be running a website for long time which is also more popular and getting more visitors everyday, So it is time to do advertising if you don’t have.

Before that, how do you know your website has more visitors or not? What you need to do is looking to the statistic which is very important for you to sell advertisement.

Even there are more stats plugins available for you such as google stats or the others but you may need to customize for yourself with nice graph and flexible way.

What is a Bar Graph?

A bar graph is a visual display used to compare the amounts or frequency of occurrence of different characteristics of data. This type of display allow us to compare groups of data and to make generalizations about the data quickly.

Vertical CSS Bar Graph

This is a bar graph to display the number of visits per month in year 2007.
You may want to make it like this:

You need to have two images:

1. The column image: For this example the width is always 35px and the height is flexibility which base on formula Value / MaxValue * MaxHeight and rounded to the nearest number. For example data in here is starting from January: 10000 / 100000 * 200 = 20, 17000 / 100000 * 200 = 34, and so on
2. The background line image

XHTML Codes

<table id="bargraphVertical">
    <tbody><tr><th>Visits 2007</th>
        <td>10000<img src="column.gif" alt="10000" width="35" height="10"></td>
        <td>17000<img src="column.gif" alt="17000" width="35" height="34"></td>
        <td>24000<img src="column.gif" alt="24000" width="35" height="48"></td>
        <td>30000<img src="column.gif" alt="30000" width="35" height="60"></td>
        <td>35000<img src="column.gif" alt="35000" width="35" height="70"></td>
        <td>40000<img src="column.gif" alt="40000" width="35" height="80"></td>
        <td>50000<img src="column.gif" alt="50000" width="35" height="100"></td>
        <td>60000<img src="column.gif" alt="60000" width="35" height="120"></td>
        <td>70000<img src="column.gif" alt="70000" width="35" height="140"></td>
        <td>80000<img src="column.gif" alt="80000" width="35" height="160"></td>
        <td>90000<img src="column.gif" alt="90000" width="35" height="180"></td>
        <td>100000<img src="column.gif" alt="100000" width="35" height="200"></td>
    </tr></tbody>
    <tfoot><tr><th>Month</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sep</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
</tr></tfoot>
</table>

CSS Codes

#bargraphVertical{
  font:0.7em Arial;
  width:475px;
  border:1px solid #ccc;
}
#bargraphVertical td{
  padding:0;
  margin:0;
  vertical-align:bottom;
  text-align:center;
  background:#eee url(graphbg.gif) 15px bottom;
}
#bargraphVertical img{
  display:block;
  border-right:1px solid #fff;
}
#bargraphVertical th{
  font-weight:normal;
}

Horizontal CSS Bar Graph

This is a bar graph to display the number of visitors within countries.
It is very similar to the Vertical Bar Graph implementation. We use this when the label is longer text such “REPUBLIC OF KOREA” as an example.

You need to have one image:

The row image: For this example the height is always 10px and the width is flexibility which base on formula Value / MaxValue * MaxWidth and rounded to the nearest number. For example data in here is starting from CAMBODIA: 100000 / 100000 * 200 = 20, 90000 / 100000 * 200 = 180, and so on

XHTML Codes

<table id="bargraphHorizontal"><tbody>
  <tr>
    <th class="label">Country</th>
    <th class="val">Visitors</th>
  </tr>
  <tr>
    <td class="label">CAMBODIA</td>
    <td class="val"><img src="row.gif" width="200" height="10"> 100000</td>
  </tr>
  <tr>
    <td class="label">UNITED STATES</td>
    <td class="val"><img src="row.gif" width="180" height="10"> 90000</td>
  </tr>
  <tr>
    <td class="label">AUSTRALIA</td>
    <td class="val"><img src="row.gif" width="160" height="10"> 80000</td>
  </tr>
  <tr>
    <td class="label">Unknown</td>
    <td class="val"><img src="row.gif" width="140" height="10"> 70000</td>
  </tr>
  <tr>
    <td class="label">FRANCE</td>
    <td class="val"><img src="row.gif" width="120" height="10"> 60000</td>
  </tr>
  <tr>
    <td class="label">THAILAND</td>
    <td class="val"><img src="row.gif" width="100" height="10"> 50000</td>
  </tr>
  <tr>
    <td class="label">REPUBLIC OF KOREA</td>
    <td class="val"><img src="row.gif" width="80" height="10"> 40000</td>
  </tr>
  <tr>
    <td class="label">CANADA</td>
    <td class="val"><img src="row.gif" width="70" height="10"> 35000</td>
  </tr>
  <tr>
    <td class="label">JAPAN</td>
    <td class="val"><img src="row.gif" width="60" height="10"> 30000</td>
  </tr>
  <tr>
    <td class="label">SINGAPORE</td>
    <td class="val"><img src="row.gif" width="48" height="10"> 24000</td>
  </tr>
</tbody></table>

CSS Codes

#bargraphHorizontal{
  font:0.7em Arial;
  border:1px solid #ccc;
}
#bargraphHorizontal th{
  font-weight:normal;
}
#bargraphHorizontal td{
  padding:1px 0;
  margin:0;
}
#bargraphHorizontal .label{
  text-align:right;
}
#bargraphHorizontal .val{
  text-align:left;
}
#bargraphHorizontal img{
  vertical-align:middle;
}

• (3) Comments
• Permalink
• RSS 2.0