(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