Dynamic CSS Bar Graphs
There's been a lot of talk going around lately about CSS bar graphs. Just go to delicious and type in "css graphs" and you'll find hundreds of links to Apples to Oranges post "CSS for Bar Graphs." There's even a rails plugin based on that post.
But what happens when you need a simple, reusable CSS bar graph? A graph where you don't have to determine the width and height for each bar? That's where Javascript comes in.
This script allows you to declare the total width and height for the graph, add items, and then automatically sizes the bars accordingly. That way if you have one page with four bars and another with three, you can use the same exact code and not have to worry about styling the CSS, creating the xHTML elements, and finding out what 77% of 300 is in pixels.
There are ways to do this with PHP and other scripting languages, but Javascript solves the problem where you need a graph with static data and prefer not to mess with a scripting language.
That's great, now tell me how it works
The script is pretty simple. You include the graph.js file (see below) in your header, merge the graph CSS into your own or keep it as a separate file, and give the graph some data.
Once the graph is built, the script creates two unordered lists. The first contains the colored bars and the second contains the legend, each of which can be styled to fit your design.
The script is even versatile enough to write your own custom graph functions.
Okay, but where do I get it and how can I see it?
You can see the complete documentation, along with a working demo, here.
You can also see it live on the National Breast Cancer Foundation website.
This script allows you to declare the total width and height for the graph, add items, and then automatically sizes the bars accordingly. That way if you have one page with four bars and another with three, you can use the same exact code and not have to worry about styling the CSS, creating the xHTML elements, and finding out what 77% of 300 is in pixels.
There are ways to do this with PHP and other scripting languages, but Javascript solves the problem where you need a graph with static data and prefer not to mess with a scripting language.
That's great, now tell me how it works
The script is pretty simple. You include the graph.js file (see below) in your header, merge the graph CSS into your own or keep it as a separate file, and give the graph some data.
Once the graph is built, the script creates two unordered lists. The first contains the colored bars and the second contains the legend, each of which can be styled to fit your design.
The script is even versatile enough to write your own custom graph functions.
Okay, but where do I get it and how can I see it?
You can see the complete documentation, along with a working demo, here.
You can also see it live on the National Breast Cancer Foundation website.