Java-Script für dynamische Balken

[Mr.Y]

Hi zusammen,

ich denke jeder kennst sie: Die dynamischen Balken (die %-Anzeige) diverser Online-Seiten, zB. HT4U oder Computerbase setzen sie ein. Da ich so etwas nicht einfach kopieren möchte (und natürlich auch darf), so etwas aber für die eigene Seite aber auch gerne haben möchte, will ich das nun irgendwie umsetzen... lassen.
Ich habe von Java-Script leider so gut wie gar keine Ahnung und suche daher nun einen Könner, der mir da etwas passendes hinzaubert. Wünsch' dir was gibts nicht umsonst, sodass da auch eine kleine entgeldliche Belohnung drin ist.

Das Layout für die Diagramme ist fest und wird bei Interesse per PN mitgeteilt. So umfangreich sieht das nicht aus, sollte es dennoch einen großen Aufwand darstellen, so lasst es mich wissen. Genauere Nachfragen einfach per PN, allgemeine auch ggf. hier.

Dies Thema ist mit der Moderation des 3DC abgesprochen, also keine Bange deswegen ;)

[DanMan]

Wie sieht denn das Datenquellenformat aus? Habt ihr auf der Seite schon eine JS-Library im Einsatz? Wenn ja, welche?

[Mr.Y]

jQuery 1.4.4 ist drin.
Die Graphen werden aus einer PHP-Funktion gefertigt, die Daten dafür sind jeweils in einem Array gespeichert.
Die Funktion kann natürlich abgeändert werden, man muss ja sicher zB um mouseover event hinzufügen - das kann ich erledigen. Ich brauche wirklich nur den JS-Teil.
Dafür braucht ein möglicher Helfer sicher den Quelltext, den würde ich aber gerne nur per PN verteilen wollen.

Zusatzfrage: So wie ich die anderen Funktionen, die ich dazu gesehen habe verstehe, benutzen die keine Library sondern machen das mit eben ein paar Zeilen, ich denke ich kann ja mal einfach die Beispiele posten:

HT4U:
var data = new Array();

function storeValue(value, table, row, col){
if (col==0&&row==0){
data[table] = new Array();
}
if (row==0){
data[table][col] = new Array();
}
data[table][col][row] = value;
}

function mouseOverBar(numOfTable, numOfBar){
for (var n=0; n<data[numOfTable].length; n++){
var refVal = data[numOfTable][n][numOfBar];
for (var i=0; i<data[numOfTable][n].length; i++){
var actVal = data[numOfTable][n][i];
var value = (actVal/refVal)*100;
if(numOfBar == i){
document.getElementById("bar"+numOfTable+"_"+i+"_"+n).firstChild.nodeValue = +Math.round(value)+"%";
document.getElementById("bar"+numOfTable+"_"+i+"_"+n).style.fontWeight = 'bold';
document.getElementById("testproduct"+numOfTable+"_"+i).style.textDecoration = 'underline';
}
else{
document.getElementById("bar"+numOfTable+"_"+i+"_"+n).firstChild.nodeValue = Math.round(value)+"%";
document.getElementById("testproduct"+numOfTable+"_"+i).style.fontWeight = 'normal';
}
}
}
}

function mouseOutBar(numOfTable, numOfBar, decPlaces){
document.getElementById("testproduct"+numOfTable+"_"+numOfBar).style.textDecoration = 'none';
for (var n=0; n<data[numOfTable].length; n++){
for (var i=0; i<data[numOfTable][n].length; i++){
document.getElementById("bar"+numOfTable+"_"+i+"_"+n).firstChild.nodeValue = data[numOfTable][n][i].toFixed(decPlaces).toString().replace(".",",");
document.getElementById("bar"+numOfTable+"_"+i+"_"+n).style.fontWeight = 'normal';
}
}
}

