Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side.

Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought we would share our solution and code in case anyone else ran against similar situations.

Update

I posted a live example page with everything in tact. So far I’ve only been able to test in Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1).

Basic CSS Bar Graph

This is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.

<style>
    .graph {
        position: relative; /* IE is dumb */
        width: 200px;
        border: 1px solid #B1D632;
        padding: 2px;
    }
    .graph .bar {
        display: block;
        position: relative;
        background: #B1D632;
        text-align: center;
        color: #333;
        height: 2em;
        line-height: 2em;
    }
    .graph .bar span { position: absolute; left: 1em; }
</style>
<div class="graph">
    <strong class="bar" style="width: 24%;">24%</strong>
</div>

Complex CSS Bar Graph

This is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.

<style>
    dl {
        margin: 0;
        padding: 0;
    }
    dt {
        position: relative; /* IE is dumb */
        clear: both;
        display: block;
        float: left;
        width: 104px;
        height: 20px;
        line-height: 20px;
        margin-right: 17px;
        font-size: .75em;
        text-align: right;
    }
    dd {
        position: relative; /* IE is dumb */
        display: block;
        float: left;
        width: 197px;
        height: 20px;
        margin: 0 0 15px;
        background: url("g_colorbar.jpg");
     }
     * html dd { float: none; }
    /* IE is dumb; Quick IE hack, apply favorite filter methods for
    wider browser compatibility */

     dd div {
        position: relative;
        background: url("g_colorbar2.jpg");
        height: 20px;
        width: 75%;
        text-align:right;
     }
     dd div strong {
        position: absolute;
        right: -5px;
        top: -2px;
        display: block;
        background: url("g_marker.gif");
        height: 24px;
        width: 9px;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
     }
</style>
<dl>
    <dt>Love Life</dt>
    <dd>
        <div style="width:25%;"><strong>25%</strong></div>
    </dd>
    <dt>Education</dt>
    <dd>
        <div style="width:55%;"><strong>55%</strong></div>
    </dd>
    <dt>War Craft 3 Rank</dt>
    <dd>
        <div style="width:75%;"><strong>75%</strong></div>
    </dd>
</dl>

<style>
    dl {
        margin: 0;
        padding: 0;
    }
    dt {
        position: relative; /* IE is dumb */
        clear: both;
        display: block;
        float: left;
        width: 104px;
        height: 20px;
        line-height: 20px;
        margin-right: 17px;
        font-size: .75em;
        text-align: right;
    }
    dd {
        position: relative; /* IE is dumb */
        display: block;
        float: left;
        width: 197px;
        height: 20px;
        margin: 0 0 15px;
        background: url("g_colorbar.jpg");
     }
     * html dd { float: none; }
    /* IE is dumb; Quick IE hack, apply favorite filter methods for
    wider browser compatibility */

     dd div {
        position: relative;
        background: url("g_colorbar2.jpg");
        height: 20px;
        width: 75%;
        text-align:right;
     }
     dd div strong {
        position: absolute;
        right: -5px;
        top: -2px;
        display: block;
        background: url("g_marker.gif");
        height: 24px;
        width: 9px;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden;
     }
</style>
<dl>
    <dt>Love Life</dt>
    <dd>
        <div style="width:25%;"><strong>25%</strong></div>
    </dd>
    <dt>Education</dt>
    <dd>
        <div style="width:55%;"><strong>55%</strong></div>
    </dd>
    <dt>War Craft 3 Rank</dt>
    <dd>
        <div style="width:75%;"><strong>75%</strong></div>
    </dd>
</dl>

Vertical CSS Bar Graph

In this third example, we utilize the same principle vertically and reproduce it multiple times to create a more complex graph. This particular solution was a relief the to client and engineer as all they had to do was calculate percentages, and the look of the graph was much better than their stock graphing component

<style>
    #vertgraph {
        width: 378px;
        height: 207px;
        position: relative;
        background: url("g_backbar.gif") no-repeat;
    }
    #vertgraph ul {
        width: 378px;
        height: 207px;
        margin: 0;
        padding: 0;
    }
    #vertgraph ul li {
        position: absolute;
        width: 28px;
        height: 160px;
        bottom: 34px;
        padding: 0 !important;
        margin: 0 !important;
        background: url("g_colorbar3.jpg") no-repeat !important;
        text-align: center;
        font-weight: bold;
        color: white;
        line-height: 2.5em;
    }

    #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
    <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
    </ul>
</div>

We hope you enjoyed our examples and find new uses and variations for the concept. Drop us a line if you have any other interesting visualizations using XHTML and CSS and we’ll post them here.
Demo: http://applestooranges.com/goodies/css-for-bar-graphs/

Source: http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55

Related Listings:

1. CSS Vertical Bar Graphs Here’s a fairly typical vertical bar graph showing a hypothetical...
2. CSS Bar Chart Script The above bar charts do not reflect the usage on...
3. Vertical bar graph using php Who wants to use Excel to make a new graph...
4. Designing Out Of The Box This is a creative trend catching on. It’s very simple...
5. AjaxMGraph Script For now it has few limitations (only positive numbers, only...

Do you like this post?

Email: