Säulendiagramm aus Benutzereingaben erstellen

[Java.kn]

Hallo zusammen,

ich bin über der Aufgabe im Netz gestolpert und versuche es zu vervollständigen ( es fehlen angeblich nur die richtigen Funktionsparameter( Zeile 35 und 37) ) Es funktioniert aber leider nicht. Es geht dabei um eine Anwendung, bei der der Benutzer folgenden Daten mehrfach eingeben kann:

1. der Name jedes Prüfungsteilnehmers
2. die erreichte Punktzahl für jeden Teilnehmer
3. die maximal erreichbare Punktzahl

Daraus erstellt die Anwendung eine Säulendiagramm. Für jeden Prüfungsteilnehmers wird eine vertikale Säule gebildet, deren Höhe dem Verhältnis seiner erreichten Punkte zum Maximum entspricht. Unterhalb jeder Säule wird der Name des Teilnehmers angegeben. Die Säule selbst ist mit der erreichten Punktzahl in % beschriftet.

Vielen Dank im Voraus!!
Mira

Anhang anzeigen aa.zip

 

[SteelWheel]

Hi Mira,

bist Du sicher, dass die Namen unter dem Diagramm tehen sollen? Es wäre - für die Übersichtlichkeit - deutlich einfacher, wenn der Name mit einer horizontalen Säule gebunden wird (quasi Name :: Diagramm :: Punktzahl (als Wort) ).

Du benötigst für das Balkendiagramm - egal nun, ob vertikal (v) oder horizontal (h) - zwei DIV-Tags. Während der äußere "relativ" ist, ist der innere "absolut". Je nach Ausrichtung (v/h) gibst Du eine Angabe beim inneren DIV vor. Die andere wird individuell zugeweisen - das ist die variable Größe für Deine Punktzahl.

Die Angabe ist natürlich in Pixeln zu berechnen. Nehmen wir an, Du hast 50 Punkte als Maximum zu vergeben, definierst Dein inneres DIV aber mit 200 px. Genau, einfach nur ein schnöder Dreisatz, wobei 1 Punkt 4 px entspricht. Es gilt:
Pixelmaß = (Höhe (bzw. Breite) des DIV / max. Anzahl Punkte) * erreichte Punktzahl;

Das lässt sich mit JavaScript auch noch animieren (habe genau sowas erst vor wenigen Tagen "horizontal" sowie als "Kreis" (mit CSS3) gebastelt).

Sämtliche Positionierungen sind Dir überlassen.

Interessant ist jetzt noch, wieviele Prüfungsteilnehmer auf einmal sichtbar sein sollen, ob Blättern, Schieben, Wischen, Klicken ... das Ergebnis kannst Du übrigens als eigene Zeile anzeigen, als "title"-Tag auf dem inneren DIV oder erst per Klick, wenn Du es in data-* hinterlegt hast.

Aber wie eingangs erwähnt: Sofern nichts dagegen spricht, sähe es besser aus, wenn alle Prüfungsteilnehmer untereinander stehen - der Beste ließe sich übrigens gleich farbig herausheben. Das macht einen Vergleich der Teilnehmer untereinander mit einem Blick/Klick einfacher.

Ich hoffe, dass ich Dir auf die gedanklichen Sprünge helfen konnte.

Grüße.

 

[Java.kn]

Hallöchen,

vielen Dank für die ausführliche Erklährungen. Das hat mir auf jeden Fall weitergeholfen. Ich werde versuchen diene Tips umzusetzen

Grüße

 

[Java.kn]

Hi again,

nach einige gescheiterte Lösungsversuche, versuche ich nochmal hier den richtigen Weg herauszufinden. Ich habe jetzt das Diagramm erst statisch aufgebaut und versucht das Ganze mittels Firmularfelder zu lösen.Es geht mir in erster Lnie um die dynamische Klassenzuweisung. Falls jemand eine Idee hat wie man aus Formulareingaben einen Vertikalen Säulendiagramm erstellt, dann freue ich mich auf Vorschläge, da ich bei dieser Sache ordentlich gescheitert bin.
Viele Grüße und bis bald!