Javascript/CSS Bar Graph

A dynamic CSS bar graph powered by Javascript. Requires the Prototype framework (full or lite).

Demo

Who is your favorite trash celebrity?

How it Works

This script takes a list of items and dynamically creates a bar graph based on each item's percentage of the total bar. (i.e. Item One is 100% of the bar, Item Two is 50%, etc...)

Upon adding an item, the bars automatically size in width and the correct heights are applied.

All of this is accomplished through the use of CSS, resulting in two simple unordered lists:

<div id="graph">
  <ul class="bar">
    <li><div style="height:200px;margin-top:0">277</div></li>
  </ul>
  <ul class="legend">
    <li>Title</li>
  </ul>
</div>

The script will also automatically place the value located within the bar above the bar if space is limited.

Compatibility

Requires Javascript and CSS.

Tested in: IE 6 & 7, Safari 2, Firefox 2, Opera 9. Should work in other browsers.

Setup

1. Include the Script

Include graph.js in your header.

2. Include and customize the CSS

Include the following CSS:

#graph {
  background:#F8F7F3 url(survey-back.gif) repeat-x;
  margin:0;
  padding:0;
  border:1px solid #444;
}
#graph ul.bar {
  list-style:none;
  margin:0;
  padding:15px 0 0 0;
  font:normal 10px/250% Verdana, arial;
  text-align:center;
  color:#fff;
}
#graph ul.legend{
  display:inline-block;
  clear:both;
  margin:0;
  padding:10px 0;
  background-color:#444;
  font:normal 14px Georgia, "Times New Roman", Times, serif;
  text-align:center;
  color:#eee;
  _height: 1%; /* make ie6 play nice */
}
/* clear the legend */
#graph ul.legend:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#graph ul.legend{ display:block; }
#graph ul li{
  display:inline; /* trick ie6 to not do double margin bug */
  float:left; /* float will reset to block */
  margin:0 15px 0;
  padding:0;
}
#graph ul.bar li div, #graph ul.bar li span{ display:block; overflow:hidden; }
#graph ul.bar li div.no-results{ color:#888; }
#graph ul.bar li span{
  height:15px;
  line-height:100%;
  color:#888;
}

Things to change:

Important Note: Do not set a padding to move the value text from the top of the colored bar (ul.bar li div), instead use line height on ul.bar. Padding will break the script if applied to the colored bar.

3. Call the function

Call the javascript function from within the divider.

1. First create a graph object:

<div id="graph">
  <script type="text/javascript">
    var myGraph = new JSGraph('graph', 600, 200, 30);
    ...
  </script>
</div>

When you create the object you pass it the following: Divider Name, Width, Height, Bar L/R Margin.

Only the first item is required, everything else will fall back onto the defaults (the above numbers).

Note: If you change bar's left and right margin in the CSS (ul li), you must change the Bar L/R Margin value to equal both sides.

2. Set the background

If you want to use a custom background for each bar you can set it here, otherwise it will revert to the default colors. There are a few ways to do this:

  1. Create different background images with the same filename followed by a dash and number. Example: graph-tile-1.png, graph-tile-2.png, et cetera. Then set the background image to the filename:   myGraph.setBackground('graph-tile.png');
  2. Set a list of images for each item:   myGraph.setBackground('britney-spears.gif','lindsey-lohan.jpg');
  3. Set a list of background colors:   myGraph.setBackground('#ff0','#e7a','#333','#0ff');

Note: You need to include the path to the image as it would be called from the page.

3. Add some items

You add items in the following format: Legend Title, Value, Percentage of Bar.

You can add items one at a time or all together:

One at a time:

  myGraph.addItem('Britney Spears', 277, 100);
  myGraph.addItem('Lindsey Lohan', 125, 50);

Together:

  myGraph.addItem(['Britney Spears', 277, 100], ['Lindey Lohan', 125, 50]);

Note: Percentage equals the total percentage of the bar, not the percentage of the graph.

4. Draw the graph

All that's left to do is build the graph:

  survey.buildLineGraph();

Complete Example

<div id="graph">
  <script type="text/javascript">
    var myGraph = new JSGraph('graph', 600, 200);
    myGraph.setBackground('graph-tile.png');
    myGraph.addItem(['Britney Spears',277,100],['Lindsey Lohan', 125, 50],['Nicole Richie', 30, 12],['Paris Hilton', 0, 0]);
    myGraph.buildLineGraph();
  </script>
</div>

Advanced

Setting an individual item's backgrounds:

To set an individual item's background, you must declare the background:

myGraph.addItem('Taco Bell', 200, 30, 'taco-bell.gif');

or

myGraph.addItem(['Taco Bell', 200, 30, 'taco-bell.gif'], ['Pizza Hut', 100, 15]);

You can use an image or a hex value for a background color.

Forgo the Prototype framework

If you don't want to use the Prototype framework, you can copy and paste the Class function and dollar sign ($) function to the top of graph.js or change var JSGraph = Class.create() to an appropriate call for your framework.

Customizing the Javascript

Every attempt has been made to make this script as complete as possible. As such, it is meant to stand alone and allow for complete customization outside of the javascript; however, there are some things you may wish to adjust:

Creating Custom Graphs

This script is setup so you can easily create your own graphs.

To do this create a function within the JSGraph class. Example:

...

buildLineGraph: function()
{
  ...
},

...

Here are some of the following variables and functions available:

Build the graph by appending the bar UL and legend UL to the graph divider.

More

This script is free to use, modify, redistribute, etc as long as the copyright notice is left intact. View the javascript file for more information on this.

For more introductory information or comments, see the original blog post

Copyright © 2007 Nicholas Cook