nicht angemeldet
& HTML: Matrix 300x300 darstellen
0 0 
Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0
& HTML: Matrix 300x300 darstellen
Hallo zusammen,
ich möchte in HTML eine Matrix mit 300x300 Elementen ausgeben, hier ein Beispiel für eine 4x4 Matrix:
X X O O
O X O X
X X X X
O X X O
Dabei kann ein Element entweder ja oder nein sein (X oder O). Die Daten werden aus einer Datenbank geliefert. Die Frage ist, wie Stelle ich diese Matrix dann im Browser performant dar?
1. Über eine HTML-Tabelle (imho total unperformant)
2. über divs (wahrscheinlich auch unperformant?)
3. Generierung einer Grafik der Matrix?
Jemand eine andere Idee?
Gruß
LeKuchen
-
hi,
Dabei kann ein Element entweder ja oder nein sein (X oder O). Die Daten werden aus einer Datenbank geliefert. Die Frage ist, wie Stelle ich diese Matrix dann im Browser performant dar?
- Über eine HTML-Tabelle (imho total unperformant)
Von der Struktur her bietet sich eine Tabelle für eine zweidimensionale Matrix aber wohl am ehesten an.
- über divs (wahrscheinlich auch unperformant?)
Darüber hinaus strukturell schlechter, und vermutlich schwieriger zu handhaben.
- Generierung einer Grafik der Matrix?
Da du dabei jeden Pixel einzeln setzen müsstest, halte ich das auch nicht für sonderlich performant.
4. Vorschlag:
Das ganze als Textstrings zusammensetzen, jeweils entweder X oder 0 anfügen und nach 300 Zeichen einen Zeilenumbruch einfügen - und diesen String dann innerhalb von <pre> darstellen lassen; mit per CSS verringerter Schriftgröße, damit man bei 300 Zeichen in einer Zeile nicht meterweit querscrollen muss.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
- Über eine HTML-Tabelle (imho total unperformant)
Von der Struktur her bietet sich eine Tabelle für eine zweidimensionale Matrix aber wohl am ehesten an.
wahsaga,
Bei 300×300 stellt sich die Frage, ob das sinnvoll ist. Da es nicht darum geht, die Struktur der Daten zu beschreiben (diese ist in der DB), sondern sie lediglich (performant!) darzustellen, ist eine Tabelle wohl eher nicht sinnvoll.- Generierung einer Grafik der Matrix?
Da du dabei jeden Pixel einzeln setzen müsstest, halte ich das auch nicht für sonderlich performant.
Ähm, warum das nicht? Wir sprechen von serverseitiger Generierung der Grafik, nehm ich an? Das sollte der Server innerhalb eines Wimpernschlages hinbekommen. Bei nur 2 Werten (Farben) ist die Information 90000 Bit, wenn in den Daten Muster vorhanden sind, wird die Grafikdatei noch kleiner.
- Vorschlag:
Das ganze als Textstrings zusammensetzen, jeweils entweder X oder 0 anfügen
Das wären 90000+ Byte, die vom Server zum Client geschickt werden müssen. Etwa eine Zehnerpotenz mehr an Datenübertragung.
Die Lösung meiner Wahl ist eine serverseitig generierte Grafik.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar,
Da es nicht darum geht, die Struktur der Daten zu beschreiben (diese ist in der DB), sondern sie lediglich (performant!) darzustellen, ist eine Tabelle wohl eher nicht sinnvoll.
Da hat, jemand verstanden, was ich meine...;o) Nach meiner Erfahrung braucht ein Browser extrem lange zum Rendern von so großen Tabellen...
Ähm, warum das nicht? Wir sprechen von serverseitiger Generierung der Grafik, nehm ich an?
Ja, natürlich.
Das sollte der Server innerhalb eines Wimpernschlages hinbekommen. Bei nur 2 Werten (Farben) ist die Information 90000 Bit, wenn in den Daten Muster vorhanden sind, wird die Grafikdatei noch kleiner.
Das war auch meine Einschätzung. Die Grafik muss auch nicht immer neu erzeugt werden - kann einen timestamp-Abgleich zwischen letzter DB-Änderung und Datei machen...
Die Lösung meiner Wahl ist eine serverseitig generierte Grafik.
Supi, danke für Deine durchdachte Begründung!
Gruß
LeKuchen -
Hi Gunnar,
Ähm, warum das nicht? Wir sprechen von serverseitiger Generierung der Grafik, nehm ich an? Das sollte der Server innerhalb eines Wimpernschlages hinbekommen. Bei nur 2 Werten (Farben) ist die Information 90000 Bit, wenn in den Daten Muster vorhanden sind, wird die Grafikdatei noch kleiner.
es kommt aber auch darauf an, ob ein Mensch aus der Matrix Informationen auslesen können soll. Dann kommst du mit 300x300 Pixeln nämlich nicht weit ;-)
Gruß,
Andreas.-
es kommt aber auch darauf an, ob ein Mensch aus der Matrix Informationen auslesen können soll. Dann kommst du mit 300x300 Pixeln nämlich nicht weit ;-)
Andreas,
Das hängt von der Art der Daten ab und dem Zweck von deren Visualisierung. Vielleicht kommt es dabei ja gar nicht auf das genaue Erkennen jedes einzelnen Datums an, sondern auf das Erkennen von Clustern, Tendenzen, Mustern, …Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hi Gunnar,
es kommt aber auch darauf an, ob ein Mensch aus der Matrix Informationen auslesen können soll. Dann kommst du mit 300x300 Pixeln nämlich nicht weit ;-)
Andreas,
Das hängt von der Art der Daten ab und dem Zweck von deren Visualisierung.ACK.
Vielleicht kommt es dabei ja gar nicht auf das genaue Erkennen jedes einzelnen Datums an, sondern auf das Erkennen von Clustern, Tendenzen, Mustern, …
Ja. Eben diese Information geht aus dem OP nicht hervor. Daher halte ich es für schwierig, eine der angebotenen Lösungen zu präferieren.
Gruß,
Andreas.-
Hallo,
Ja. Eben diese Information geht aus dem OP nicht hervor. Daher halte ich es für schwierig, eine der angebotenen Lösungen zu präferieren.
Es geht eigentlich schon um das Erkennen einzelner Werte in der Matrix. Aber nehmen wir an, ich räume für ein Element einen Platz von 5x5 Pixeln ein wird die Grafik zwar größer, aber bleibt vom benötigten Speicher-/Transfervolumen imho noch akzeptabel...v.a. im Vergleich zu einer Tabellenkonstruktion.
Gruß
LeKuchen-
Es geht eigentlich schon um das Erkennen einzelner Werte in der Matrix.
LeKuchen,
Dann ist jede 2D-Darstellung problematisch. Beim Suchen des Elements (42, 42) kann man leicht aus der Zeile/Spalte geraten.Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo Gunnar,
LeKuchen,
Dann ist jede 2D-Darstellung problematisch. Beim Suchen des Elements (42, 42) kann man leicht aus der Zeile/Spalte geraten.Da, gebe ich Dir recht, einfach ist das Problem nicht zu lösen! ;o)
Mein Idee ist momentan eine leere Matrixgrafik mit dem Raster zu erstellen:
+-+-+-+-+
+-+-+-+-+
+-+-+-+-+
+-+-+-+-+Die Vorlage lese ich serverseitig ein und generiere dann die true-Elemente in die Grafikvorlage/Raster als farbige Quadrate, etwa 5x5 Pixel.
Unter der Grafik dann (nur für die true-Elemente) eine area-map für das Element mit Tooltip/Title/Alttext (oder wie man es auch bezeichnet), sodaß man diese Information beim Mouseover erhält...
Gruß
LeKuchen
-
-
-
-
-
- Über eine HTML-Tabelle (imho total unperformant)
-
Huhu wahsaga,
Das ganze als Textstrings zusammensetzen, jeweils entweder X oder 0 anfügen und nach 300 Zeichen einen Zeilenumbruch einfügen - und diesen String dann innerhalb von <pre> darstellen lassen; mit per CSS verringerter Schriftgröße, damit man bei 300 Zeichen in einer Zeile nicht meterweit querscrollen muss.
Auch eine gute Idee, Danke!
Gruß
LeKuchen