table to horizontal bar graph in jquery

Question

I cannot really tell more

I have a table

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

i like to take it and get 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 ulgy

--

here is one of my inspiration http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

Answer 1

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"&gt;&lt;/script&gt;
<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.

Answer 2

-deleted old comment-

Answer 3

No that's not what I ask.... it should retreive the data FROM the html table

here is my code.. not completed..

jQuery.fn.horizontalTableGraph = function() {

    $(this).find("thead").remove();

    var maxvalue = 0;

    $(this).find("tr").each(function(i) {
     $(this).removeClass();  
     $(this).find("td").eq(0).animate({width : '50px'}, 1000);
     $(this).find("td").eq(1).animate({width : '150px'}, 1000).css("text-align","left");
     $(this).find("td").eq(1).css("width","500px");

     var getvalue = $(this).find("td").eq(2).html();
     maxvalue = Math.max(maxvalue,getvalue);
    });

    $(this).find("tr").each(function(i) {

    var thevalue = $(this).find("td").eq(2).html();

    var newBar = $("<span>").html(thevalue);
    newBar.css({
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"
        });

     //$(this).find("td").eq(2).hide();
        $(this).find("td").eq(2).append(newBar);

        newBar.animate({"width": (100 * thevalue / maxvalue) + "%"}, "slow");
    })
};

and here is the final result http://acecrodeo.com/06-classement2.php?lang=fra&annee=2008b

i need to add the remove old value and the scale of the remaining space...

Answer 4

It pretty much do what i like it to do.... mostly with the code from SEB.... thanks

BUT DOES ANYBODY KNOW WHY in internet explorer it just solid bar.. with no pixel width, I HAVE IE.... die die

help !

in firefox... it perfect !

Answer 5

The following should do the trick. The example works against this very page. I tested it by creating a bookmarklet to it. In IE, it appears to be centered, which may be part of the styling of the page. Anyway, the key is the selector at the beginning. Whatever elements are selected by that selector, are the elements that will be used as data for the table.

var values = [];
$('.item-multiplier').each(function() {
  var t = $(this).text().match(/\d+/);
  if (t) values.push(parseInt(t));
});

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])
         .css({
      "display": "block",
      "width": "0px",
      "backgroundColor": "#600",
      "marginBottom": "5px",
      "padding": "2px",
      "color": "#FFF"
     });

$("body").append(newBar);
var w = Math.floor((100 * values[i] / maxValue)) + "%";
newBar.animate({"width":w}, "slow");
}