A Better jQuery Horizontal Bar Graph

Bookmark This

Chris Missal, December 16, 2009

After doing a lot of jQuery development over nearly two years, I've decided to create my first plug-in. A long time ago I wrote an article about creating a horizontal bar graph in jQuery. I decided to pump this up a bit and turned it into a plugin.

It's not spectacular and really just more of a learning experience for me; I'm sure somebody somewhere will use it. I have it marked as an Alpha version for now, that will change as I get some more feedback on it.

The code to turn a <dl/> element into a bar graph is very simple:


<dl class="browser-data" title="Browser statistics as of November 2009">

  <dt>Firefox</dt><dd>47.0</dd>

  <dt>IE8</dt><dd>13.3</dd>

  <dt>IE7</dt><dd>13.3</dd>

  <dt>IE6</dt><dd>11.1</dd>

  <dt>Chrome</dt><dd>8.5</dd>

  <dt>Safari</dt><dd>3.8</dd>

  <dt>Opera</dt><dd>2.3</dd>

</dl>



... and ...


  $(".browser-data").horizontalBarGraph({interval: 0.1});

And the output is also very straightforward: Images of jQuery Horizontal Bar Graph examples

For more information on this plugin, visit the main Horizontal Bar Graph page or head on over to the Plugin Page on jQuery.com.

Filed Under: JavaScript jQuery