30
April
2009
CSS For Bar Graphs
Author: admin
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.
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.

24%
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.

- Love Life
-
25%
- Education
-
55%
- War Craft 3 Rank
-
75%
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.

- 22
- 7
- 3
- 8
- 2
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.
-
brucejohnson
-
mcdonalds coupons
-
axoncaderne
blog comments powered by Disqus
