menardmam menardmam - 2 months ago 8
jQuery Question

Table to horizontal bar graph in jquery

I have a table :

1-joe-234
2-bob-432
3-sean-654


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 :
http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

Seb Seb
Answer

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="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div id="bars"></div>
<script type="text/javascript">
//<![CDATA[
    $(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]);
        newBar.css({
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"
        });

      	$("#bars").append(newBar);

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

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.

Comments