[Report/Help] Possible bug in Chart.

[Dana]

I tried to display the x-Axis of the chart, receive this error instead. I'm hoping that it can be displayed like DD-MM-YYYY. I hope you can resolve this issue.

ERROR

Error: Uncaught (in promise): TypeError: Cannot read property 'calculateRangeAndInterval' of undefined.

Attachment: DateTimeChartError_7fc79f9d.zip

[Bhuvanesh Valarman]

Hi Dana, 

  

     We have analyzed your query. From the provided sample, we found that you are using datetime axis in chart but it’s service(DateTimeService) is not injected in your sample. Chart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the AppModule. 

  

 

For more information about the datetime axis, please follow the below UG link : Documentation 

1. Import the DateTimeService from ‘ej2-ng-charts’ package and Inject into NgModule providers, refer below code snippet for that.

  

Code snippet:  

[src/app/app.module.ts]  

 

2. set labelFormat as ‘yMd’ in primaryXAxis to achieve DD-MM-YYYY format on x-axis labels. Refer the below code snippet for that.

Code snippet:  

[src/app/home/home.component.ts]  

 

Screenshot:  

 

Please find the modified sample from below link : Sample   

Steps to run the Sample   

   

Step  1 : Move to quickstart folder.   

Step 2 :  Run npm install   

Step 3 :  Run npm install @syncfusion/ej2-ng-charts --save   

Step 4 :  Run npm start   

   

Kindly revert us, if you have any concern.  

Thank you, 

Bhuvanesh V. 

 

 

[Dana]

How can I get a format like this: '09 Oct 10:20 AM', I tried changing the labelFormat according to the documents and did so unsuccessfully. I apologize for asking a second question, thank you for helping.

Attachment: DateTimeError_d8448dd7.zip

[Bhuvanesh Valarman]

Hi Dana, 

Sorry for the inconvenience. 

   We have analyzed your query. Currently we don’t have support for custom label format in DateTime axis in preview release. Custom label format support for DateTime axis will be included in our Essential Studio 2017 Volume 4 main release, which is expected to be out at beginning of November 2017. 

As a workaround using axisLabelRender event, you can achieve your required label format in DateTime axis. 

Please refer the below code snippet for the workaround. 

Code snippet: 

1. Set labelFormat value as ‘medium’ in primaryXAxis [src/app/charts/charts.component.ts].

 

 

2. Import the ‘IAxisLabelRenderEventArgs’ from ‘@syncfusion/ej2-ng-charts’ package and Add the following code snippet to [src/app/charts/charts.component.ts].

  public axislabelrender(args: IAxisLabelRenderEventArgs): void { 

    if (args.axis.valueType !== 'DateTime') { 

      return; 

    } 

    let label: string[] = [args.text]; 

    label = label[0].split(','); 

    label.splice(1, 1); 

    let time: string[] = label[1].split(':'); 

    label = label[0].split(' '); 

    time[2] = time[2].split(' ').splice(1, 1).toString(); 

    args.text = label[1] + ' ' + label[0] + ' ' + time[0] + ':' + time[1] + ' ' + time[2]; 

  } 

3. Bind the axisLabelRender event to chart in [‘src/app/charts/charts.component.html’] file like below.

 

Screenshot:  

 

Please find the sample from following link : DateTimeLabelformat  

Steps to run the Sample   

   

Step  1 : Move to quickstart folder.   

Step 2 :  Run npm install   

Step 3 :  Run npm install @syncfusion/ej2-ng-charts --save   

Step 4 :  Run npm start   

   

Kindly revert us, if you have any concern.  

Thank you, 

Bhuvanesh V. 

 

[Dana]

Thank you for the assistance.

One question, is there a way to get the chart's width to the maximum upon starting the browser? I tried, but it gave me errors for doing so.

Attachment: ChartExtensionError_df6c8e05.zip

[Bhuvanesh Valarman]

Hi Dana, 

Thanks for the update. 

We have analyzed your query. From the provided sample, we found that you have set chart’s parent div  width as ‘800px’ . By default chart will render with its parent size. If chart parent element width is not set, then the chart will render with browser width. 

Please refer the below code snippet for that. 

Code snippet [‘src/app/charts/charts.component.css’]: 

We have changed the parent div element width as ‘100%’ to achieve your requirement. 

 

Screenshot for the sample: 

 

Please find the modified sample from below link. 

Sample link: ChartMaxWidth.zip  

For more information on chart size, please refer the below link. 

UG link: chart-dimensions 

Steps to run the Sample   

Step 1 :  Move to quickstart folder.   

Step 2 :  Run npm install   

Step 3 :  Run npm install @syncfusion/ej2-ng-charts --save   

Step 4 :  Run npm start   

   

Kindly revert us, if you have any concern.  

Thank you, 

Bhuvanesh V. 

[Dana]

I tried using the solution you proprose (code changes), but still receive the same error. I changed the codes to emphasize the problem. 

TypeError: Cannot read property 'calculateRangeAndInterval' of undefined

That error will pop up if I use this.chartv0.refresh() in ngOnInit. Is there a solution to allow the chart to be shown widescreen without the error? 

Thank you for answering.

Attachment: app_TypeError_93095117.zip

[Bhuvanesh Valarman]

Hi Dana, 

Sorry for the inconvenience. 

We have analyzed your query. From the provided sample we found that you have refreshed before chart rendered, so that console issue occurred. 

We have modified your sample as per your requirement, please refer the below code snippet  for that. 

Code Snippet:  

1. Create ‘browserwidth’  instance and assign the browser window width value to that in [‘src/app/charts/charts.component.ts’] file.

 

 

 

2. Bind the ‘browserwidth’ instance to the chart width like below code snippet in ‘src/app/charts/charts.component.html’ file.

 

3. To solve the console issue remove the chart refresh in ngOnInit.

Screenshot:  

 

Please find the modified sample from below link. 

Sample link: ChartBrowserWidth.zip 

 

Steps to run the Sample   

   

Step  1 : Move to quickstart folder.   

Step 2 :  Run npm install   

Step 3 :  Run npm install @syncfusion/ej2-ng-charts --save   

Step 4 :  Run npm start   

   

Kindly revert us, if you have any concern.  

 

Thank you, 

Bhuvanesh V. 

[Dana]

It works. Thank you for the assistance.

[Bhuvanesh Valarman]

Hi Dana,  

Thanks for the update. Kindly revert us, if you need any further assistance.  

  

Thanks,  

Bhuvanesh. 

[I K]

In my case, I replaced ChartModule with ChartAllModule in appModule.ts to work.

[Baby Palanidurai]

Hi Dena, 

Thanks for the update. Kindly revert us, if you need any further assistance. 

Thanks, 

Baby.