Recentlywe’ve had to tackle some interesting visualizations which we coded inXHTML and CSS. The method we used, while fairly simple, was a big helpto the engineer and created a very flexible and inexpensive solution.We thought we would share our solution and code in case anyone else ranagainst similar situations.
Update
I posted a live example page with everything in tact. So far I’veonly been able to test in Firefox 1.0.7, Firefox 1.5, IE 6, Safari1.3.3, and Opera 9(TP1). You can view it here.
Basic CSS Bar Graph
This is a simple bar graph we developed for a tool we’re releasingshortly for our client. The concept is simple, utilize the percentagewidth 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 samebasic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a markerthat travels the length of the color scheme. A lighter bar shade alsohelps 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 forwider 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 andreproduce it multiple times to create a more complex graph. Thisparticular solution was a relief the to client and engineer as all theyhad to do was calculate percentages, and the look of the graph was muchbetter 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>