menardmam menardmam - 1 year ago 78
jQuery Question

Table to horizontal bar graph in jquery

I have a table :


I would like to take it and make a bar graph with it.

Not that there is no lib on the net, but is prototype or flash xml file.


The solution I am working on is a jquery plugin that will generate a html link for google chart... not pretty but KISS (really simple) and ugly.


Here is one of my inspirations :

Seb Seb
Answer Source

This is entirely JavaScript, so if you have your data in other format you'll first have to convert to JS:

<script type="text/javascript" src=""></script>
<div id="bars"></div>
<script type="text/javascript">
    $(function (){
      var values = [234, 654, 432];
      var maxValue = values[0];
      for(var i = 0; i < values.length; i++){
    	maxValue = Math.max(maxValue, values[i]);

      for(var i = 0; i < values.length; i++){
        var newBar = $("<span>").html(values[i]);
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"


      	newBar.animate({"width": (100 * values[i] / maxValue) + "%"}, "slow");

Just written and tested in Opera 10.

Of course, it'd be better if you adjusted all possible CSS rules in a separate file, such as a nice background, margins between bars, text color, etc., but this is just a demo.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download