Plotaggio di più dataset con flot utilizzando ajax - Dati non visualizzati correttamente

Question

Sto utilizzando flot nel tentativo di provare a tracciare alcuni dati. Ho avuto questo lavoro con un singolo set di dati, e quando ho tentato di modificare il codice per utilizzare più di un set di dati, mi sono imbattuto in un errore che sto avendo difficoltà a rintracciare e ha smesso di funzionare. Sono sicuro che è un cambiamento che ho fatto, ma per la vita di me non riesco a rintracciarlo.

L'asse Y mostra -1.0, -0.5, 0, 0.5 e 1.0 - difficilmente i valori Mi aspetto e non ci sono dati dell'asse X. Il grafico appare vuoto.

Sto cercando di realizzare qualcosa di simile al grafico della reputazione su StackOverflow, ma questo rappresenterà diversi valori numerici. Il primo valore della coppia data è un timestamp (penso di averlo calcolato correttamente) e il secondo valore della coppia data è il valore da tracciare.

Mi sono assicurato che io faccia non avere i miei valori tra virgolette, che ho visto era uno dei problemi più comuni là fuori.

Qualsiasi feedback o assistenza nel segnalare il problema sarebbe più apprezzato.

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

uscita console

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

restituito JSON da Firebug (formattazione aggiunto per questo annuncio)

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

sono stato in grado di risolvere il problema modificando il codice a un più semplificata:

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

Invece di passare gli argomenti data uno per uno (che, a proposito, sovrascrive il grafico precedente), è possibile tracciare tutti gli argomenti g alla volta. Ora capisco che tu esegua l'iterazione per ottenere il colore appropriato, ma il modo in cui lo stai facendo al momento non è diverso dal modo predefinito in cui lo fa flot.

Se volete altri colori, è possibile specificarli nei dati di serie come:

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

Quando si utilizza interi si utilizzano i colori generati da flot. Ecco uno small fiddle del processo di tracciamento attuale. Lì uso minTickSize: [1, "day"] per specificare che ogni tick dovrebbe rappresentare un giorno.

Questo si dovrebbe essere in grado di utilizzare insieme con AJAX come:

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

La soluzione che funziona bene per me è:

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

(dati da 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); 

});