ajaxを使用してflotで複数のデータセットをプロットする - データが正しく表示されない

Question

私はflotを使ってデータをプロットしようとしています。私はこれを単一のデータセットで処理していましたが、複数のデータセットを使用するようにコードを修正しようとしたとき、エラーに遭遇しました。私はそれが私が作った変更だと確信していますが、私の人生のために私はそれを追跡することはできません。

Y軸は、-1.0、-0.5、0、0.5、および1.0の値を示しますが、Imの値はほとんどなく、X軸データもありません。グラフは空白になります。

私はStackOverflowの評判グラフに似た何かを達成しようとしていますが、これは異なる数値を表します。 dataペアの最初の値はタイムスタンプ（正確に計算されていると思います）を意味し、dataペアの2番目の値はプロットする値です。

私はではないことを確信しました。では私の価値観が引用されていますが、これは私が最もよく見た問題です。

問題を指摘するためのフィードバックや援助があれば幸いです。

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

は、私はより簡略化にコードを変更することで問題を解決することができた

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

（この投稿のために追加の書式設定）放火犯からJSONを返しました：

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引数を1つずつ渡す代わりに（これは以前のプロットを上書きします）、すべてのものをプロットすることができますgを一度に。私は今、あなたが適切な色を得るために反復することを理解していますが、あなたが今やっているやり方は、flotが行うデフォルトの方法と変わりません。あなたが他の色にしたい場合は

、あなたはとして系列データでそれらを指定することができます。

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

整数を使用して、あなたがFLOTによって生成された色を使用します。ここには実際のプロットプロセスのsmall fiddleがあります。ここで私はminTickSize: [1, "day"]を使って、それぞれの目盛が1日を表すように指定します。

あなたのように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); 
     } 
    }); 
} 

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

});