ZingChart - How to keep zoom level when appending values in Real Time feed

Question

I have a real time feed taking data form an Iot platform, every time a value is received and appended to the plot, in this case every 15 seconds the plot resets to its initial zoom level when it updates.

Is there a way to either stop the graph from zooming out or to record the zoom level so that it can be reset after the update?

Set up for the real time feed:

      "refresh": {
        "type": "feed",
        "transport": "js",
        "url": "feed()",
        "interval": 15000
      },

Accquiring the data and appending to the plot:

  // Get new Data
window.feed = function(callback) {      
    // Issue a get request
   $.getJSON('https://www.thingspeak.com/channels//feed.json?callback=?&offset=0&results=1', function(){})

    // Upon a successful get request...
   .done(function(data){

    var p = []
        p[0] = p[0] = getChartDate(data.feeds[0].created_at);
        p[1] = parseFloat(data.feeds[0].field1);
        var newData2 = [p];

    // Append values to Graph
    $("#myChart").appendSeriesValues({
     "values": [newData2]
     });
  })
}

Answer 1

You will need to adjust the zoom object by adding the following

zoom:{
    preserveZoom:true
}

preserveZoom will maintain the zoomLevel on your graph when it refreshes. Alternatively, you can adjust when the feed refreshes. Adding the attribute resetTimeout:'Number' will determine after how many values the feed will reset. The default is fairly low (80-100).

refresh:{
    ....
    resetTimeout:1000, // after 1000 nodes the feed will re-start
}

I'm not quite sure what your JSON looks like, but if you want to preserve the scroll bar you will need several things. You will need zooming and scrolling defined in your JSON

scrollX:{}, // makes the scrollbar appear
scaleX:{
    zooming:true, // allows for zooming
    ...
}

I work on the ZingChart team. Let me know if you need any more help.