Closed vigneshsdev closed 3 years ago
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 @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 theGoogleChartsComponent
and then usecomponent.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
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;
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.
clearCharts
:/** Chart component(s). */ @ViewChildren (GoogleChartComponent) charts ! : QueryList<GoogleChartComponent>;
ngOnDestroy() {
this.charts.forEach((c) => (c.chart as unknown as { clearChart : () => void })?.clearChart());
}
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
however i'm creating a new chart instead of clearing
is there is another way to clear the chart
Angular version