Chart Component BECOMES undefined

[Marin]

I browsed through few threads before posting, but non seemed to have the same problem as me.

My application looks like in the attached file, but basically a RangeNavigator and a bar Chart.
I hold them in 2 different components in my project (I believe that the error is connected to this), they are inside the same model, but just 2 different components.

ChartComponent
.html looks like this:

<ejs-chart #sopChart id='chart' style='display:block;' [chartArea]='chartArea' align='center' [primaryXAxis]='primaryXAxis'
           [primaryYAxis]='primaryYAxis' [title]='title'>
  <e-series-collection>
    <e-series type='Column' xName='abbrevDate' yName='value' name='Quantity' width=2 [marker]='marker'> </e-series>
  </e-series-collection>
</ejs-chart>

 in .ts I handle it like this

  @ViewChild('sopChart') _chart: ChartComponent;

  ngOnInit() {
    this.loadData(true);
  }


  filterData(args: IChangedEventArgs){
    if(this.notFirstRun){
        this.dataSource = this.dataSource.filter((data: { [key: string]: Object }): Boolean => {
        return (data.date >= new Date(+args.start) && data.date <= new Date(+args.end));
      });
      this.loadData(false);
    }
    this.notFirstRun=true;
  }

  loadData(load: boolean) {
    if(load){
      console.log('LOAD DATA');
      console.log(this._chart);
      this.reportingService.getMainSalesReport().subscribe(
          data => {
            this.dataSource = data;
            this._chart.series[0].dataSource = this.dataSource;
            this._chart.refresh();
          });
    } else{
      console.log('RELOAD DATA');
      console.log(this._chart);
      this._chart.series[0].dataSource = this.dataSource;
      this._chart.refresh();
    }
  }

So in short on init I call LOAD data part of the loadData() method which works like a charm and it consoles a chart object as expected.

Problem is when I onChange of the RangeNavigator I call the filterData() it says "cannot read property 'series' of undefined" and this is how I do it in RangeComponent:

ngOnInit() {
  this.sopComp = new ChartComponent();
}

public changed(args: IChangedEventArgs): void {
  this.sopComp.filterData(args);
}

What I believe might be an issue, but have no idea how to fix is that I create a new object of a ChartComponent class and that class for some reason doesn't have a scope on that chart Id which I am trying to change. 
I tried to making ChartComponent into Injectable() in order to avoid object creation, but with no success.

If anyone could provide me with some kind of input, approach or anything in that nature that would be greatly appreciated.
Cheers!

[Dharanidharan Dharmasivam]

Hi Marin, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We have found the solution for your scenario with using local data source.  Please find this. 

 

Initialization of dataSource:  

 

You have bind the dataSource for chart in ngOnInit() by calling loadData().  In ngOnInit() initialization chart data will not be available. So, you can use the any one of the following ways to bind dataSource for chart. 

 

1.      Call loadData() in ngAfterViewInit() 

 

 

Class BarChartComponent() implements AfterViewInit{ 

       //…. 

       ngAfterViewInit() { 

             this.loadData(true); 

       } 

 

} 

 

 

2.      Bind xName and yName in ngViewInit() 

 

 

Class BarChartComponent() implements AfterViewInit{ 

       //…. 

       ngOnInit() { 

             this.xName = ‘abbrevDate’ 

             this.yName = ‘value’ 

             this.loadData(true); 

       } 

 

} 

 

 

Component Interaction: 

 

And as you said, the reported issue occurs due to different components. For Interacting BarChartComponent with RangeComponent, we suggest you use the following method. 

 

 

<app-bar-chart #barChart></app-bar-chart>   //selector for bar chart component 

<app-range [chart]='barChart'></app-range>  //selector for rangeNavigator component 

 

 

In RangeComponent: 

 

 

export class RangeComponent { 

  constructor() { 

  } 

  @Input() 

  chart: BarChartComponent; 

  chartData = data; 

  changed = (args: IChangedEventArgs) => { 

    this.chart.filterData(args); 

  } 

} 

 

 

You can pass the BarChartComponent to RangeComponent by using Input(). Please refer the angular documentation link for reference of component interaction. By using Input method, you can use members of BarChartComponent in RangeComponent. 

 

We have attached sample for your reference which can be found below. 

http://www.syncfusion.com/downloads/support/forum/142406/ze/chart-rangeNavigator_Interaction1544946577  

 

Regards, 

Dharani.