We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart Component BECOMES undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

142406 Jan 31,2019 11:34 PM UTC Feb 4,2019 05:55 AM UTC Angular - EJ 2 1
loading
Tags: Chart
Marin
Asked On January 31, 2019 11:34 PM UTC

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 [Syncfusion]
Replied On February 4, 2019 05:55 AM UTC

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. 
 
Regards, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;