HTML Horizontal And Vertical Bar Charts

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
Feb	220
Mar	267
Apr	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
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