typescript - Updating Apexchart series on daily bases in angular

Question

I am using apexchart but cannot know how to use updateseries I have tried directly sending the values

HTML

<apx-chart [chart]="{
                          type: 'line',
                          height: 20,
                          background: '#696868',
                          sparkline: {
                              enabled: true
                          }
                      }" [colors]="['#f2f2f2']" [markers]="{
                          size: 0
                      }" [series]="chartOptions.series" [stroke]="{
                              color: '#4191ff',
                              width: 1
                      }" [xaxis]="{
                          crosshairs: {
                              width: 0
                          }
                      }" [yaxis]="{
                          min: 0
                      }" ></apx-chart>

Typescript

    export type ChartOptions = {
      series: ApexAxisChartSeries;
      chart: ApexChart;
    };

 

    @ViewChild("chart", { static: false }) chart: ChartComponent;
      public chartOptions: Partial<ChartOptions>;
      constructor(private service: SharedService) {
        this.chartOptions = {
          series: [
            {
              name: "kg/hr",
              data: ([10, 41, 35, 51, 49, 62, 69, 91, 148])
            }
          ]
        }
      }
ngOnInit() {

   
    this.ApexChart_Function();
    this.id = setInterval(() => {
      this.ApexChart_Function(); 
    }, 5000);
    
}
      ApexChart_Function() {
    const ARRAY_LENGTH = 10;
    let randomArray = [];
    for(let i =0; i<ARRAY_LENGTH; i++) {randomArray.push((Math.random() * 100).toFixed())}
    randomArray = JSON.parse("[" + randomArray + "]")
    console.log(randomArray);
    this.chartOptions.series = [{
      name: 'series_1',
      data: randomArray
    }];
    console.log(randomArray);    
  }
ngOnDestroy(): void {
    if(this.id){
      clearInterval(this.id);
    }
}

I have created a interval in the ngOnInit and calling the function i created to update the series and it work for me. And also to clear or destroy the interval after it has been used. Thanks hope it will help

question from:https://stackoverflow.com/questions/65845147/updating-apexchart-series-on-daily-bases-in-angular

Answer 1

Waitting for answers