Trazar múltiples conjuntos de datos con flot usando ajax - Los datos no se muestran correctamente

Question

Estoy usando flot en un intento de intentar trazar algunos datos. Tuve esto trabajando con un solo conjunto de datos, y cuando intenté modificar el código para usar más de un conjunto de datos, me encontré con un error. Me está costando rastrear y dejó de funcionar. Estoy seguro de que es un cambio que hice, pero por mi vida no puedo rastrearlo.

El eje Y muestra -1.0, -0.5, 0, 0.5 y 1.0, apenas los valores que esperaba y no hay datos del eje X. El gráfico aparece en blanco.

Estoy tratando de lograr algo similar al gráfico de reputación en StackOverflow, pero esto representará valores numéricos diferentes. El primer valor del par data está destinado a ser una marca de tiempo (creo que lo he calculado correctamente), y el segundo valor del par data es el valor que se trazará.

Me aseguré de que hago no tengo mis valores entre comillas, que vi que era uno de los problemas más comunes.

Cualquier comentario o ayuda para señalar el problema sería muy apreciado.

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

salida de la consola

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

devolverán como JSON de Firebug (formateo añaden a esta publicación)

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

que fue capaz de resolver el problema cambiando el código para una más simplificada:

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

En lugar de pasar los argumentos data uno por uno (que, por cierto, sobrescribe la trama anterior), puede trazar todo g de una vez Ahora entiendo que repites para obtener el color apropiado, pero la forma en que lo estás haciendo ahora no es diferente de la forma predeterminada en que lo hace flot.

Si usted quiere otros colores, se puede especificar en los datos de series como:

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

Al usar números enteros utiliza los colores generados por Flot. Aquí hay un small fiddle del proceso de trazado real. Ahí utilizo minTickSize: [1, "day"] para especificar que cada tic representa un día.

Esto se debe poder utilizar junto con el Ajax como:

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 solución que funciona bien para mí es:

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

(datos desde 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); 

});