Table to horizontal bar graph in jquery

Question

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

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"></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.

Answer 2

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 3

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");
}