Fusion Charts in *ngFor Issue

[vipansabherwal]

Everything working fine when using fusion charts in *ngFor but sometimes getting error. Sometimes second row graphs not showing and sometimes last row.

Below is console error

Uncaught TypeError: Cannot read property 'el' of undefined
at r.Wa.pause (fusioncharts.js:474)
at a._chartAnimation (fusioncharts.js:1039)
at a._updateVisuals (fusioncharts.js:1036)
at a.draw (fusioncharts.js:1041)
at Object.k [as job] (fusioncharts.js:1001)
at q (fusioncharts.js:39)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:191)
at ZoneTask.invoke (zone.js:486)
at timer (zone.js:1540)

[rousan]

@vipansabherwal
can you please provide a sample code to generate the same issue at our end?

[vipansabherwal]

USING *ngIf also so that render start only when data is available in array.

   <tbody >
                                    <tr *ngFor="let item of apiValues | paginate: { itemsPerPage: 5, currentPage: p }; trackBy:identify; let i = index ">
                                        <td> {{item.AreaName}}	</td>
                                        <td>
                                            <div [@popOverState]="stateName">
                                                <fusioncharts id="gone{{p}}{{i}}" width="100%"
                                                              height="120"
                                                              type="hlineargauge"
                                                              dataformat="json"
                                                              [dataSource]="item.graph1">

                                                </fusioncharts>
                                            </div>
                                        </td>
                                        <td>
                                            <div [@popOverState]="stateName">
                                                <fusioncharts id="gtwo{{p}}{{i}}" width="100%"
                                                              height="90"
                                                              type="hlineargauge"
                                                              dataformat="json"
                                                              [dataSource]="item.graph2">
                                                </fusioncharts>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>

TS FILE

 this.apiValues = values.json();
            var i;
            for (i = 0; i <= this.apiValues.length-1; i++)
            {
              //  this.datasource1.pointers.pointer[0].value = this.apiValues[i].AccuracyPer;
                this.datasource1 = Object.assign({}, this.datasource1, {
                    "chart": {
                        "manageresize": "1",
                        "origw": "300",
                        "origh": "100",
                        "refreshInterval": "10",
                        "lowerlimit": "0",
                        "upperlimit": "100",
                        "numbersuffix": "",
                        "showborder": "0",
                        "bgcolor": "FFFFFF",
                        "ticksbelowgauge": "0",
                        "valuepadding": "0",
                        "gaugefillmix": "",
                        "showgaugeborder": "0",
                        "pointerontop": "0",
                        "pointerradius": "5",
                        "pointerbordercolor": "000000",
                        "pointerbgcolor": "000000",
                        "annrenderdelay": "0",
                        "showshadow": "0",
                        "minortmnumber": "0",
                        "basefontcolor": "000000",
                        "animation": "1",
                        "defaultAnimation": "1",
                        "showValue": "1",
                        "showTickMarks": "0",
                        "showtickvalues": "0",
                  
                    "theme": "fint"
                    },
                    "colorrange": {
                        "color": [
                            {
                                "minvalue": "0",
                                "maxvalue": "100",
                                "alpha": "0"
                            }
                        ]
                    },
                    "pointers": {
                        "pointer": [
                            {
                                "value": this.apiValues[i].AttemptPer

                            }
                        ]
                    },
                    "annotations": {
                        "groups": [
                            {
                                "id": "Grp1",
                                "showbelow": "0",
                                "x": "$chartCenterX",
                                "y": "-765",
                                "items": [
                                    {
                                        "type": "circle",
                                        "radius": "812",
                                        "color": "FFFFFF"
                                    }
                                ]
                            },
                            {
                                "id": "Grp2",
                                "showbelow": "1",
                                "items": [
                                    {
                                        "type": "rectangle",
                                        "x": "$gaugeStartX",
                                        "y": "$gaugeStartY",
                                        "tox": "$gaugeEndX",
                                        "toy": "$gaugeEndY",
                                        "fillcolor": "E00000,FCEF27,678000"
                                    }
                                ]
                            },
                            {
                                "id": "Grp3",
                                "showbelow": "0",
                                "items": [
                                    {
                                        "type": "text",
                                        "x": "$gaugeStartX+25",
                                        "y": "50",
                                        "size": "10",
                                        "color": "FFFFFF",
                                        "bold": "1",
                                        "label": "Bad"
                                    },
                                    {
                                        "type": "text",
                                        "x": "$gaugeEndX-25",
                                        "y": "50",
                                        "size": "10",
                                        "color": "FFFFFF",
                                        "bold": "1",
                                        "label": "Good"
                                    }
                                ]
                            }
                        ]
                    }
                });

                this.datasource2 = Object.assign({}, this.datasource2, {
                    "chart": {
                        "manageresize": "1",

                        "showValue": "1",
                        //Attributes to customize pointer on hover.
                        "lowerlimit": "0",
                        "upperlimit": "100",
                        "pointerBgHoverColor": "#ffffff",
                        "pointerBgHoverAlpha": "80",
                        "refreshInterval": "10",
                        "pointerHoverRadius": "9",
                        "showBorderOnHover": "0",
                        "pointerBorderHoverColor": "#333333",
                        "pointerBorderHoverThickness": "0",
                        "numbersuffix": "",
                        "showTickMarks": "0",
                        "basefontcolor": "000000",
                        "showtickvalues": "0",
                        "pointerradius": "5",
                        "bgcolor": "FFFFFF",
                        "showborder": "0",
                        "bgalpha": "0", "borderAlpha": "0",
                        "theme": "fint"

                    },
                    "colorrange": {
                        "color": [
                            {
                                "minvalue": "0",
                                "maxvalue": "50",
                                "label": "Needs Improvement",
                                "code": "E00000"

                            },
                            {
                                "minvalue": "51",
                                "maxvalue": "70",
                                "label": "Good",
                                "code": "FCEF27"

                            },
                            {
                                "minvalue": "71",
                                "maxvalue": "100",
                                "label": "V Good",
                                "code": "678000"
                            }
                        ]
                    },
                    "pointers": {
                        "pointer": [
                            {
                                "value": this.apiValues[i].AccuracyPer
                            }
                        ]
                    }
                });
              
                this.apiValues[i].graph1 = this.datasource1;
                this.apiValues[i].graph2 = this.datasource2;`

[rousan]

Hi @vipansabherwal,
Your main TS code and template seems perfect, can you tell me how you used fusioncharts module in your app.module.ts file?