CBase:
function DynamicChart(chartid, groupid, values, original_labels)
{
function setReferenceItem(e)
{
window.clearTimeout(timeout);

var target = e.target;
while (target.tagName != 'TD') target = target.parentNode;

var itemid = target.getAttribute('itemid');
for (var i = 0; i < labels.length; i++)
{
if (i == itemid)
{
labels[i].innerHTML = positions[i] ? '•&nbsp;100%' : '100% •';
}
else
{
labels[i].innerHTML = Math.round(100 * values[i] / values[itemid]) + '%';
}
}
}

function scheduleReset()
{
timeout = window.setTimeout(function()
{
for (var i = 0; i < labels.length; i++)
{
labels[i].innerHTML = original_labels[i];
}
}, 50);
}

var timeout;
var labels = [];
var positions = [];

$$('#chart_' + chartid + ' tr.group_' + groupid).each(function(row)
{
if (row.getElementsByTagName('span').length != 0)
{
row.firstChild.setAttribute('itemid', labels.length);
$(row.firstChild).addEvents({
'mouseover': setReferenceItem,
'mouseout': scheduleReset
});

labels.push(row.lastChild.getElementsByTagName('span')[0]);
positions.push(!labels[labels.length - 1].previousSibling);
}
});
}

[Marbleearth]

Du brauchst nur eine Funktion, die jede Sekunde bzw. je nach Intervall auch nach x Sekunden die Länge des entsprechenden Balkens zurückgibt. Diese Länge weist du dem Balken dann zu.
Hab sowas auch schonmal programmiert. Das geht auch wesentlich einfacher als in dem HT4U-Beispiel.

Wenn du mit schon mit CSS gearbeitet hast bekommst du das auch alleine hin.
Ich empfehle dir mal Google mit den Stichworten "Javascript + Fortschrittsbalken" zu bemühen. :wink:

[Mr.Y]

Äh, angenommen ich würde das hinbekommen, was nützt mir die Länge des Balken? Ich glaube fast, du hast mich missverstanden. Ich habe bereits per PHP/HTML/CSS einen Graphen, bei diesem soll jedoch per Mouseover, so wie bei den genannten Seiten, dann jeweils in Relation der %-Wert stehen, sprich bei Mouseover 100% und alle anderen dann entsprechend 70 oder was auch immer %.

[Marbleearth]

Entschuldige!

Man merkt, dass Freitag ist. Ja das habe ich in der Tat mißverstanden. :rolleyes:

Prinzipiell passiert da aber nicht viel anderes. Aber so ist das natürlich etwas umfangreicher als das was ich meinte.

[DanMan]

Ich habe bereits per PHP/HTML/CSS einen Graphen, bei diesem soll jedoch per Mouseover, so wie bei den genannten Seiten, dann jeweils in Relation der %-Wert stehen, sprich bei Mouseover 100% und alle anderen dann entsprechend 70 oder was auch immer %.
Achso. Das hab ich auch anders verstanden.

Dann ists ja trivial. Poste doch einfach mal das HTML zu einem Beispiel, dann ist das in ein paar Minuten erledigt.

[Mr.Y]

Dazu noch folgendes:
Am HTML-Code kann antürlich noch einiges geändert werden, zB. mouseovers oder so etwas einfügen, das kann ich aber nach eurer Anweisung auch machen. graph_bar_silber und graph_bar_red sind gleichwertig, haben eben nur ne andere Farbe. Bei Fragen einfach losschießen.

