skip to Main Content

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.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search