Monday, October 15th, 2007
Category: CSS
<
p
>Eric Meyer has been keeping a secret since 2005 about
CSS Vertical Bar Graphs. Well, not really, but it is good that he has come out with a nifty demo on how you can make this:
HTML:
-
-
-
-
-
-
-
<th class="sent">Invoiced
</th>
-
<th class="paid">Collected
</th>
-
</tr>
-
</thead>
-
-
-
-
-
<td class="sent bar" style="height: 111px;"><p>$18,450.00
</p></td>
-
<td class="paid bar" style="height: 99px;"><p>$16,500.00
</p></td>
-
</tr>
-
-
-
<td class="sent bar" style="height: 206px;"><p>$34,340.72
</p></td>
-
<td class="paid bar" style="height: 194px;"><p>$32,340.72
</p></td>
-
</tr>
-
-
-
<td class="sent bar" style="height: 259px;"><p>$43,145.52
</p></td>
-
-
<td class="paid bar" style="height: 193px;"><p>$32,225.52
</p></td>
-
</tr>
-
-
-
<td class="sent bar" style="height: 110px;"><p>$18,415.96
</p></td>
-
<td class="paid bar" style="height: 195px;"><p>$32,425.00
</p></td>
-
</tr>
-
</tbody>
-
</table>
-
-
-
<div class="tick" style="height: 59px;"><p>$50,000
</p></div>
-
-
<div class="tick" style="height: 59px;"><p>$40,000
</p></div>
-
<div class="tick" style="height: 59px;"><p>$30,000
</p></div>
-
<div class="tick" style="height: 59px;"><p>$20,000
</p></div>
-
<div class="tick" style="height: 59px;"><p>$10,000
</p></div>
-
</div>
-
i.e. a bog standard table with some divs, and make it look like this:
- bar graph
A bar graph is a pictorial rendition of statistical data in which the independent variable can attain only certain discrete...
- point-to-point graph (line graph)
A point-to-point graph, also called a line graph, is a pictorial rendition of data in which specific values of a function are plotted as dots on a...
- Twelve KPI dashboard examples & KPI scorecard examples to get started
Check out 12 key performance indicator (KPI) dashboard examples and KPI scorecard examples to get you started with your business scorecard and...
- Pareto chart (Pareto distribution diagram)
A Pareto chart, also called a Pareto distribution diagram, is a vertical bar graph in which values are plotted in decreasing order of relative...
- Gantt chart
A Gantt chart is a horizontal bar chart developed as a production control tool in 1917 by Henry L. Gantt, an American engineer and social...
Looks like that in Firefox, in IE is looking different :)
but still nice :)
In IE it looks like a buggy output. We all know that IE ***** and all that, but how about 80% of users?
It’s just because of the png’s he uses, if you’d use gif’s there wouldn’t be a problem in IE. Nice graph though.
It’s not a secret, but I’ve seen it few months back and just because I need vertical bargraph :) So if somebody need such thing he will find it very easy on the net :D
I followed the trail, some of the stuffs in the comments to his “credits due” page too and MAN I was impressed how people could tune HTML, CSS and JS…!
Hint; Google for “slants”… ;)