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)...
InformationsquelleAutor Silvertiger | 2012-10-23
Schreibe einen Kommentar