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!

Johansen

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>

Refutative

Tnxs alot @Refutative for reply. I have changed my code accordingly and both xValue and yValue are correctly plotting now. But on x-axis as data accumulates, x-axis labels not showing for all data points instead only first and last updated data point x-axis label showing. Any suggestion?? :-D – Johansen

@PradnyaP I believe this is because you have defined the minValue and step inside your scaleX:{} object. Remove those two lines and let me know if that is your intended functionality. – Refutative

Hi @nardecky, when I comment step, after data accumulation my x-axis labels overlaps on each other which I want it to be auto adjusting. For example if initially two adjacent labels differ by 1 second then after some time the difference should 5 seconds or so. what should I do? – Johansen

Hey I figured out mistake :D. I made "itemsOverlap": false inside scaleX:{} and it is working just the way i want. Tnxs a lot @nardecky! – Johansen