Verstehe ich noch nicht ganz: Willst Du nun zwei Balken anzeigen oder soll es zwei geben, aber abhängig von einem Kriterium, nur einer sichtbar sein und der andere unsichtbar? Letzters müsst Du erreichen können, indem Du jeweils display:none oder display:block für den ganzen Balken setzt.
genau das zweite es soll durch kriterien entweder der eine oder der andere angezeigt werden.
Ja das macht er auch schon das geht ohne Probleme. Nur will ich die Farben über die Animation ändern.
Der Hintergrund ist dabei, das ich einmal, über eine If else Abfrage Zeiten anzeige wielange es noch dauert da ist es wichtig das der farben ändert von grün nach gelb nach rot und der andere Balken sagt mir wielange es schon geht. Zurzeit erstelle ich einfach verschiedene Balken. Nur wenn er von dem einen Balken zum anderen wechselt bleibt der erste Balken da und ich sehe beide Überlappend.
Selbstverständlich, ich erinnere mich jetzt an diese Balkendiagramme. Der Schlüssel ist "balkenEigenschaften". Dieser müsste etwa so aussehen:
Code{ colorBar: "green", colors: [5: "red", 10: "yellow"] }Das müsste irgend wo beim Erzeugen des Balkendiagramms angegeben werden.
Sorry Sempervivum, das ist mein aktueller Code, kann ich dort einstellen das er ab 10 gelb werden soll und ab 5 rot.
function balkenDiagrammanimation(selector, value) {
$(selector).each(function (index, element) {
var balkenID = $(this);
var max = balkenID.data("max");
var balkenEigenschaften = balkenID.data("balkenEigenschaften");
if (value > max) value = max;
var barWidth = value / max * balkenEigenschaften.barWidth;
balkenID.setLayer('text', {
text: getText(value, max, balkenEigenschaften)
}).stopLayer('bar')
.animateLayer('bar', {width: barWidth, fillStyle: getColor2(value, balkenEigenschaften)}, {duration: 1000, easing: 'linear',});
});
}
function getColor2(value, balkenEigenschaften) {
var color = balkenEigenschaften.colorBar;
if (balkenEigenschaften.colors) {
balkenEigenschaften.colors.forEach(function (item, index) {
if (value > item.threshold) color = item.colorAbove;
});
}
return color;
}Hallo zusammen, kann ich die Farben des Balkens auch über die animation einstellen?
Zur Zeit stelle ich diese ja über das erstellen des Balkens ein. Ich würde es aber gerne in der Animation einstellen
function updateBarDisplay(selector, value) {
30. $(selector).each(function (idx, ele) {
31. var canv = $(this);
32. var max = canv.data("max");
33. var opts = canv.data("opts");
34. var barWidth = value / max * opts.barWidth;
35. canv.setLayer('text', {
36. text: getText(value, max, opts)
37. }).stopLayer('bar')
38. .animateLayer('bar', {
39. width: barWidth,
40. fillStyle: getColor(value, opts)
41. }, {
42. duration: 1000,
43. easing: 'linear',
44. step: function (now, fx, layer) {
45. console.log(now, fx);
46. }
47. });
48. });
49. }DAs ist der Code zum ausfüllen des Balken
function Zeichnen(strResponseText){
var objDaten = JSON.parse(strResponseText);
// 1: M1 //
if(objDaten.currentspeed[0]==0){
if (Math.abs(objDaten.setlength[0]-objDaten.currentlength[0])>200){
erstelleBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'blue',colors: [{ threshold: 40, colorAbove: 'blue' },{ threshold: 70, colorAbove: 'blue' },],templateText:"{remaining} min", textPos: "left"});
}
else {
erstelleBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'black',colors: [{ threshold: 40, colorAbove: 'black' },{ threshold: 70, colorAbove: 'black' },],templateText:"{remaining} min", textPos: "left"});
}
}
else {
var zeitUmbau1 = Math.round((objDaten.setlength[0]-objDaten.currentlength[0])/(objDaten.currentspeed[0]*60));
erstelleBalken('#balkenM1', zeitUmbau1, 30, {colorBar: 'red',colors: [{ threshold: 5, colorAbove: 'yellow' },{ threshold: 10, colorAbove: 'green' },],templateText:"{remaining} min", textPos: "right"});
}
} // end if speed okMir ist aufgefallen, ich habe den Balken so eingestellt das er erst ab 30 Minuten kleiner wird. Genau ab dem Moment schneidet der mir das min hinten ab und der Balken spackt rum. Weis vielleicht jemand warum er das da macht?
Mit welchem Befehl lösche ich den Balken ?
Also ich habe die ganze Sache jetzt mit Firefox gemacht und da aktualisiert er es automatisch.
jetzt habe ich schon eine Idee warum er mit den Balken rumspackt.
Warum er den Balken so versetzt weis ich nicht.
Aber ich denke mal, da ich ja immer nur die Daten aktualisiere aber nicht den Balken mit, spackt der rum. Ich versuche jetzt mal, das er mir alles aktualisiert.
ich habe mal ein alert mit eingebaut und solange ich die console aus habe aktualisiert sich der wert nicht.
Wenn ich aber dann die console an mache dann wird der Wert aktualisiert.
ich habe aber drei fehlermedlungen in der console.
Ja ich habe Sie nur da aufgerufen und halt einmal definiert aber sonst nirgends.
ja er aktualisiert es nicht selbst wenn ich die Seite mit F5 aktualisiere wird nichts aktualisiert. Nur wenn ich die console öffne dann aktualisiert er es.
ich benutze internet explorer ist das vielleicht ein problem ?
Ganz komisch immer wenn eine Datenbankabfrage getätigt wird, und der Wert in der HTML sich ändert spackt der Balken rum.
Mal ins Blaue geraten: Die Funktion Zeichnen() darfst Du nur im onreadystatechange aufrufen. Rufst Du sie vielleicht noch irgend wo anders auf?
was ist das onreadystatechange?
Warum aktualisiert er das denn nur wenn ich die console offen habe ?
nein das hat er nicht gemacht wenn ich die Seite neu geladen habe.
sobald ich die console öffne aktualisiert er das aber er spackt dabei etwas rum der balken wird erst etwas dicker und die schrift ist weg und dann ist wieder alles gut.
wenn ich die console aber wieder schließe aktualisiert sich nichts mehr
ok nur vorher habe ich das strResponseText ja an Zeichen übergeben was muss ich nun noch verändern damit das jetzt auch noch funktioniert?
Jetzt lädt der meine Seite halt nur einmal und aktualisiert das nicht
er aktualisiert nur die ganze seite
Wo und wie muss ich denn das setInterval() verbauen?
var hR = new XMLHttpRequest();
var strResponseText = "";
hR.onreadystatechange = function(){
if ( hR.status == 200 && hR.readyState == 4 ){
strResponseText = hR.responseText;
Zeichnen(strResponseText);
}
};
hR.open("GET", "seite.php", true);
hR.send(null);
Ja er aktualisiert es noch garnicht er aktualisiert die ganze Geschicht nur über einen separaten Befehl.
Ich kann die URL leider nicht hochladen, ist liegt alles in einem Firmennetzwerk.
Was muss ich denn ändern damit er mir die Daten regelmäßig zieht?
Hallo zusammen,
ich möchte meine Seite so einstellen, das diese sich automatisch an die verschiedenen Bildschirmauflösungen anpasst.
Zum einen, wie mache ich das ? 
Zum anderen lasse ich Balken und Kreise auf der Seite anzeigen, welche ich hart positioniert habe und welche ich auch von der Größe hart programmiert habe. Was muss ich dabei ändern? oder kann ich das so lassen und durch die automatische Bildschrimanpassung passt sich das mit an ?
Vielen Dank für Ihre Mühe
Hallo zusammen,
vorweg etwas zu meiner Seite: Ich habe eine Seite erstellt, auf der ich Balken anzeige. Diese Balken werden in einer JavaScript Datei erzeugt. In der JS Datei werden die benötigten Daten von einem Webserver über PHP gezogen.
Zur Zeit aktualisiere ich die Seite immer komplett. Ich möchte aber nur die Balken aktualisieren.
Im ersten Bild ist zu sehen, wie ich die Daten vom Webserver ziehe und diese Daten in Zeichnen(strResponseText) speicher.
Im zweiten Bild werden diese Daten der function übergeben und geparsed.
Jetzt möchte ich das alles mit AJAX machen und immer nur die Daten aktualisieren und nicht die ganze Seite. Kann mir da jemand helfen ?
Vielen Dank für die Mühe.
Hallo zusammen, ich bilde einpaar Daten, welche ich von einer Datenbank ziehe auf einer HTML Seite ab.
Mit welchem Befehl kann ich die Seite aktualisieren damit immer wieder neue Daten von der Datenbank gezogen werden?
Ich habe diese beiden Befehl schon versucht er aktualisiert die Seite zwar aber zieht mir nicht neue Werte aus der Datenbank. Wenn ich aber F5 drücke macht die Seite das.
<meta http-equiv="refresh" content="10, url=url.html">
oder
<script language="JavaScript" type="text/javascript"> setTimeout("url.html", 3000); //5000 Millisekunden </script>
hat jemand eine Idee was ich machen kann ?
ich ziehe die Daten von einer Datenbank ich glaube das es so auch schon funktioniert habe ich garnicht mit berücksichtigt. ich versuche es mal abzubilden.
ok vielen dank, kann man die Sache mit Jquery denn vielleicht auch hinbekommen ?