[WarrenFaith]

Aloah,

ich muss ein paar Statistiken ausgeben als Balkendiagramme. Es wird Jahresstatistiken geben (ein Balken pro Monat), Monatsstatistik (ein Balken pro Tag) und Tagesstatistik (ein Balken pro Stunde).

Ich hab folgende Techniken zur Verfügung:
JavaScript, Taglibs/JSP

Die Taglibs/JSP werden mir 2 Datentypen liefern. Einmal die Zeit/Zeitraum einmal die Menge.

Kleiner Hinweis noch: Die Menge kann von Null bis in die mehrere Tausend gehen.

Dafür wollte ich nun in JS die Daten sammeln, die größte Anzahl rausfischen und das als 100% nehmen und die anderen danach skalieren.
Ich hab nun 2 Probleme bei denen ich nicht weiß ob sie sauber bzw performant sind.

Zum einen brauch ich ne Schnittstelle um die Daten für JS zugänglich zu machen und zum anderen soll nicht erst vor dem Auge des Betrachters die Statistik "bauen".

Für die Schnittstelle dachte ich, dass ich die einzelnen Balken (sind in Tabellenform - ein Balken eine Zeile) erstmal gar nicht darstelle und in nem versteckten div die Menge eintrage, dann mit JS das auslese, die 100% erfasse und dann die länge des Balken berechne und die Länge dann einem <img> als width übergebe.

Nun ist die Frage, ob das halbwegs performant ist/wäre.

Ich bin in JS nicht so dolle, deswegen wollte ich mal nach euren Meinungen fragen.

[$traight-$hoota]

also du lieferst die werte direkt im html-code der seite?? für was brauchst du dann javascript? das kannst du dann doch eigentlich auch serverseitig berechnen lassen...

ansonsten solltest du die informationen möglichst so übertragen, dass user ohne javascript oder css das diagramm oder zumindest dessen werte auch verstehen können.
Von daher würde ich die daten z. B. so in einer Tabelle ausgeben:

<table id="Diagram">
<tbody>
<tr>
<th>Januar</th>
<td>223 Einträge</td>
</tr>
<tr>
<th>Januar</th>
<td>8674 Einträge</td>
</tr>
<!-- etc. -->
</tbody>
</table> 

das javascript sollte dann grob folgendes machen:

var table = document.getElementById("Diagram");
 
/* Damit wird die tabelle während der berechnungsphase nicht angezeigt. 
Zusätzlich könnte noch eine Ladeanzeige eingefügt werden. */
table.style.visibility = "hidden";
 
values = collectDiagramValues(table);
 
/* Müsste vllt. noch implementiert werden... *gg* */
max = Math.max(values); 
 
for(i in values){
table.firstChild.childNodes&#91;i&#93;.latChild.innerHTML = '<img width="' + getDiagramLength(values&#91;i&#93;, max) . '" />';
}
 
table.style.visibility = "visible";
 

[WarrenFaith]

Das Problem ist, dass ich nicht wirklich von einer Stelle aus auf alle Daten zugreifen kann ohne das "fetchen" der Daten nochmals durchzuführen. Da es große Datenmengen sein können, ist das daher nicht gerade performant.

Dein JS schnipsel gefällt mir. Danke schonmal

Btw: Die Statistik ist nur für Registrierte, daher wissen diejenigen das ohne JS nix läuft. Daher kann ich JS auch problemlos einsetzen

[$traight-$hoota]

Zitat von WarrenFaith

Das Problem ist, dass ich nicht wirklich von einer Stelle aus auf alle Daten zugreifen kann ohne das "fetchen" der Daten nochmals durchzuführen. Da es große Datenmengen sein können, ist das daher nicht gerade performant.

ähm... HÄ? (hessisches Fragewort mit zwei Buchstaben)
also ich versteh überhaupt nicht, was du damit sagen willst^^

ok, wenn das eh nur für user mit js und css verfügbar sein soll, kannst du dir das mit der tabelle aber auch fast sparen und die daten vllt direkt als js-objekt übergeben (auch wenn ich noch nicht kapiere, warum die berechnung nicht serverseitig erfolgen kann).
also ungefähr so:

protected void printDiagramCode(PrintWriter out, Map<String, Integer> values){
    out.println("<script type=\"text/javascript\">");
    out.println("diagramData = {");
    foreach(String label : values.keySet()){
        out.println("\t" + label + ": " + values.get(label) + ",");
    }
    out.println("};");
    out.println("</script>");
}
 

was dann folgenden js code generieren soll:

<script type="text/javascript">
diagramData = {
    januar: 233,
    februar: 8574,
    /* etc. */
};
</script>
 

diese daten kannst du dann direkt verarbeiten und müssen nicht mehr aus dem html-code ausgelesen werden.

[WarrenFaith]

Da hab ich den ganzen abend das in JS umgesetzt und dann beim Zähneputzen gegen 3 Uhr morgens fiel mir ein, was für nen Logikfehler ich gemacht hab.

Logisch gehts auch serverseitig! Damn aber gut, dass Positive ist, ich hab bissle JS-Kenntnis erlangt

Danke dir nochmal für deine Hilfe!

[KingCrunch]

Querkommentar von meiner Seite: Würde nicht den höchsten Wert als 100 nehmen (man verwendet da übrigens nicht den Begriff 100% sondern nur "100 als Ganzes" [/klugscheiß]) sondern würde es auf einen geraden Wert hochrechnen.

120.000 --> 150.000
345.545 --> 500.000

irgendwie sowas. Damit a) umgehst du dass Zwischenwerte allzu krumme Werte werden und b) wirkt es einfach logischer auch den größten Wert in ein system einzuordnen, anstatt den größten Wert als System zu verwenden.

[WarrenFaith]

Ich hab allerdings ne feste maximal Breite meiner Balken, und wenn ich in einer Übersicht nur Werte zwischen 0 und 30 hab und in der nächtens Ansicht dann aber zwischen 0 und 3000, dann kann ich nicht sagen, 1 = 1px oder so.

Demzufolge nutze ich die maximale Breite und setze sie gleich mit dem maximalen Wert der Statistic.

Hab grade den Code nicht hier, aber ich pack ihn rein wenn ich daheim bin.