fusioncharts
Fusion Charts in *ngFor Issue
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)
@vipansabherwal can you please provide a sample code to generate the same issue at our end?
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;`
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?