CSS For Bar Graphs
April 30th, 2009
by Munazza
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.
