In Zeitreihen ZingChart, während appendseriesvalues ​​in Echtzeit verwenden, verursacht xValue Problem

Question

Ich versuche, ein Echtzeit-Zeitreihendiagramm mit ZingChart zu erstellen. Aber ich will es akkumulativ, in dem alle Punkte akkumulieren, wenn Daten anhängen. Also verwende ich "appendseriesvalues" in jeder Ajax-Abfrage, um Daten anzuhängen und Daten als JSON-Objekt als (Schlüssel, Wert) -Paar zu übergeben.

Mein Code ist wie folgt:

 var chartData = { 
     "show-progress":false, 
     "gui":{ 
      "behaviors":[ 
       { 
        "id":"ZoomIn", 
        "enabled":"all" 
       }, 
       { 
        "id":"ZoomOut", 
        "enabled":"all" 
       }, 
       { 
        "id":"ShowAll", 
        "enabled":"all" 
       } 
      ] 
     }, 
    "type":"line", 
    // "utc":true, /* Force UTC time. */ 
    // "timezone": -5, 
    "plotarea": { 
     "adjust-layout":true /* For automatic margin adjustment. */ 
    }, 
    "scale-x":{ 
     "values": [], 
     "label":{ /* Add a scale title with a label object. */ 
     "text":"Above is an example of a time-series scale", 
     }, 
     "min-value":1420070400000, /* Unix timestamp for Jan 1, 2015. */ 
     "step":"second", 
     "transform":{ /* Converts your Unix timestamp to a human readable format. */ 
     "type":"date", /* Set your transform type to "date". */ 
     "all":"%h:%i:%s" /* Specify your date/time format, using tokens. */ 
     }, 
     "line-color":"none", 
     "tick":{ 
      "visible":false 
     }, 
     "zooming":1, 
     "item":{ 
      "font-color":"#000", 
      "visible":true 
     }, 
    // "max-labels":10000, 
     "itemsOverlap": true 
    }, 
    "scale-y":{ 
     "zooming":1, 
     "items-overlap": true 
    }, 

    "series":[ 
     { 
      "values":[] 
     } 
    ], 

}; 

window.onload = function() { 
    zingchart.render({ 
     id: "chartDiv", 
     data: chartData, 
     height: 600, 
     width: "100%" 
    }); 
}; 

setInterval(flashText, 1000); 

function flashText() { 
    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     headers: { 
      Accept: "application/json", 
      "Access-Control-Allow-Origin": "*" 
     }, 
     url: "TestServlet2", 
     success:function(data) {     
      $.each(data, function(key, value) { 
         zingchart.exec('chartDiv', 'appendseriesvalues', { 
          values: [[key,value]], 
          }) 


      }); 

    }, 
    }); 

    } 

Wenn ich diesen Code zu erstellen verwenden, es nimmt Schlüssel und Wert als 2 Werte in series.I es als (Schlüssel, Wert) dargestellt werden soll. Bitte schlage mir vor, was ich falsch mache. Danke im Voraus!

Answer 1

Volle Offenlegung, ich bin ein Mitglied des ZingChart-Teams.

Wenn Sie es nicht gesehen haben, haben wir einen realtime feed Abschnitt auf unserer Website. Um im Thema zu bleiben, werde ich Ihnen zeigen, wie Sie den API-Aufruf in ZingChart integrieren können.

Meine erste Annahme, die ich machen werde, ist, dass der Schlüssel eine Zeitstempel-Nummer in Millisekunden ist und Wert ein Zahlentyp ist. Ich mache die Annahme, dass Schlüssel ein Zeitstempel ist, weil Sie das Transformationsobjekt definiert haben und einen Min-Wert als einen Zeitstempel festlegen.

Wenn dies nicht beabsichtigt war, bitte angeben, aber ich werde mit dem Beispiel weitermachen. Unter der Annahme, dass Ihre Daten korrekt eingegeben werden, geben Sie nur den Plot-Index an. Gemäß unserer Dokumentation appendseriesvalues müssen Sie einen Plot-Index definieren, wenn Sie nur ein einzelnes Plot aktualisieren. Ich habe den größten Teil Ihrer Konfiguration verwendet, um ein Diagramm zu erstellen, das jedes Mal ein Paar [timestamp, value] mit der API-Methode appendiseriesvalues ​​darstellt.

var chartData = { 
 
    "show-progress":false, 
 
    "gui":{ 
 
    "behaviors":[ 
 
     { 
 
     "id":"ZoomIn", 
 
     "enabled":"all" 
 
     }, 
 
     { 
 
     "id":"ZoomOut", 
 
     "enabled":"all" 
 
     }, 
 
     { 
 
     "id":"ShowAll", 
 
     "enabled":"all" 
 
     } 
 
    ] 
 
    }, 
 
    "type":"line", 
 
    // "utc":true, /* Force UTC time. */ 
 
    // "timezone": -5, 
 
    "plotarea": { 
 
    "adjust-layout":true, /* For automatic margin adjustment. */ 
 
    "margin-right":50 
 
    }, 
 
    "scale-x":{ 
 
    "values": [], 
 
    "label":{ /* Add a scale title with a label object. */ 
 
     "text":"Above is an example of a time-series scale", 
 
    }, 
 
    "min-value":1420070400000, /* Unix timestamp for Jan 1, 2015. */ 
 
    "step":"second", 
 
    "transform":{ /* Converts your Unix timestamp to a human readable format. */ 
 
     "type":"date", /* Set your transform type to "date". */ 
 
     "all":"%h:%i:%s" /* Specify your date/time format, using tokens. */ 
 
    }, 
 
    "line-color":"none", 
 
    "tick":{ 
 
     "visible":false 
 
    }, 
 
    "zooming":1, 
 
    "item":{ 
 
     "font-color":"#000", 
 
     "visible":true 
 
    }, 
 
    // "max-labels":10000, 
 
    "itemsOverlap": true 
 
    }, 
 
    "scale-y":{ 
 
    "zooming":1, 
 
    "items-overlap": true 
 
    }, 
 
    "series":[ 
 
    { 
 
     "values":[] 
 
    } 
 
    ] 
 
}; 
 
window.onload = function() { 
 
    zingchart.render({ 
 
     id: "myChart", 
 
     data: chartData, 
 
     height: 400, 
 
     width: "100%" 
 
    }); 
 
}; 
 

 
// variable for incrementing time 
 
var increment = 0; 
 

 
// Every second add a new datapoint 
 
setInterval(function() { 
 
    var data = []; 
 
    for (var i = 0; i < 1000; i++) { 
 
    data.push(Math.random() * 25 + i); 
 
    } 
 
    
 
    zingchart.exec('myChart', 'appendseriesvalues', {  
 
    plotindex:0, // The index of the plot if only appending the data on a single plot. 
 
    values: [[1420070400000 + increment,data]] 
 
    }); 
 
    
 
    increment += 100; 
 
}, 1000);

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>