JQuery FLOT Diagramm dynamische Y-Achse
Ich habe eine flot-chart berechnet die max Y-Achsen-Wert basierend auf den letzten 100 Datenpunkte, und dann plots erfolgreich...
ABER
Manchmal, um die laufende Summe der Laufenden Handlung (5 Sekunden Verzögerung mit neuen Datenpunkt geplottet) über dem aktuellen max-Grenze.
Gibt es einen Weg, um die Y-Achse dynamisch beim Plotten, neue Punkte auf der Karte?
Dies ist eine gültige Frage, wie man die dynamische Skalierung der Y-Achse des Diagramms, wenn die aktuelle Y-Achse überschritten wird, da sich das Diagramm gezeichnet, im Laufe der Zeit neue Punkte, die Hinzugefügt wird jeden 5 Sekunden, ich wurde gefragt, wie der Skalierung der Y-Achse zu passen, der NEUE plot-Daten, wenn es erreicht über dem aktuellen Max Y-Achse Wert..
UPDATE:
hier ist der code, den ich verwenden (Json zurückgegeben Daten) sowie die plot-update-timer:
Die "highY" nimmt die letzten 100 Datenpunkte aus einer Datenbank und setzt den max-Wert zu den höchsten zählen, + 10%
<script type="text/javascript">
$(function () {
var str1 = [], totalPoints = 300;
var str2 = [], totalPoints = 300;
var pts1 = '';
var pts2 = '';
if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
var maxYaxis = <?PHP echo $highY; ?>;
function getStr1() {
var ts1 = new Date().getTime();
var json1 = (function () {
var json1 = null;
var myURL = '<?PHP echo $updateURL; ?>?s=1&ts=' + ts1;
$.ajax({
'async': false,
'global': false,
'url': myURL,
'dataType': "json",
'success': function (data) {
json1 = data;
}
});
return json1;
})();
var y1 = json1['data']['avgpersec'];
var total_1 = json1['data']['running_total'];
document.getElementById('<?PHP echo $string1; ?>Total').innerHTML = total_1;
if (str1.length > 0) { str1 = str1.slice(1); }
while (str1.length < totalPoints) {
var prev = str1.length > 0 ? str1[str1.length - 1] : 50;
str1.push(y1);
}
//zip the generated y values with the x values
var res = [];
for (var i = 0; i < str1.length; ++i){ res.push([i, str1[i]]) }
return res;
}
function getStr2() {
var ts2 = new Date().getTime();
var json2 = (function () {
var json2 = null;
var myURL = '<?PHP echo $updateURL; ?>?s=2&ts=' + ts2;
$.ajax({
'async': false,
'global': false,
'url': myURL,
'dataType': "json",
'success': function (data) {
json2 = data;
}
});
return json2;
})();
var y2 = json2['data']['avgpersec'];
var total_2 = json2['data']['running_total'];
document.getElementById('<?PHP echo $string2; ?>Total').innerHTML = total_2;
if (str2.length > 0) { str2 = str2.slice(1); }
while (str2.length < totalPoints) {
var prev = str2.length > 0 ? str2[str2.length - 1] : 50;
str2.push(y2);
}
//zip the generated y values with the x values
var res = [];
for (var i = 0; i < str2.length; ++i){ res.push([i, str2[i]]) }
return res;
}
//setup control widget
var updateInterval = 5000;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
//setup plot
var options = {
series: { shadowSize: 0 }, //drawing is faster without shadows
yaxis: { min: 0, max: maxYaxis},
xaxis: { show: false },
colors: ["<?PHP echo $string1Color; ?>","<?PHP echo $string2Color; ?>"]
};
var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options);
function update() {
plot.setData([ getStr1(), getStr2() ]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
Was ich hoffe zu erreichen, ist die Anpassung von "$highY" (Y-Achse) Wert der realen Zeit, wie ich den Anschlag neue Datenpunkte, so dass das Diagramm skaliert, wenn der Wert der neuen Daten plot-point über die aktuellen "yaxis { max: # }" in den Diagramm-Optionen.
- Es wäre hilfreich zu zeigen, den code hast du bei der Annahme von neuen Daten und das zeichnen wieder (vor allem, wie Sie es gerade mit der y-Achse max)...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich nehme an, jetzt bist du mit
flot.setData
undflot.draw
?Die einfachste Lösung ist, einfach zu rufen
$.plot
mit den neuen Daten jedes mal, wenn Sie es erhalten. Zu verschiedenen Zeiten wurde empfohlen von den Autoren der flot-plugin als eine halbwegs effiziente Umgang mit dieser situation. Ich habe diese verwendet werden, auf Diagrammen, Aktualisierung jede Sekunde, und gefunden, dass es nicht eine übermäßige Menge an CPU-Auslastung auf dem computer des Benutzers, auch mit 3-4 Graphen erfrischend jede Sekunde auf eine Seite.BEARBEITEN basiert auf dem code, den Sie Hinzugefügt haben (und die von Ihnen vorgeschlagenen Bearbeiten), ich würde die update-Funktion wie folgt Aussehen:
Darüber hinaus würden Sie code hinzufügen, um
getStr
undgetStr
zu halten, dass diemaxYaxis
variable up to date.flot.setupGrid()
in Verbindung mitflot.setData
undflot.draw
. Dies ermöglicht Ihnen, ändern Sie den max-Wert auf Ihre Achse, ohne über eine vollständige Initialisierung.