Friday, January 15th, 2010

Pure CSS bar charts as a simple API

Category: CSS, JavaScript, Performance, PHP

>I 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.

Pure CSS bar charts

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:

  1. <ul>
  2.   <li><span>400</span></li>
  3.   <li><span>20</span></li>
  4.   <li><span>30</span></li>
  5.   <li><span>233</span></li>
  6. </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:

  1. < ?php
  2.   $values = '400,20,30,233,312,78,20,67';
  3.   $height = 100;
  4.   $width = 600;
  5.   $bargap = 0;
  6.   include('csscharts.php');
  7. ?>

Of course, this can also be turned into a web service – you can get the chart with the following URL:

http://icant.co.uk/csscharts/csscharts.php?values=400,20,30,233,312,78,20,67&height=100&width=600&bargap=0

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

javascript
< view plain text >
  1. csscharts(
  2.   {
  3.     chart:"<ul class=\"barchart\" [… the rest of the html …]</ul>"
  4.   }
  5. )

That way you can use it in JavaScript:

javascript
< view plain text >
  1. <script>
  2. function csscharts(o){
  3.   var container = document.getElementById('container');
  4.   c.innerHTML = o.chart + c.innerHTML;
  5. }
  6. </script>
  7. <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.

Related Content:

6 Comments »

Comments feed TrackBack URI

You couldn’t even do a call to the Google charts API (smells like NIHS)? Just curious…

Comment by sixtyseconds — January 15, 2010

@sixtyseconds, no because every image returned needs to be cajoled, so graph images would have to be delayed.

Comment by Chris Heilmann — January 15, 2010

Wouldn’t it be much more semantic to transform a table rather than an unordered list into a graph?

Comment by jamiethompson — January 15, 2010

@chris – Fair enough….

Comment by sixtyseconds — January 15, 2010

Nice, under the circumstances in which the author had to produce the charts, but the end result is not that appealing. Also, only bar charts can be produced by this method, so as long as that is the requirement, it is OK I guess.

I am not being negative, but at the same time, I wouldn’t be rushing to use this in my project :-)

Comment by ragjunk — January 15, 2010

This would be a lot nicer if it used different colors or color shades for each bar.

Comment by eyelidlessness — January 19, 2010

Leave a comment

You must be logged in to post a comment.