Easy, fast, accessible way to display simple Data and beautify them with CSS. It needed some time and a little bit wired thinking, but It works. Works fine in FF, IE 7/6, Opera 9 tested on WIN XP.
Advantages

* accessible
* fast
* No javascript Mum, in this basic version
* Makes search engines happy
* resizeable
* easy extendable, just add a new list entry

Nice to have

* Javascript parses the percentage and directly add the “background-position: value”
* horizontal charts (should be less tricky then the others)

Example Chart

Check out the source

* Ants: 35%
* Bisons: 40%
* Crocodile: 87%
* Dingo: 45%
* Emu: 23%

HTML CODE

<ul class="chart">
<li>Ants<span style="background-position: center -35">: </span><strong>35%</strong></li>
<li>Bisons<span style="background-position: center -40">: </span><strong>40%</strong></li>
<li>Crocodile<span style="background-position: center -87">: </span><strong>87%</strong></li>
<li>Dingo<span style="background-position: center -45">: </span><strong>45%</strong></li>
<li>Emu<span style="background-position: center -23">: </span><strong>23%</strong></li>
</ul>

* Ants: 35%
* Bisons: 40%
* Crocodile: 87%
* Dingo: 45%
* Emu: 23%

HTML CODE

If you want to style the label seperatly

<ul class="chart">
<li><em>Ants</em><span style="background-position: center -35">: </span><strong>35%</strong></li>
<li><em>Bisons</em><span style="background-position: center -40">: </span><strong>40%</strong></li>
<li><em>Crocodile</em><span style="background-position: center -87">: </span><strong>87%</strong></li>
<li><em>Dingo</em><span style="background-position: center -45">: </span><strong>45%</strong></li>
<li><em>Emu</em><span style="background-position: center -23">: </span><strong>23%</strong></li>
</ul>

CSS Code

.chart {
	font-family: Tahoma;
	font-size: .7em;
	border: 1px solid #ccc;
	float: left;
	margin: 0;
	padding: .4em .1em;
}

.chart li {
	list-style: none;
	float: left;
	width: 5em;
	text-align: center;
	background: url(chart_bg.gif) center 1.6em no-repeat;
}

.chart li span {
	display: block;
	text-indent: -999em;
	padding-bottom: 90px;
	background: url(chart_bg_ol.gif) center -1px no-repeat;
	border-top: 5px solid #fff;
}

.chart strong {
	display: block;
	text-align: center;
	font-weight: normal;
}

Demo: http://grassegger.at/xperimente/charts-daten-semantik-css/

Source: http://grassegger.at/xperimente/charts-daten-semantik-css/

Related Listings:

1. Accessible Charts with Canvas and jQuery Script Data visualization in HTML has long been tricky to achieve....
2. XML SWF Charts XML/SWF Charts is a simple, yet powerful tool to create...
3. CSS Bar Chart Script The above bar charts do not reflect the usage on...
4. Highcharts – Interactive Charts for Web Highcharts is a charting library written in pure JavaScript, offering...
5. jQuery Flot, Plots, Canvas, Charts Fetch and format the data to be processed by Flot...

Do you like this post?

Email: