JavaScript XML Daten darstellen

[gfeschu]

Hallo zusammen

Ich lese das XML File mithile von Jquery.ajax ein und kann ja damit arbeiten.
Mein "Problem" ist, wie ich die Daten genau auswerten soll.

Das XML beinhaltet verschiedene Messwerte (von versch. Funktionen) von verschiedenen Plattformen und deren Server.
Wie man hier im Bild gut erkennen kann.
Ich möchte diese nun grafisch darstellen, je nach Wert der im XML steht. Also eine Art "Regeln" definieren, welche Zeit welche Farbe erhält.
Beispiel: Plattform 1, Ʃ , 3000, 5000, C, 500, 1500, S , 2000, 4000, R , 400, 1200, W , 1000, 2000, D, 1000, 2000

In dieser Art sollte es nachher dargestellt werden:


Wie sollte ich dieses kleine Progrämmchen angehen? Es geht mir hier jetzt eher um den Aufbau und die Logik, als der Code ansich.

Wäre toll wenn ich paar Meinungen zusammen bekomme.
Vielen dank für die Hilfe!

Lieber Gruss,
gfeschu

 

[schumischumi]

Puh also wenn sich keiner meldet dann poste ich mal. Bin zwar kein JS Experte aber kann ja mal erzählen wies ich von der Logik angegangen wäre:

1. hätte ich in der XML-Datei noch unterschieden zwischen Server und Plattform. so wie ich das sehe hast du beides in einem String unter System name zusammengefasst

2. Ist die frage ob die Anzahl der Plattformen fix ist oder nicht. Falls nicht würde ich in einer schleife durch die XML-Werte gehen (werden wahrscheinlich wie ein Array behandelt oder?) und eben die Plattformen zählen und daraus den html Code für die Tabelle generieren. ich geh mal davon aus dass die Spalten (D, X usw.) fix sind und nicht in der anzahl schwanken.

3. kleine funktion schreiben die je nach übergebener Spaltenwert und Spaltenart (zb "D" oder "X")einen oder mehrere Schwellenwerte prüft und den entsprechenden Farbcode zurückgibt

4. dann eine neue schleife, die die werte der server ausließt und in eine tabelle packt bzw. die tabelle der Plattformen um mehrere zellen ergänzt. hier kannst du dann auch gleich die zellenfarbe festlegen, in dem du die funktion aus punkt 3 mit dem Wert und Typ aufrufst und den entprechenden farbwert in ein stylesheet packst.

hier noch ein codebeispiel: http://www.w3schools.com/xml/xml_to_html.asp
und hier sogar mit jquery: http://daigo.org/2010/08/simple-xml-to-html-table-using-jquery/

edit:
du kannst die funktion auch so schreiben, dass sie am ende der schleife läuft und du sie mit dem zellenwert und einer zellenID, die du natülich irgendwo in der schleife generieren muss und über die du auch den zellenTyp bestimmen kannst, aufrufst. abschließend ändert die funktion noch die farbe der zelle anstatt wie zuvor einen Farbwertstring zurückzugeben. ist eleganter und von dem her flexibler weil du theoretisch auch noch einen aktualisierungsbutton einbauen kannst der dann die ganzen felder nachträglich farblich ändert.

 

[gfeschu]

Danke für deine Antwort, dachte schon es interessiert niemanden hier

1. Das ist eine gute Idee, werde ich wahrscheinlich so machen.

2. Also die Systeme sind fix, also die Anzahl. Würdest du dennoch eine Schleife durchlaufen lassen, oder diese hardcoded reinschreiben? Eine Schleife wäre wohl eine schönere Lösung oder?
Genau die Spalten X, D, C sind alle Fix. Also die ganze Tabelle eigentlich.

3. Macht sinn

4. Also deine Idee in dem nachträglichen Edit verstehe ich noch nicht ganz. Also die Funktion die, die Tabelle erstellt soll auch gerade die Farbe bestimmen, oder wie meinst du das? Also von der "Wertüberprüfungsfunktion" dann zu dieser, die dann die Spalten füllt?

Danke vielmals für die Hilfe!

 

[schumischumi]

2. Würde ich wegen der einfachheit hardcoded machen, wenn wirklich auch später nix mehr dazukommt und alles fix bleibt. falls sich in zukunft noch mal was ändern könnte würde ich ne schleife machen. man kann sich auch auf hardcoded rausreden, weils "schneller" gehn solle. ka ob man davon wirklihc was merkt^^

4. meinte das so:

1. Option:

funktion farbe(Wert, Typ){

if(typ == "D" und wert > 500)
return "#51656";
}
else{
return "#ffffff";
}
}

....

schleife für werte x{

echo "<td bgcolor=\"farbe(x.wert, x.typ)\">&nbsp;</td>";
}

2. Option:

funktion farbe(Wert, Typ, ID){

if(typ == "D" und wert > 500)
getDocumentbyID(ID).sytel.backgroundcolor = "#51656"
}
else{
getDocumentbyID(ID).sytel.backgroundcolor = "#ffffff";
}
}

....

schleife für werte x{

echo "<td id=\"x.server+x.typ\">&nbsp;</td>";
farbe(x.wert,x.typ,x.server+x.typ);
}

bei Option 2 kannst du die Funktion Farbe() theoretisch immer wieder ausführen und die Werte aktualisieren ohne die seite neu zu laden.

 

[Spike S.]

Unabhängig von der herangehensweise, würde ich den Zellen CSS Klassen zuweisen statt die Attribute zu ändern. Ich finde es umständlich im Nachhinein zu ändern und unübersichtlich, wenn ich an x Stellen Styles ändern muss. Daher zunächst die benötigten Klassen definieren, die können dann auch beliebig viele Attribute haben ohne den JS Code aufzublähen, und im JS entsprechend zuweisen.

 

[schumischumi]

Ist natürlich auch ne möglichkeit und auch schöner als meine^^

 

[carom]

Du könntest dir auch ein XSL-File für die Transformation in die Tabelle schreiben, die Transformation kann dann wahlweise auf dem Server oder wie bisher auf dem Client in JS stattfinden. Die Regeln kannst du da prima abbilden und musst nicht eine Zeile JS schreiben. Damit das möglichst einfach geht, solltest du das XML-Format noch etwas besser strukturieren (wie schumischumi schrieb Plattform und System nicht zusammenfassen, oder besser noch, die Plattform als "Container" für die Systeme verwenden, ist aus logischer Sicht ja auch so).
Sollte dich das interessieren, kann ich mal ein kurzes Beispiel bauen. Aber wenn du jetzt bereits etwas funktionierendes hast, dann belasse es so.

 

[gfeschu]

Hallo zusammen. Danke für alle Antworten!

Die Ausgangslage hat sich etwas geändert. Statt aus dem XML werde ich die Daten aus einer DB auslesen.

Eine Frage stellt sich mir aber noch. Wenn ich die TDs in einer Schleife erstellen lasse, muss ich ja zuerst eine korrekte Reihenfolge der Daten besitzen. Ausserdem muss ich übergeben in welches TR (welcher server 1,2,3 etc) es das schreiben soll.

Wie würdet ihr die Daten sortieren und übergeben? Oder verstehe ich da was falsch?

Lieber Gruss,
gfeschu

 

[Spike S.]

Da würde sich anbieten, die Daten nach System, Plattform, Parameter zu sortieren. Dann kann man einfach zeilenweise durchgehen und dabei die Tabelle erstellen.

 

[schumischumi]

ganz einfach und stupide könnte die Tabelle in der DB so ausgucken:

servername (PK),P1-C,P1-R,P1-D,P1-U,P1-X,P2-C,P2-R,P2-D,P2-U,P2-X ....

das ganze natürlich nur wenn es eine einzelne tabelle ist, die nciht im zusammenhang mit anderen steht und du nicht mehr plattformen bekommst.
dann holst du dir einmal die Tabelle und lässt einfach alles rausplotten.

edit: falls es noch mehrere Tabellen auf der DB gibt mit denen man synergien aufbauen könnte muss man sich anschaun was sich zum verknüpfen lohnt bzw. wo man kann man doppelte/redundante einträge vermeiden.