1

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());
}
user184994
  • 17,791
  • 1
  • 46
  • 52
Ram Solanki
  • 81
  • 1
  • 2
  • 7
  • What issue are you having with the code you've written? – user184994 Aug 18 '18 at 09:44
  • I want to reload chart data on a particular time using interval. In this interval function (handleIntervals), I call the loadChart function with new data but it does not effect on the chart – Ram Solanki Aug 18 '18 at 09:49

3 Answers3

1

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

Ram Solanki
  • 81
  • 1
  • 2
  • 7
  • You are using angular-highchart and not highchart-angular. Both are separate libraries based on the same highchart.js. Please rename your stackblitz project accordingly. I was confused for a while. – Kumar Sidharth Jan 10 '20 at 07:06
0

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.

Shantanu
  • 11
  • 1
  • 3
0

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

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60