In timeseries ZingChart, while using appendseriesvalues in realtime, xValue causing issue

Question

I am trying to create a realtime timeseries graph using ZingChart. But I want it accumulative one in which all points accumulate as data appends. So I am using "appendseriesvalues" in each ajax poll to append data and m passing data as JSON object as (key, value) pair.

My code is as follows:

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


            });

    },
     });

  }

If I create using this code, it takes key and value as 2 values in series.I want to plot it as (key,value). Kindly suggest me what am doing wrong. Thanks in advance!

Answer 1

Full disclosure, I'm a member of the ZingChart team.

If you have not seen it, we do have a realtime feed section on our website. For the sake of staying on topic to your question, I will show you how to incorporate the API call into ZingChart.

My first assumption I'm going to make is that the key is a timestamp Number in milliseconds and value is a Number type. I'm making the assumption that key is a timestamp because you have defined the transform object and set a min value as a timestamp.

"min-value":1420070400000, /* Unix timestamp for Jan 1, 2015. */

If this was not intended, please specify, but I will move forward with the example. Under the assumption that your data being input is correct, the only thing you haven't done is specify the plot index. According to our appendseriesvalues documentation, you must define a plotindex if only updating a single plot. I have used most of your config to create a chart that plots a [timestamp,value] pair every second using the API method appendseriesvalues.

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>
 <head>
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>