Update stock price in anychart without re-plotting whole chart

Question

I am playing with the Anychart stock candlestick chart which is very nice, in order to update the chart I use a setInterval function but it re-plots the entire chart which sucks because if I am zooming or something it resets and starts over obviously. Is there a way I can just update last price from the database every couple seconds without re-plotting the whole chart?

Current setInterval function to load chart:

setInterval(function() {
  $.get('chart_data.php', function(data) {
     $(".main_cont").replaceWith(data);
  });
}, 2000);

My chart_data variable:

$chart_data .= "{'x':'".$open_time."','open': ".$open.",'high': ".$high.",'low': ".$low.",'close': ".$close."},";

chart_data.php file:

anychart.onDocumentReady(function() {

  // create a data table
  var table = anychart.data.table('x');
  // add data
  table.addData([<?php echo $chart_data;?>]);
    
  // add data
  //table.addData([ {'x':'08/09/2020 10:11','open': 11000,'high': 10000,'low': 8000,'close': 8500}]);

  // create a stock chart
  var chart = anychart.stock(true);

  // create a mapping
  var mapping = table.mapAs({
    'date': 'date',
      'open': 'open',
      'high': 'high',
      'low': 'low',
      'close': 'close',
      'fill': 'fill'
  });
      
  var plot = chart.plot(0);
  // add a series using the mapping
  chart.plot(0).candlestick(mapping).name();

  // set container id for the chart
  chart.container('container');
  var series = chart.plot(0).candlestick(mapping);

  chart.scroller().xAxis(false);

  // initiate chart drawing
  chart.draw();
});

I would like to replace the setInterval function with something that just replaces the last price data from the database to move the candle up or down, if a new record is added then draw the new candle. I have the script to update the candle or add a new candle I just cannot find a way to do it without re-drawing the whole chart.

Have you looked at the documentation for [manipulating data](https://docs.anychart.com/Working_with_Data/Data_Manipulation)? You should be able to use JS to fetch new data every two seconds, and use `addData()` to replace the existing data. If that still causes a complete refresh, you'll have to compare the current chart data with the newly fetched data, and use the insert, delete and update methods as described in the docs to alter just the changed data. However, this may still may result in a complete refresh. — kmoser, Aug 09 '20 at 19:43
Yes thank you, I am currently querying the db to either update or insert. Just do not know how to update the chart without re-drawing — Ryan D, Aug 09 '20 at 20:01
I think this is the method I am looking for, the data stream seems to be the right approach but how would I add the DB data to the stream using php or can JS handle that in someway? — Ryan D, Aug 09 '20 at 20:09
You would use AJAX (from JS) to request updated data from a PHP script. The data gets returned to your JS. It's probably easiest to send/receive data in JSON format; see https://api.jquery.com/jQuery.getJSON/ — kmoser, Aug 09 '20 at 20:15
Ok cool thank you I think this is what im looking for, can you post it as an example/ answer and ill accept it — Ryan D, Aug 09 '20 at 20:17

score 5 · Accepted Answer · answered Aug 09 '20 at 20:34

You can use the functions for manipulating data to alter the chart.

You can use JS to fetch new data every two seconds, and use addData() to replace the existing data. If that still causes a complete refresh, you'll have to compare the difference between two arrays to determine the difference between the current data and newly fetched data, and use the insert, delete and update methods as described in the docs to alter just the changed data. However, this may still may result in a complete refresh.

You would use AJAX (from JS) to request updated data from a PHP script. The data gets returned to your JS. It's probably easiest to send/receive data in JSON format via jQuery.getJSON.

Thanks for the explanation and answer! – Ryan D Aug 09 '20 at 20:38 — Ryan D, Aug 09 '20 at 20:38

score 2 · Answer 2 · answered Aug 10 '20 at 03:41

There's no need to recreate the chart or even reapply the whole data. The AnyStock API provides all you need to update a part of the data. The series will be updated automatically. For this purpose, you can use addData() function. It replaces all rows with duplicating keys by the last seen row with that key. It means that new points will be added to the table, points with already existing keys in the table will be overridden. So, all you need is to manage keys and apply points according to your mapping. For details, check the following sample, that simulates exactly what you need - https://playground.anychart.com/Cplq7KMd

Update stock price in anychart without re-plotting whole chart

2 Answers2