Ngfor in element 'e-series-collection', data dynamic

[Tech Shop]

Hi,

I'm having trouble adapting the syncfusion graphs to my objects with data.

In the examples, like the 'Stacked Column', there is: data, data1, data2, data3.

But in my use case, this number of objects/arrays can be variable/dynamic. So my 'API' returns an 'Array' (1 array with N arrays inside).

I tried to apply *ngFor on the 'e-series-collection' property, but without success.

Has anyone gone through this or could help me? Follow the example on Stackblitz

https://stackblitz.com/edit/angular-cek3ew?file=app.component.html

I need to adapt the object I created 'dataTotal' and no longer use the 'data1, data2,...'

thanks in advance

[Durga Gopalakrishnan]

Hi Tech, 

Greetings from Syncfusion. 

We have prepared sample using ngFor for series collection. Please check with the below sample and screenshot. 

<ejs-chart> 

      <e-series-collection> 

                <e-series *ngFor="let row of dataTotal" [dataSource]='row.data' type='StackingColumn' xName='x' yName='y' [name]='row.seriesName'> </e-series> 

     </e-series-collection> 

</ejs-chart> 

 

Sample : https://stackblitz.com/edit/angular-cek3ew-gabpvg 

Kindly revert us if you have any concerns. 

Regards, 

Durga G. 

[Tech Shop]

Hello Durga G!

Got it, I was doing the ngFor through the 'e-series-collection'.

Thanks for the help and success!!!

[Durga Gopalakrishnan]

Hi Tech,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Durga G

[Mihail Mihaylov]

Hi,

I have the example above working in my app. However, I need to change the value of the dataTotal array dynamically and thus refresh the graphic with new series.

When I try to change the array i recieve an rerror:

core.mjs:6485 ERROR RangeError: Maximum call stack size exceeded

at extend (ej2-base.es2015.js:180:1)

at ej2-base.es2015.js:214:35

at Array.forEach ()

at extend (ej2-base.es2015.js:193:27)

at ej2-base.es2015.js:208:39

at Array.forEach ()

Thank you

at extend (ej2-base.es2015.js:193:27)

at ej2-base.es2015.js:214:35

at Array.forEach ()

at extend (ej2-base.es2015.js:193:27)

Could please help me as I need to have the series in my app changed dynamically by the user.

[Durga Gopalakrishnan]

Hi Mihali,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our upcoming Volume 1 SP release which is expected to be rolled out at mid of May 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link :  https://www.syncfusion.com/feedback/34175/chart-with-ngfor-data-binding-not-working

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Hi Mihali,

Sorry for the inconvenience. We are working on the reported issue with high priority. We will include this fix in our upcoming weekly patch release which is scheduled to be rolled out on 31^st May 2022. We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Hi Mihali,

We deeply regret for the inconvenience caused. We will include the fix in our upcoming weekly patch release. We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

[Stuart Zahn]

Is this still an issue? This is a high priority bug for us. We are using @syncfusion/ej2-angular-charts version 20.1.57.

[Durga Gopalakrishnan]

Hi Stuart,

We are glad to announce that our Essential Studio 2022 Volume 2 release v20.2.0.36 is rolled out; we have added the fix for reported issue and is available for download under the following link. 

Essential Studio 2022 Volume 2 Main Release v20.2.0.36 is available for download | Announcements Forums | Syncfusion 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,          

Durga Gopalakrishnan.

[olga.botezatu]

To dynamically generate  e-series elements in your Syncfusion chart based on the variable number of arrays in your dataTotal array, you can use Angular's ngFor directive along with ng-container. Here's how you can adapt your code for apollo enrichment:

First, modify your dataTotal structure to hold an array of arrays:

dataTotal: any[] = [

  [{ x: 'Jan', y: 30 }, { x: 'Feb', y: 40 }, { x: 'Mar', y: 50 }],

  [{ x: 'Jan', y: 20 }, { x: 'Feb', y: 10 }, { x: 'Mar', y: 30 }],

  [{ x: 'Jan', y: 35 }, { x: 'Feb', y: 25 }, { x: 'Mar', y: 45 }]

];

Then, in your HTML template, use ng-container with ngFor to dynamically generate the e-series elements:

<ejs-chart id="container" [primaryXAxis]='primaryXAxis'>

  <e-series-collection>

    <ng-container *ngFor="let data of dataTotal; let i = index">

      <e-series [dataSource]="data" xName='x' yName='y' type='Column' name='Series {{i}}'>

      </e-series>

    </ng-container>

  </e-series-collection>

</ejs-chart>

[Swetha Babu]

Olga,

Thank you for your update.