CODEWITHSUNDEEP
angularchartsgoogle-visualization
Harika
Harika

Reputation: 121

Google Charts - No data available - Unable to remove old graph and display a blank chart?

I'm working on google charts in my angular 6 application npm-google-charts link

Now,When I am drawing the graph based on the data from server,If I have data the graph is drawn properly but If I don't have data then I'm setting my datatable property to null but still the old graph is not erasing .

Here is my code:

In My HTML:

 <google-chart [data]="columnChart" (chartReady)="ready($event)"  (chartError)='error($event)'></google-chart>

In my TS:

 //chart initialization and properties
columnChart: GoogleChartInterface = {
chartType: 'ColumnChart',
// dataTable: this.data,
options: {
  height: 600,
  legend: 'none',
  hAxis: {
    direction: -1,
    slantedText: true,
    slantedTextAngle: 90,
    textStyle: {
      fontSize: 11
    }
  },
   vAxis: { gridlines: { count: 20 } },
}
//Method when data is changing
changeData() {
console.log(this.data);
if(this.data.length <= 1)
{
  this.data=[];
  this.columnChart.dataTable = this.data;
  this.columnChart.component.draw();
  this.toastr.error("Unable to find food order details in selected 
month");
}
else{
  this.columnChart.dataTable = this.data;
  this.columnChart.component.draw();
}

Here,If the data is null I'm setting the datatable poperty to null but still the graph is showing.How to draw an empty chart if data is null

Can anyone please help me with this, thank you.

Upvotes: 0

Views: 882

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

try using the clearChart method... 

if(this.data.length <= 1)
{
  this.columnChart.component.getChart().clearChart();
  this.toastr.error("Unable to find food order details in selected month");
}
else{
  this.columnChart.dataTable = this.dataToBeBinded;
  this.columnChart.component.draw();
}

Upvotes: 1

Related Questions