(CSS)(JS) - Balkendiagramme

[Arthur Dent]

Hallo Community,

ich möchte 2 dynamische Balkendiagramme in einer Webseite darstellen.
Zur Info: ich bekomme die Daten von einer SPS die diese alle 5 Sekunden in eine xml-Datei in der Form <size><balken1>50%</balken1></size> schreibt. Diese lese ich per JavaScript aus und ändere dann die Höhe der Balken mittels DOM/DHTML.
Nun habe ich allerdings im IE ein Problem mit einer "Mindesthöhe für Elemente (?)".

Das 1. Diagramm
 ist recht einfach aufgebaut. Hier gibt es nur 4 nebeneinander liegende (oder besser "stehende") Balken. Dazu nutze ich eine Tabelle mit einer Zeile und 4 Spalten.
Zunächst hatte ich in jeder Spalte (Zelle) ein farbiges DIV, deren Höhe ich dynamisch angepasst habe. Allerdings kann ich diese DIVs im IE nicht beliebig klein machen (also auch bei 0% bleibt ein DIV von ungefähr 16px Höhe). Hier könnte ich zur Not noch mit 1px Grafiken arbeiten; das hat allerdings den Nachteil, dass ich nicht mal schnell die Farbe ändern kann, sondern muss immer (wenn dem Kunden das Grün zu grün ist) eine neue Grafik erstellen. Außerdem bleibt nun immer ein 1px hoher Balken, auch wenn es 0% sind (OK, dieses Problem könnte ich evtl. umgehen, z.B. indem ich die Grafik in ein DIV lege, dass ich bei 0% ausblende...)

Das größere Problem stellt allerdings Diagramm 2 dar:
Hier sollen 6 Balken übereinander dargestellt werden (also quasi als 1 Balken, der aus 6 Teilen (Farben besteht):
 _
|1|
|2|
|3|
|4|
|5|
|6|

Die Grundstruktur sollte hier eine Tabelle mit 6 Zeilen und einer Spalte sein. Diesmal ändere ich allerdings nicht die Höhe der DIVs (bzw. der Grafik, da ich auch hier wieder das Problem mit den DIV-Höhen habe), sondern die Höhe der einzelnen Zellen (die Werte ergeben zusammen immer 100% und die Tabelle hat eine feste Höhe von 240px - die Grafiken haben 100%, damit sie die Zellen in jedem Fall komplett ausfüllen). Nun habe ich allerdings das gleiche Problem, das ich zuvor mit den DIVs hatte, mit den einzelnen Zellen. D.h., sie sind immer ~16px hoch, wodurch dann Lücken zwischen den einzelnen Balken entstehen, wenn diese kleiner sind.
Also so sollte es sein:

|1|
|1|
|1|
|2|
|4|
|5|
|5|
|6|

aber so ist es:

|1|
|1|
|1|
| |
| |
|2|
| |
| |
|4|
| |
|5|
|5|
| |
| |
|6|

Naja, zumindest in etwa (der Balken wird natürlich nicht größer, da auf 240px beschränkt) :)

Ich hoffe, ich konnte das Problem halbwegs verständlich erklären...

Ach ja, für's erste würde eine Lösung für den 6er IE genügen.
Evtl. könnte ich auch einen anderen Weg gehen, z.B. Java-Applet oder SVG... von beidem hab ich jedoch nicht viel Ahnung, aber wenn mir jemand diesbezüglich ein Paar Tipps geben könnte (oder besser noch ein paar Beispiele), wäre das schonmal ein Anfang...

Gruß,
Arthur

[wahsaga]

hi,

Nun habe ich allerdings im IE ein Problem mit einer "Mindesthöhe für Elemente (?)". [...]
Allerdings kann ich diese DIVs im IE nicht beliebig klein machen (also auch bei 0% bleibt ein DIV von ungefähr 16px Höhe).

Der IE macht auch leere Elemente idR. so groß, wie einen Zeilenhöhe in der aktuellen Schriftgröße (und -art) wäre.

Formatiere die Elemente auch noch mit overflow:hidden, und das Problem sollte gelöst sein.

gruß,
wahsaga

[Arthur Dent]

Hallo,

Der IE macht auch leere Elemente idR. so groß, wie einen Zeilenhöhe in der aktuellen Schriftgröße (und -art) wäre.

Formatiere die Elemente auch noch mit overflow:hidden, und das Problem sollte gelöst sein.

gruß,
wahsaga

vielen Dank, bei Diagramm 1 funktioniert das schonmal super. Bei Diagramm 2 hab ich allerdings noch 'nen kleinen Abstand, wenn ein Balken <= 1px ist.

Gruß,
Arthur

[H-P Ortner]

Hallo Arthur!

Nun habe ich allerdings im IE ein Problem mit einer "Mindesthöhe für Elemente (?)".

Das größere Problem stellt allerdings Diagramm 2 dar:
Hier sollen 6 Balken übereinander dargestellt werden (also quasi als 1 Balken, der aus 6 Teilen (Farben besteht):

Also so sollte es sein:

|1|
|1|
|1|
|2|
|4|
|5|
|5|
|6|

aber so ist es:

|1|
|1|
|1|
| |
| |
|2|
| |
| |
|4|
| |
|5|
|5|
| |
| |
|6|

Ach ja, für's erste würde eine Lösung für den 6er IE genügen.
Evtl. könnte ich auch einen anderen Weg gehen, z.B. Java-Applet oder SVG... von beidem hab ich jedoch nicht viel Ahnung, aber wenn mir jemand diesbezüglich ein Paar Tipps geben könnte (oder besser noch ein paar Beispiele), wäre das schonmal ein Anfang...

Also statisch läßt such das fast so darstellen, wie du das beschreibst:

  
<table border="0" width="60px" cellspacing="0px" cellpadding="0px" >  
 <tr><td style="background-color:red;  height=120px"></td></tr>  
 <tr><td style="background-color:blue; height=0px  "></td></tr>  
 <tr><td style="background-color:red;  height=60px "></td></tr>  
 <tr><td style="background-color:blue; height=30px "></td></tr>  
 <tr><td style="background-color:red;  height=20px "></td></tr>  
 <tr><td style="background-color:blue; height=10px "></td></tr>  
</table>  

Eventuell hilft dir das für deine dynamische Erstellung

Viele Grüße

H-P Ortner

[Arthur Dent]

Hallo H-P,

Also statisch läßt such das fast so darstellen, wie du das beschreibst:

ja, aber auch nur fast... bei 0px gibt's beim IE immer noch einen schmalen Balken (auch wenn ich bei height ein ':' statt '=' schreibe *g*)
Aber einfach die Tabellenzellen einzufärben, anstatt da noch divs reinzupacken, ist eigentlich 'ne gute Idee... macht das ganze doch etwas übersichtlicher.

Danke, und einen schönen Rest-Sonntag

Arthur

[H-P Ortner]

Hallo Arthur!

ja, aber auch nur fast... bei 0px gibt's beim IE immer noch einen schmalen Balken (auch wenn ich bei height ein ':' statt '=' schreibe *g*)

In dem Fall hast du das natürlich gleich gesehen weil das Beispiel kurz war und du dich wirklich damit beschäftigt hast.

Ich hab es einfach übersehen, der IE schimpft auch nicht und der valigator sieht das auch nicht.

Bleibt für mich die Frage, wie kann ich so etwas validieren?

Viele Grüße

H-P Ortner