Wykreślanie wielu zestawów danych za pomocą flot za pomocą ajax - Dane nie wyświetlają się poprawnie

Question

Używam flot w próbie wypróbowania niektórych danych. Miałem to działa z jednym zestawem danych, a gdy próbowałem zmodyfikować kod, aby użyć więcej niż jednego zestawu danych, natknąłem się na błąd, który mam trudności ze śledzeniem i przestał działać. Jestem pewna, że ​​to zmiana, którą zrobiłem, ale nie mogę tego wytropić w życiu.

Oś Y pokazuje -1,0, -0,5, 0, 0,5 i 1,0 - prawie nie oczekuje wartości i nie ma danych osi X. Wykres wydaje się pusty.

Próbuję wykonać coś podobnego do wykresu reputacji na StackOverflow, ale będzie to reprezentować różne wartości liczbowe. Pierwsza wartość pary data ma być znacznikiem czasowym (myślę, że mam ją poprawnie obliczoną), a druga wartość z pary data jest wartością do wykreślenia.

Upewniłem się, że wykonuję , a nie moje wartości w cudzysłowach, które widziałem był jednym z najczęstszych problemów tam.

Wszelkie uwagi lub pomoc w wskazaniu problemu będą najbardziej mile widziane.

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)); 
?> 

wyjścia konsoli

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

powrócił json z Firebug (formatowania dodane do tego postu)

[ 
    {"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]]} 
] 

---

Answer 1

udało mi się rozwiązać ten problem przez zmianę kodu do bardziej uproszczony:

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); 
     } 
    }); 
} 

Answer 2

Zamiast podawać argumenty data jeden po drugim (które, nawiasem mówiąc, nadpisuje poprzedni wykres), można wykreślić wszystkie g naraz. Rozumiem teraz, że możesz iterować, aby uzyskać odpowiedni kolor, ale sposób, w jaki robisz to teraz, nie różni się od domyślnego sposobu, w jaki robi to flot.

Jeśli chcesz inne kolory, można określić je w serii danych jak:

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

Podczas korzystania całkowitymi użyć kolorów generowanych przez flot. Oto small fiddle faktycznego procesu kreślenia. Tam używam minTickSize: [1, "day"], aby określić, że każdy znak powinien reprezentować jeden dzień.

ten powinien być w stanie używać razem z ajax jak:

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); 
     } 
    }); 
} 

Answer 3

rozwiązanie, które działa dobrze dla mnie jest:

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 
     } 
    ]'; 

(dane od Multiple Axes example)

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); 

});