0

I am trying to show count report in stacked vertical bar chart using angular chart (ngx-charts-bar-vertical-stacked), but I'm getting the following error:

Error

dynamically build the data so for example //app.ts i declare

array chartDataNGX:any[];

then in constructor call getChatrtData() then in getchartdata i go something like 

this.chartDataNGX.push( 
  {"name": "TEST2","series": [
      {"name": "Target","value": 40632},
      {"name": "Actual","value": 36953}, 
      {"name": "Projected","value": 31476}
  ]}, 
  {"name": "TEST3","series": [
      {"name": "Target","value": 40632}, 
      {"name": "Actual","value": 36953}, 
      {"name": "Projected","value": 31476}
      ]
  });

it fails with 'Cannot read property 'length' of undefined' so what am i doing wrong?

Please help.

Iancovici
  • 5,574
  • 7
  • 39
  • 57
chaturvedi omp
  • 3
  • 3
  • dynamically build the data so for example //app.ts i declare array chartDataNGX:any[]; then in constructor call getChatrtData() then in getchartdata i go something like this.chartDataNGX.push( {"name": "TEST2","series": [{"name": "Target","value": 40632},{"name": "Actual","value": 36953}, {"name": "Projected","value": 31476}]}, {"name": "TEST3","series": [{"name": "Target","value": 40632},{"name": "Actual","value": 36953}, {"name": "Projected","value": 31476}]} ); it fails with 'Cannot read property 'length' of undefined' so what am i doing wrong? – chaturvedi omp Jan 09 '18 at 14:37

1 Answers1

0

Try using ngIf to avoid making graph if result is empty

  <div *ngIf="chartDataNGX.length">
    <ngx-charts-bar-vertical-stacked
      [view]="view"
      [scheme]="colorScheme"
      [results]="chartDataNGX"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      (select)="onSelect($event)">
    </ngx-charts-bar-vertical-stacked>
   </div>

Also typically we initialize variables in constructor, and leave methods to be done in ngOnInit life cycle hook

Iancovici
  • 5,574
  • 7
  • 39
  • 57
  • Tried with your suggestion but issue not resolved .getting below error :ERROR TypeError: Cannot read property 'length' of undefined at Object.eval [as updateDirectives] (ng:///ReportsModule/ReportsComponent.ngfactory.js:117) at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:146579) at checkAndUpdateView (vendor.bundle.js:145759) at callViewAction (vendor.bundle.js:146124) at execComponentViewsAction (vendor.bundle.js:146056) at checkAndUpdateView (vendor.bundle.js:145765) – chaturvedi omp Jan 10 '18 at 04:22
  • Issue has been resolved by adding *ngIf="showcharts" ..Thanks – chaturvedi omp Jan 10 '18 at 05:01