使用ajax繪製flot多個數據集 - 數據沒有正確顯示

Question

我使用flot試圖繪製一些數據。我有一個單一的數據集的工作，當我試圖修改代碼使用多個數據集，我遇到了一個錯誤，我很難跟蹤並停止工作。我確信這是我做出的改變，但對於我的生活，我無法追蹤它。

Y軸顯示-1.0，-0.5,0,0.5和1.0--幾乎不需要Im值，也沒有X軸數據。該圖表顯示爲空白。

我試圖完成類似於StackOverflow上的信譽圖的東西，但是這將代表不同的數值。 data對的第一個值應該是一個時間戳（我認爲我已經正確計算），data對的第二個值是要繪製的值。

我確定我做不是有我的價值在引號，我看到的是最常見的問題之一。

任何反饋或協助指出這個問題將不勝感激。

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

控制檯輸出

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

返回從螢火JSON（格式化添加此張貼）

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

我能夠通過代碼更改爲更簡單的解決這個問題：

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

而不是逐個傳遞data參數（順便說一句，它會覆蓋前面的圖），您可以繪製每一個細節克一次。我現在明白你可以迭代以獲得合適的顏色，但你現在正在做的方式與flot默認的方式沒有什麼不同。

如果你想要其他顏色，可以在一系列的數據它們指定爲：

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

當使用整數時您使用海軍報所產生的顏色。這是實際繪圖過程的small fiddle。在那裏，我使用minTickSize: [1, "day"]來指定每個標記應代表一天。

這個你應該能夠與阿賈克斯一起使用爲：

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

爲我工作得很好解決的辦法是：

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

（數據來自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); 

});