Table à graphique à barres horizontales en jquery

Question

J'ai une table:

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

Je voudrais le prendre et faire un graphique à barres avec elle.

Non pas qu'il n'y ait pas de lib sur le net, mais c'est un fichier prototype ou flash xml.

-

La solution que je travaille est un plugin jquery qui va générer un lien html pour Google Chart ... pas joli mais BAISER (très simple) et laid.

-

Voici une de mes inspirations: http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

Answer 1

Ceci est tout à JavaScript, donc si vous avez vos données dans un autre format, vous devrez d'abord convertir 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> 

juste écrit et testé dans Opera 10.

Bien sûr, ce serait mieux si vous avez réglé toutes les règles CSS possibles dans un fichier séparé, comme un joli fond, des marges entre les barres, la couleur du texte, etc., mais ce n'est qu'une démo.

Answer 2

Non, ce n'est pas ce que je demande .... il devrait retreive les données de la table html

voici mon code .. pas terminé ..

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

et est le résultat final ici http://acecrodeo.com/06-classement2.php?lang=fra&annee=2008b

je dois ajouter la supprimer ancienne valeur et l'échelle de l'espace restant ...

Answer 3

le sho suivant Je ferais l'affaire. L'exemple fonctionne contre cette même page. Je l'ai testé en créant un bookmarklet. Dans IE, il semble être centré, ce qui peut faire partie du style de la page. Quoi qu'il en soit, la clé est le sélecteur au début. Quels que soient les éléments sélectionnés par ce sélecteur, sont les éléments qui seront utilisés comme données pour la 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"); 
}