amcharts / amcharts3-angular2

Official Angular 2 plugin for amCharts V3
99 stars 35 forks source link

Stock chart update dataPorvider in dataSets not working #26

Open codegastudio opened 7 years ago

codegastudio commented 7 years ago

Hello,

I use your library to display many chart. Update data in serial chart work like you have described by updating chart config and inject new config in graph. Unfortunately, this same process not working when i want change dataProvider in dataSets

  generateChartData():Array<any> {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate( firstDate.getDate() - 500 );
    firstDate.setHours( 0, 0, 0, 0 );

    for ( var i = 0; i < 500; i++ ) {
      var newDate = new Date( firstDate );
      newDate.setDate( newDate.getDate() + i );

      var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
      var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;

      chartData.push( {
        "date": newDate,
        "value": a1,
        "volume": b1
      } );

    }
    return chartData;
  }
@ViewChild('realtimeGraph') realtimeGraph;

// update called each second
update() { 
  let spotAmChart = new StockAmchart(this.realtimeGraph.amchart.config);
  spotAmChart.config.dataSets[0].dataProvider = this.generateChartData();
  this._ngZone.run(() => {
     this.realtimeGraph.amchart = spotAmChart;
  });
}
fpmk commented 7 years ago

I'm doing i this way. First of all, I need to create AmChart in ngAfterViewInit

public ngAfterViewInit(): void {
        this.chart = this.AmCharts.makeChart('chartReturnDrawdown', this.options);
}

Then wherever you need to call this.AmCharts.updateChart, AmCharts is a injected service in constructor

constructor (private AmCharts: AmChartsService) {}

...
this.AmCharts.updateChart(this.chart, () => {
    this.chart.dataSets[ 0 ].dataProvider = [your data here];
})
...

Hope this helps