clear chart in angular chart

[vigneshsdev]

How to clear a chart which is already loaded?

usage:
<div class="col-12" *ngIf="areaChartData" #stockChart> <google-chart #chart [type]="areaChartData.type" [data]="areaChartData.data" [columns]="areaChartData.columnNames" [options]="areaChartData.options" [width]="stockChart.offsetWidth" [height]="areaChartData.height"> </google-chart> </div>

there is a selection box for company. whenever i change the company the data will load dynamically.

but if there is no data in the company. how can i clear the chart dynamically

data loading code

this.areaChartData = {
      type: 'AreaChart',
      data: chartData,
      columnNames: ["Date", company.companyName],
      options: {
        title: company.companyName + ' Stock Price',
        chartArea:{width:"85%",height:"75%"},
        hAxis: {
          title: 'Date',
          direction: -1,
          slantedText: true,
          slantedTextAngle: 90,
        },
        vAxis: {
          title: 'Stock Price'
        },
      },
      height: 600
    };

however i'm creating a new chart instead of clearing

this.areaChartData = {
                  type: 'AreaChart',
                  data: [
                    [new Date(), 0],
                  ],
                };

is there is another way to clear the chart

Angular version

 "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/cdk": "^11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/material": "^11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "angular-google-charts": "^2.2.1",
    "angularx-social-login": "^3.5.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },

[FERNman]

Hi @vigneshsdev,

if I understand your problem correctly, you want to clear a chart after it has been drawn. This can be done by using @ViewChild to access the GoogleChartsComponent and then use component.chart.clearChart().

Hope this helps!

[vigneshsdev]

Hi @vigneshsdev,

if I understand your problem correctly, you want to clear a chart after it has been drawn. This can be done by using @ViewChild to access the GoogleChartsComponent and then use component.chart.clearChart().

Hope this helps!

Hi @FERNman
the above solution works, I've implemented like below
<google-chart #chart [type]="areaChartData.type" [data]="areaChartData.data" [columns]="areaChartData.columnNames" [options]="areaChartData.options" [width]="stockChart.offsetWidth" [height]="areaChartData.height" (error)="onError($event)"> </google-chart>

and in component.ts

@ViewChild(GoogleChartComponent)
 public readonly chart: GoogleChartComponent;
  
  
// clearing the chart to avoid showing previously loaded chart.
if(this.chart && this.chart.chartWrapper){
  this.chart.chartWrapper.getChart().clearChart();
}

this solution works for me

[xkx9431]

what change should make this api correct?, I have upgrade the package version from ^1.1.0 to ^2.2.0
and this will cause a build error.

    @ViewChild('ganttChart') 
    public ganttEl: GoogleChartComponent;

[kussmaul]

I don't see clearChart() in the angular-google-chart code - it seems to have been added in #70, but maybe refactored away since then.

#304 reports a memory leak. Here is my (kludgy) code to call the underlying clearCharts:

/** Chart component(s). */  @ViewChildren (GoogleChartComponent)  charts    ! : QueryList<GoogleChartComponent>;

  ngOnDestroy() {
    this.charts.forEach((c) => (c.chart as unknown as { clearChart : () => void })?.clearChart());
  }