Balkendiagramm in HTML

[Greenhorn79]

Hallo @all,

ich soll ein Balkendiagramm mit HTML ohne CSS erstellen und habe da so meine Probleme. Ich habe zwar ein Beispieldiagramm gefunden das ich auch schon ein wenig abgeändert habe aber es ist noch nicht ganz das was ich brauche...

Javascript-Funktion:

function erstelleDiagramm() {
border=1;
width=50;
function bar(high,val){
document.write("<td valign=bottom>",high,
   "<table bgcolor=#191970 border=",border," height=",high,
   " width=",width,
   " cellpadding=0 cellspacing=0>",
   "<tr><td align=center valign=bottom>",
   "<font color=#D4D4D4     size=-1 >",val,"</font>",
   "</td></tr></table></td>")
}
document.writeln("<table bgcolor=#a0a0a0 height=400 width=",
 teilnehmer.length*width," border=",border," >");

bar(105,1);
bar( 11,2);
bar(140,3);
bar(180,4);
bar(245,5);
bar(170,6);
bar( 88,7);
bar( 40,8);
bar(150,9);
document.writeln("</table>");
}

Ich habe in einer anderen Funktion drei Werte: Name, Punkte und PunkteMax
Der Name soll als Index für die einzelnen Balken hergenommen werden. Die Punkte sollen im Verhältnis zu PunkteMax als Höhe des Balkens hergenommen werden. Die Daten liegen in einem mehrdimensionalen Array. Ich dachte daran, dass ich die Variablen an diese Funktion übergebe und dann sowas habe wie bar(punkte/punkteMax*100,name)
Das funktioniert aber nicht.

Hat jemand einen Tipp für mich, was ich falsch gemacht habe oder wie man das Problem lösen könnte?

Danke schonmal.

Liebe Grüße
Michaela

 

[Davi2000]

AW: Balkendiagramm in HTML

Also wenn du das mit einer Programmiersprachen realisieren sollst, bist hier im falschen Forum. Hier geht es nur rein um HTML und CSS. Und mit rein HTML geht es nicht, dazu brauchst du schon CSS. Bzw es wäre nicht Standartkonform.

 

[Duddle]

AW: Balkendiagramm in HTML

Ich dachte daran, dass ich die Variablen an diese Funktion übergebe und dann sowas habe wie bar(punkte/punkteMax*100,name)

Na dann mach das doch. Falls du es schon probiert hast und gescheitert bist, zeig den entsprechenden Code.

Edit: es gibt übrigens recht viele fertige JS-Funktionen, die Balkendiagramme erzeugen. Ich weiß nicht, ob welche davon nicht mit CSS arbeiten (warum auch, ist schließlich ein Standard), trotzdem hier eine Auswahl:


http://www.jqplot.com/
http://www.workshop.rs/jqbargraph/





Duddle

 

[Myhar]

AW: Balkendiagramm in HTML

Sicher ist sie hier im korrekten Forum. Hier geht es um PHP und andere Scriptsprachen.
Deine Antwort ist hier fehl am Platz (btw: Ein Standard ist keine Art zu stehen (Standart) )

Ich würde die vorgefertigte Funktion vergessen (da wird ja noch mit font-tags gearbeitet.... das war im letzten Jahrtausend mal toll) und selber eine schreiben.
Im Prinzip nicht so kompliziert wie es klingt
Wenn es tabellarische Daten sind, dann arbeite auch mit einer Tabelle. Du brauchst zwei verschachtelte Elemente, wo du die Höhe/Breite (je nachdem, in welche Richtung du die Daten darstellen willst) einfach in Prozentwerten anpasst:

<div style="width:500px;height:20px">
<div style="width:80%;background-color:green"></div>
</div>

Diesen Aufbau musst du mit JS erzeugen. Kannst du damit etwas anfangen?
Bzw. verwendest du ein Javascript Framework (jQuery, YUI, ... ) auf deiner Seite?

 

[cebito]

AW: Balkendiagramm in HTML

Sicher ist sie hier im korrekten Forum. Hier geht es um PHP und andere Scriptsprachen.

Alles ok ich hab das erst hierher verschoben...

 

[mindraper]

AW: Balkendiagramm in HTML

hi.

etwas out-of-date, i know. aber falls das problem weiterhin besteht:

ich habe mal just 4 fun eine kleine js-bibliothek für die arbeit mit dem <canvas>-element gebaut. die ist zwar noch nicht final, aber für diese zwecke sollte sie auf jeden fall ausreichen.

die testpage findest du unter

sofern du das ergebnis im ff / o / chrome / safari zeigen kannst, kannst du dir das ja mal anschauen . wie gesagt, ist bei weitem noch nicht final.

hoffe das hilft