纯css图标 Pure CSS bar charts as a simple API

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.


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.

 

方法很简单：

 

 

<div id="in">
<?php 
  $values = '12,3,23.3,44.3,9,20';
  $height = 200;
  $width = 402;
  $bargap = 0;
  include('csscharts.php');
?>
<div>

 

 

 

效果：

 

http://icant.co.uk/csscharts/csscharts-demo.php

http://icant.co.uk/csscharts/

 

 

 

也支持url传值：

 

 

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