Plotten mehrerer Datensätze mit flot mit ajax - Daten nicht angezeigt richtig

Ich bin mit flot in einem Versuch, um zu versuchen, zu zeichnen einige Daten. Ich hatte diese Arbeit mit einem dataset, und als ich versuchte, den code zu modifizieren, um mehr als ein dataset, ich lief in einen Fehler ich habe eine harte Zeit, die aufspüren und es aufgehört zu arbeiten. Ich bin sicher, es ist eine änderung, die ich gemacht habe, aber für das Leben von mir ich kann nicht verfolgen Sie unten.

Die Y-Achse zeigt, -1.0, -0.5, 0, 0.5, 1.0 - kaum die Werte Im erwarte-und es ist keine X-Achsen-Daten. Das Diagramm leer angezeigt wird.

Ich versuche, etwas zu erreichen, ähnlich der Ruf graph auf StackOverflow, aber diese repräsentieren unterschiedliche numerische Werte. Der erste Wert der data - pair-Mädchen soll ein timestamp (ich glaube, ich habe es richtig berechnet), und der zweite Wert der data - pair-Mädchen ist der Wert, der gezeichnet werden.

Machte ich sicher, dass ich nicht habe meine Werte in Anführungszeichen, das ich sah, war eine der häufigsten Fragen, die es gibt.

Jedes feedback oder Unterstützung bei der Herausstellung des Problems wäre sehr geschätzt.

stats.js

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            var i = 0;
            console.log(datasets);
            $.each(datasets, function(key, val){
                val.color=i;
                i++;

                var data = [ $(this) ];
                console.log(data);

                var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: {mode: 'time', timeformat: "%y/%m/%d", tickDecimals: 0, tickSize: 1 }
                };

                var placeholder = $("#placeholder");

                $.plot(placeholder, data, options);
            });
        }
    });   
}

consoleGet_stats.php

<?php
    //simplified for example purposes
    $fields=explode(",",$_REQUEST['field']);

    foreach ($fields as $field){
        $rows=$dbConnect->getRows('select date, ' .$field. ' from websiteStats order by id asc');
        $resultData = array('label' => $field);
        foreach($rows as $row){
            $t = strtotime($row['date']." UTC") * 1000;
            $resultData['data'][]=array($t, (int)$row[$field]);
        }
        $results[]=$resultData;
    }
    die(Json_encode($results));
?>

die Ausgabe der Konsole

[Object { label="activeUsers", data=[6]}, Object { label="totalUsers", data=[6]}]
[[Object { label="activeUsers", data=[6], color=0}]]
[[Object { label="totalUsers", data=[6], color=1}]]

zurückgegebenen json von firebug (Formatierung Hinzugefügt, für dieses posting)

[
    {"label":"activeUsers","data":[[1334583090000,26],[1334669491000,26],[1334755893000,26],[1334842290000,26],[1334928691000,26],[1335015093000,26]]},
    {"label":"totalUsers","data":[[1334583090000,150],[1334669491000,170],[1334755893000,193],[1334842290000,200],[1334928691000,225],[1335015093000,257]]}
]

Plotten mehrerer Datensätze mit flot mit ajax - Daten nicht angezeigt richtig

Von dem was ich weiß, $.plot nimmt ein array von Objekten als data parameter, aber Sie scheinen übergeben Sie ein array von array von object. Es ist auch möglich, zu den plot mehrere Reihen auf einmal ohne das Durchlaufen werden.
Gut, dass ist das resultierende array-Struktur, die kommt von der Dekodierung des JSON-string, wie auch gezeigt in der flot ajax-Beispiel, es sei denn, ich bin fehlt etwas. Auch bin ich der Iteration für jetzt hinzufügen, die Farben. Das wird anders gehandhabt werden später auf.

InformationsquelleAutor Dutchie432 | 2012-05-21

War ich in der Lage das Problem zu beheben, ändern Sie den code, eine vereinfachte:

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            $.plot($("#placeholder"), datasets);
        }
    });   
}

InformationsquelleAutor Dutchie432

Statt der übergabe der data Argumente eins nach dem anderen (die, übrigens, überschreibt die Vorherige Handlung), Sie zeichnen können alles auf einmal. Ich verstehe jetzt, dass Sie Durchlaufen, um die entsprechende Farbe, aber die Art und Weise Sie tun es ist jetzt nicht anders aus als der Standard-Weg flot macht.

Wenn Sie möchten, dass andere Farben, so können Sie diese in der Reihe Daten wie:

{
    "label":"activeUsers",
    "data": xxx,
    "color": 1 //Or e.g. "rgb(255,0,0)"
}

Bei der Verwendung von Ganzzahlen verwenden Sie die Farben erzeugt, indem flot. Hier ist ein kleine Geige der eigentliche Plotten Prozess. Dort verwende ich minTickSize: [1, "day"] um festzulegen, dass jeder tick darstellen sollte, einen Tag.

Diese sollten Sie in der Lage sein zu verwenden, zusammen mit ajax:

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            var options = {
                lines: { show: true },
                points: { show: true },
                xaxis: {
                    mode: 'time', 
                    timeformat: "%y/%m/%d",
                    minTickSize: [1, "day"]
                }
            }
            var placeholder = $("#placeholder");
            $.plot(placeholder, datasets, options);
        }   
    });   
}

InformationsquelleAutor Maehler

Die Lösung, die funktioniert gut für mich ist:

serverAjaxPage.php

<?php
echo '[
       {
           "data": [
               [
                   1220565600000,
                   106.23
               ],
               [
                   1220824800000,
                   106.34
               ]
           ],
           "label": "Oil price ($)"
       },
       {
           "data": [
               [
                   1167606000000,
                   0.758
               ],
               [
                   1167692400000,
                   0.758
               ],
               [
                   1167778800000,
                   0.7547
               ]
           ],
           "label": "USD/EUR exchange rate",
           "yaxis": 2
       }
   ]';

(Daten aus Mehrere Achsen Beispiel)

clientPage.html

$(function () {

    //Fetch data with AJAX
    function fetchData() {

        //Normally we call the same URL - a script connected to a
        //database - but in this case we only have static example
        //files, so we need to modify the URL.

        $.ajax({
            url: "/serverAjaxPage.php",
            type: "GET",
            dataType: "json",
            success: onDataReceived
        });


        function onDataReceived(series) {

            //Load all the data in one pass; if we only got partial
            //data we could merge it with what we already have.
            data = series;

            var options = {
                series: {
                    lines: {
                        show: true,
                    },
                    points: {
                        show: false
                    }
                },
                xaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    mode: "time",
                    timeformat: "%d-%m-%Y"
                },
                yaxes: [{
                    position: "left"
                }],
                legend: {
                    position: "sw"
                }
            };



            $.plot("#placeholder", data, options);
        }
    }
    //If you want to load data every 10 seconds
    var interval = 10000;

    //Set interval operation
    var tid = setInterval(fetchData, interval);

});

InformationsquelleAutor Davide Pastore

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.