<div class="graph_body">
<div class="graph_title" title="100%">Modell 1</div>
<div class="graph_field_top">
<div class="graph_bar_silver" style="width: 360px" title="100%">290</div>
</div>
<div class="graph_title" title="99.31%">Modell 2</div>
<div class="graph_field">
<div class="graph_bar_silver" style="width: 358px" title="99.31%">288</div>
</div>
<div class="graph_title" title="90%">Modell 3</div>
<div class="graph_field">
<div class="graph_bar_red" style="width: 324px" title="90%">261</div>
</div>
<div class="graph_title" title="83.45%">Modell 4</div>
<div class="graph_field">
<div class="graph_bar_silver" style="width: 300px" title="83.45%">242</div>
</div>
<div class="graph_title" title="80.69%">Modell 5</div>
<div class="graph_field">
<div class="graph_bar_red" style="width: 290px" title="80.69%">234</div>
</div>
<div class="graph_title" title="80.69%">Modell 6</div>
<div class="graph_field">
<div class="graph_bar_silver" style="width: 290px" title="80.69%">234</div>
</div>
<div class="graph_title" title="65.52%">Modell 7</div>
<div class="graph_field">
<div class="graph_bar_silver" style="width: 236px" title="65.52%">190</div>
</div>
<div class="graph_title" title="57.59%">Modell 8</div>
<div class="graph_field_bottom">
<div class="graph_bar_silver" style="width: 207px" title="57.59%">167</div>
</div>
<div class="graph_footer">Anzeige in Bildern pro Sekunde</div>
</div>

[DanMan]

So ungefähr: http://jsfiddle.net/NrDnN/1

Ich hab nur die FPS-Werte mit den Prozentwerten überschrieben. Mit mouseover-Anzeige würde man die anderen ja sonst garnicht sehen können.

[Mr.Y]

Prinzipiell schon mal sehr geil, was mich aber stört ist der Punkt, den du angesprochen hast: Einmal mit der Maus drüber gefahren sind die originalen Werte weg.
Könnte man nicht im HTML-Teil eingeben sowas wie: onmouseover('die %-Zahl, die jetzt im title steht') und mouseout entweder "es so machen, dass die ursprüngliche Zahl da steht" oder eben diese erneut übergeben?
Denn die absoluten Werte sind ja von Bedeutung und einmal drüber gefahren sind sie futsch.

[DanMan]

Prinzipiell schon mal sehr geil, was mich aber stört ist der Punkt, den du angesprochen hast: Einmal mit der Maus drüber gefahren sind die originalen Werte weg.
Könnte man nicht im HTML-Teil eingeben sowas wie: onmouseover('die %-Zahl, die jetzt im title steht') und mouseout entweder "es so machen, dass die ursprüngliche Zahl da steht" oder eben diese erneut übergeben?
Denn die absoluten Werte sind ja von Bedeutung und einmal drüber gefahren sind sie futsch.
Das lässt sich ja durch ein kleine Änderungen am HTML+CSS ändern: http://jsfiddle.net/NrDnN/3/

edit:
Oder man machts gleich über die Balkenbreite: http://jsfiddle.net/NrDnN/4/

[Mr.Y]

So, ich hab nen bissle rumgebastelt. Ich habe das CSS und das HTML vervollständigt und das JS nach hunderten Versuchen *gg* so, wie ich es mir vorstelle. Wenn es jetzt noch einfach möglich wäre, dass das ganze auch beim "über den Namen fahren" passiert wäre das awesome :)

Auf jeden Fall aber schonmal ein riesen Danke an dich (y)

http://jsfiddle.net/6ARPQ/

[DanMan]

http://jsfiddle.net/6ARPQ/1/

[Mr.Y]

(y) und ich merke mal wieder, wie beschissen es ist, wenn andere (in diesem Fall ich) nur begrenzte Informationen ausgeben. Für einen Graphen funktioniert das ganze wie gewünscht, wenn jedoch auf der Seite derer 2 sind, dann werden bei denen auch die % angezeigt. Kein Beinbruch bei FPS, jedoch wenn bspw. Lautstärke und Stromverbrauch auf einer Seite verglichen werden, dann ists doch arg doof.
Kurze Rede langer Sinn: Hilfe :(

http://jsfiddle.net/Lvacz/

Meine Idee als no-JS-Blicker wäre jetzt um jeden Benchmarkblock noch ein div zu klatschen und die "Sachen" jeweils nur in diesem div ablaufen zu lassen...

[DanMan]

http://jsfiddle.net/Lvacz/1/