Programming Blog
Web development , php , ajax , symfony, framework, zend
Pure CSS bar charts as a simple API
In: web resources
18 Jan 2010I am right now working on a high-traffic project that will run in a sandbox that doesn’t allow me to pull third party JavaScript or use canvas/Flash. Yet I need to generate bar charts from a set of data.
The solution to me was to create the charts from HTML using CSS. There have been some solutions for this problem already but I wanted something very simple and easy to maintain. Hence all the markup I am using is this:
-
<ul>
-
<li><span>400</span></li>
-
<li><span>20</span></li>
-
<li><span>30</span></li>
-
<li><span>233</span></li>
-
</ul>
Instead of hard-coding any of the trickery necessary I wrote a PHP script to generate the HTML, the styles and do all the math. So all that is needed to render one of the charts is the following code:
-
<?php
-
$values = ’400,20,30,233,312,78,20,67′;
-
$height = 100;
-
$width = 600;
-
$bargap = 0;
-
include(‘csscharts.php’);
-
?>
Of course, this can also be turned into a web service – you can get the chart with the following URL:
And if you specify JSON as the format you get it with a callback to a function called csscharts:
http://icant.co.uk/csscharts/csscharts.php?values=400,20,30,233,312,78,20,67&format=json
-
csscharts(
-
{
-
chart:“<ul class=\”barchart\” [… the rest of the html …]</ul>”
-
}
-
)
That way you can use it in JavaScript:
-
<script>
-
function csscharts(o){
-
var container = document.getElementById(‘container’);
-
c.innerHTML = o.chart + c.innerHTML;
-
}
-
</script>
-
<script src=“http://icant.co.uk/csscharts/csscharts.php?values=400,20,30,233,312,78,20,67&format=json”></script>
You can see some demos here, get detailed info about the CSS trickery used and of course download the code on GitHub.
- Tags: chart c, container document, gt 400, JavaScript, nbsp, Plain, script src http, span, text, ul class
Comment Form
About this blog
This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.
4 Responses to Pure CSS bar charts as a simple API
JAM123
March 26th, 2010 at 5:33 am
The system as been full of glitches due to upgrades in yahoo, see there blog for details.!!!
It's happening to most of us on yahoo, they are aware of it and are working on the problem.!!
titus
March 27th, 2010 at 8:56 am
yes, i am facing the same prb,
this is a code writing by some virus or php?
this is not a google code,
tell us how to stop this. i am using FCK editor.
om
March 28th, 2010 at 10:56 pm
Use document.getElementById() to find the span, then get the content of that span from its innerHTML property. Like this:
var spanContent = document.getElementById("maxenergy").innerHTML;
Shawn T
April 3rd, 2010 at 1:33 pm
yes you can use the 400W SMPS as it uses the on board power supply and not a 6 pin power connector.