Tabelle horizontal bar graph in jquery

Ich habe eine Tabelle :

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

Ich würde gerne nehmen Sie es und machen Sie ein Balkendiagramm mit ihm.

Nicht, dass es keine lib im Netz, aber ist Prototyp oder flash-xml-Datei.

--

Die Lösung, die ich arbeite, ist ein jquery-plugin, das erzeugt ein html-link für google-Diagramm... nicht schön, aber KÜSSEN (wirklich einfach) und hässlich.

--

Hier ist eine meiner Inspirationen :
http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

  • Haben Sie die Tabelle als HTML oder in der Programmierung Sprache als array / matrix?
InformationsquelleAutor menardmam | 2009-03-17
  1. 1

    Dies ist ausschließlich JavaScript, also, wenn Sie Ihre Daten in einem anderen format müssen Sie zuerst konvertieren müssen, um 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>

    Nur geschrieben und getestet in Opera 10.

    Natürlich, es wäre besser, wenn Sie eingestellt, alle möglichen CSS-Regeln in eine separate Datei, wie eine nette hintergrund, die Ränder zwischen den Balken, text, Farbe, etc., aber dies ist nur eine demo.

    InformationsquelleAutor Seb
  2. 0

    Nein, dass ist nicht das, was ich Frage.... es sollte abrufen der Daten AUS der html-Tabelle

    hier ist mein code.. nicht abgeschlossen..

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

    und hier ist das Ergebnis
    http://acecrodeo.com/06-classement2.php?lang=fra&annee=2008b

    muss ich hinzufügen, das entfernen alten Wert und den Maßstab des verbleibenden Platz...

    InformationsquelleAutor menardmam
  3. 0

    Folgenden sollte den trick tun. Das Beispiel funktioniert gegen diese Seite. Getestet habe ich es durch die Schaffung eines bookmarklet es. Im IE scheint es zu sein, zentriert, die Teil der Gestaltung der Seite. Jedenfalls, der Schlüssel ist die Auswahl am Anfang. Was auch immer Elemente ausgewählt werden, die durch diesen Selektor sind die Elemente, die die Daten für die Tabelle. 

    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");
}
    InformationsquelleAutor cgp
Schreibe einen Kommentar