HTML Horizontal And Vertical Bar Charts

Apr 12, 2007
by:   Tim Stanley

Displaying tabular information in a graphical form is helpful for a visual representation of the data. I've summarized a few simple techniques for displaying information in an HTML page in both horizontal and vertical form.

There are a few techniques I've used to make this simple.

  1. A table is used for the data
  2. An image is used for the horizontal data
  3. The values shown are the width of the image (or proportional)
  4. An image is used for the vertical data
  5. The values shown are the height of the image (or proportional)

Horizontal Bar Chart Sample

Pages Completed Per Month
Jan
120

120

Feb
220

220

Mar
267

267

Apr
275 

275

 

Sample Horizontal Table Data

<div class="BarTable">
    <table>
        <caption>Pages Completed Per Month</caption>
        <tr>
            <td><div class="BarLabel"">Jan</div></td>
            <td class="BarFull">
                <img src="hk.png" height="12" alt="320" width="320" />
                <p>320</p>
            </td>
        </tr>
        <tr>
            <td><div class="BarLabel"">Feb</div></td>
            <td class="BarFull">
                <img src="hp.png" height="12" alt="420" width="420" />
                <p>420</p>
            </td>
        </tr>
        <tr>
            <td><div class="BarLabel"">Mar</div></td>
            <td class="BarFull">
                <img src="hh.png" height="12" alt="467" width="467" />
                <p>467</p>
            </td>
        </tr>
        <tr>
            <td><div class="BarLabel"">Apr</div></td>
            <td class="BarFull">
                <img src="hx.png" height="12" alt="510" width="510" />
                <p>510</p>
            </td>
        </tr>
    </table>
</div>

Vertical Bar Chart Sample

Pages Completed Per Month
320 220 267 310

320

220

267

310

Jan
Feb
Mar
Apr

Sample Vertical Table Data

<div class="BarTableVertical">
    <table>
        <caption>Pages Completed Per Month</caption>
        <tr class="BarVertical">
            <td><img src="vh.png" height="120" alt="320" width="12" /></td>
            <td><img src="vk.png" height="220" alt="420" width="12" /></td>
            <td><img src="vp.png" height="267" alt="467" width="12" /></td>
            <td><img src="vu.png" height="310" alt="510" width="12" /></td>
        </tr>
        <tr>
            <td><p>320</p></td>
            <td><p>420</p></td>
            <td><p>467</p></td>
            <td><p>510</p></td>
        </tr>
        <tr>
            <td><div class="BarLabel"">Jan</div></td>
            <td><div class="BarLabel"">Feb</div></td>
            <td><div class="BarLabel"">Mar</div></td>
            <td><div class="BarLabel"">Apr</div></td>
        </tr>
    </table>
</div>
 

CSS Styles

.Caption
{
    font-size: .9em;
    font-style: italic;
    margin: 0;
    padding: 4px;
}
.BarTable
{
    border: solid 1px #000000;
    padding: 0px;
    margin: 0px 4em 0px 4em;
    width: 80%;
}
.BarTableVertical
{
    border: solid 1px #000000;
    padding: 0px;
    margin: 0px 4em 0px 4em;
}
.BarTable tr, .BarTableVertical tr
{
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    background-color: #00CC66;
}
.BarTableVertical tr td
{
    background-color: #CCFFFF;
}
.BarTable tr p, .BarTableVertical tr p
{
    position: relative;
    display: inline;
    font-size: .8em;
    padding: 0px;
    margin: 0px;
    z-index: +1;
}
 
.BarFull
{
    background-image: url(gridline58.gif);
    background-repeat: repeat-x;
    background-position: left top;
    width: 100%;
    background-color: #CCFFFF;
}
.BarFull p
{
    margin: 0px 4px 4px 4px;
    background-color: #FFFF99;
    color: #000000;
}
.BarVertical
{
    height: 100%;
    background-color: #CCFFFF;
}
tr.BarVertical
{
    vertical-align: bottom;
    text-align: center;
}
.BarVertical p
{
    margin: 0px 4px 4px 4px;
    background-color: #FFFF99;
    color: #000000;
    text-align: center;
}
.BarLabel
{
    padding: 0px 4px 0px 4px;
    width: 2.5em;
    font-size: .9em;
}

References

  1. HTML Bar Charts siteexperts.com
  2. HTML Horizontal Bar Chart Codeproject.com
  3. HTML Horizontal Bar Chart eggheadcafe.com
  4. Digits to Charts Codeproject.com
  5. XML Bar Chart aspwebsolution.com
  6. An accessible bar chart standards-schmandards.com
  7. CSS For Bar Graphs ApplesToOranges.com
  8. Bar Graph Eric Meyer meyerweb.com
  9. Vertical Bar Graphs Terrill.ca
  10. 10 Free CSS Graph Resources DHTMLsite.com