AnyChart / AnyChart-AngularJS-v1.x

AngularJS v1.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts with AngularJS
https://www.anychart.com
Apache License 2.0
15 stars 4 forks source link

How is possible refresh the data in a anystock chart #1

Open masalinas opened 6 years ago

masalinas commented 6 years ago

Actually I have:

inde.html

<div anystock
                             ac-title="Simple Candlestick"
                             ac-instance="stock"
                             style="width: 100%; height: 500px">
                        </div>

index.js:

// paint anystock graph
        var table = anychart.data.table();

        table.addData([
            ['2015-12-24', 511.53, 514.98, 505.79, 506.40],
            ['2015-12-25', 512.53, 514.88, 505.69, 507.34],
            ['2015-12-26', 511.83, 514.98, 505.59, 506.23],
            ['2015-12-27', 511.22, 515.30, 505.49, 506.47]
        ]);

        // mapping the data
        var mapping = table.mapAs();

        mapping.addField('open', 1, 'first');
        mapping.addField('high', 2, 'max');
        mapping.addField('low', 3, 'min');
        mapping.addField('close', 4, 'last');
        mapping.addField('value', 4, 'last');

        var chart = anychart.stock();

        // set the series type
        //chart.plot(0).ohlc(mapping).name('ACME Corp.');
        chart.plot(0).candlestick(mapping).name('ACME Corp.');

        $scope.stock = chart;

But how can i refresh the the stock chart already created with new data??

Shestac92 commented 6 years ago

@masalinas it depends on the way how you want to update the data. There are several available options.

  1. For example, If you want to add two new points just put the following lines into your code and the chart will update and redraw automatically table.addData([ ['2015-12-28', 511.53, 514.98, 505.79, 506.40], ['2015-12-29', 512.53, 514.88, 505.69, 507.34] ]);

  2. If you want to update values of existing points you may use the same method 'addData()'. This method adds new points and replace values of existing points with the same key (here particularly the key is the date)

  3. If you want to remove an interval of points from startKey to endKey you may use remove() method like this: table.remove('2015-12-28', '2015-12-29');

  4. If you want to remove all points it's better to remove the whole series, then create new dataTable and create new series. For example, to remove all series in your code use the following line: chart.plot(0).removeAllSeries(); Also, you may learn more about removeAllSeries(), removeSeriesAt() and removeSeries() methods here - https://api.anychart.com/8.1.0/anychart.core.stock.Plot#removeAllSeries