CODEWITHSUNDEEP
angularangular2-highcharts
Ram Solanki
Ram Solanki

Reputation: 81

How can refresh or reload data in highchart in angular 5/6

I am using highcharts in angular6. i want to reload data using setinterval . i can not find proper solution.

Chartcomponent.ts

import { Chart, Highcharts } from 'angular-highcharts';

ngOnInit() {
  this.loaded = false;
  this.rowData = [[0, 2], [1, 2], [2, 3], [4, 4], [4, 5]];
  this.loadChart(this.data.data);
}

loadChart(data): any {
  this.highChartsOptions = {
    chart: { type: this.graphType },
    title: { text: '' },
    legend: { enabled: false },
    plotOptions: { series: { dataLabels: { enabled: true } } },
    series: [{ name: 'random series', data: data }]
  };
  this.handleIntervals();
}

handleIntervals(): void {
  setInterval(() => {
      console.log(this.rowData[this.rowData.length - 1]);
      let rowY = this.rowData[this.rowData.length - 1];
      let y = rowY[0];
      this.rowData.push([parseInt(y) + 1, 10]);
      // this.highChartsOptions.series[0].data = this.rowData;
      // this.loadChart( this.rowData);
  }, 5000);
  // const subscribe = source.subscribe(this.loadChart());
}

Upvotes: 1

Views: 10156

Answers (3)

Ram Solanki
Ram Solanki

Reputation: 81

Finnaly i get solve this. I think it is not proper solution but it's working fine. https://stackblitz.com/edit/highchart-angular-reload-data

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27471

If you want to add new Series use 

 this.chart.addSerie({})

If you want to update data

 this.chart.series[0].setData(rowData);

Check documentation:https://www.npmjs.com/package/angular-highcharts Example:https://stackblitz.com/edit/angular-9nkrgd

Upvotes: 0

Shantanu
Shantanu

Reputation: 11

You need to to call the service from where you are getting this.data.data in setInterval.

Angular-highcharts automatically refreshed when the data present in this.highChartsOptions.series get updated.

Upvotes: 0

Related Questions