fusioncharts endlessly loops through unknown/nonexistent chart objects

[gdsimz]

I have a multiple zoomline charts using Fusioncharts 3.7.1 that are constructed in the following manner json datasource responses like the following:

 

..
$.get( dataURL, function( data ) {
var strl = data.length;
var n = data.indexOf('{"dataModel":');
var res = data.substr(n+13, strl);
var fnlVal = res.substr(0,res.length-1);
chartContainerDIV1.setChartData(fnlVal, 'json');
});
..

chartContainerDIV1.render("chartContainerDIV1"+Ext.getCmp('dynamicTagValue').text);
chartContainerDIV1.addEventListener ("beforeResize", function (eventObj, dataObj) {console.log( eventObj.sender.id + " is resizing" );Ext.getBody().mask("Please wait...");});
chartContainerDIV1.addEventListener ("drawComplete", function (eventObj, dataObj) {console.log( eventObj.sender.id + " is is drawn" );Ext.getBody().unmask();});
chartContainerDIV1.addEventListener ("rendered" , function (eventObject) {
chartContainer5.setChartAttribute({
"caption": "Test ",
"subCaption": Ext.getCmp('selectedDuration').text,
"xAxisName": Ext.getCmp('selectedDuration').text,
"yAxisName": "Calls",
"yaxisminvalue": "-2",
"yaxismaxvalue": "2",
"forceaxislimits": "1",
"pixelsperpoint": "0",
"pixelsperlabel": "30",
"linethickness": "1",
"compactdatamode": "1",
"dataseparator": "|",
"theme": "fint",
"paletteColors": "c55c5a,#4d79ab",
"dataPath": serviceURL
});
createThumbNail(chartContainerDIV1.id, '95%', '150', "chartContainerDIV11"+Ext.getCmp('selectedDuration').value);
createThumbNail(chartContainerDIV1.id, '95%', '90%', "chartContainerDIV17"++Ext.getCmp('selectedDuration').value);
console.log( eventObject.sender.id + " has rendered drawing" ); 

There are random moments as tabs are created encompassing these charts that line 70 of fusioncharts just increments to check chart objects infinitely.

 

fusionChart.js throws a looping error beyond the number of chart objects within the web application as shown:

 

Uncaught RuntimeException: #03091456 chartobject-211.render() Error >> Unable to find the container DOM element.e.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1440681466266:145491(anonymous function) @ app.js?_dc=1440681466266:145776b @ fusioncharts.js:34N @ fusioncharts.js:34J.triggerEvent @ fusioncharts.js:38e.raiseEvent @ fusioncharts.js:38e.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:758

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-212.render() Error >> Unable to find the container DOM element.e.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1440681466266:145491(anonymous function) @ app.js?_dc=1440681466266:145711b @ fusioncharts.js:34N @ fusioncharts.js:34J.triggerEvent @ fusioncharts.js:38e.raiseEvent @ fusioncharts.js:38e.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:758

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-213.render() Error >> Unable to find the container DOM element.e.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1440681466266:145491(anonymous function) @ app.js?_dc=1440681466266:145712b @ fusioncharts.js:34N @ fusioncharts.js:34J.triggerEvent @ fusioncharts.js:38e.raiseEvent @ fusioncharts.js:38e.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:758

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-214.render() Error >> Unable to find the container DOM element.e.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1440681466266:145491(anonymous function) @ app.js?_dc=1440681466266:145839b @ fusioncharts.js:34N @ fusioncharts.js:34J.triggerEvent @ fusioncharts.js:38e.raiseEvent @ fusioncharts.js:38e.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:758

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-215.render() Error >> Unable to find the container DOM element.e.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1440681466266:145491(anonymous function) @ app.js?_dc=1440681466266:145840b @ fusioncharts.js:34N @ fusioncharts.js:34J.triggerEvent @ fusioncharts.js:38e.raiseEvent @ fusioncharts.js:38e.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:758

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-216.render() Error >> Unable to find the container DOM element.e.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1440681466266:145491(anonymous function) @ app.js?_dc=1440681466266:145581b @ fusioncharts.js:34N @ fusioncharts.js:34J.triggerEvent @ fusioncharts.js:38e.raiseEvent @ fusioncharts.js:38e.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:758

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-217.render() Error >> Unable to find the container DOM element.

 

Which is strange because there are way less chart objects that have been created.

 

How to get this to stop?

 

Thanks in Advance

[gdsimz]

FYI upgrading to 3.8 did not fix anything

[Vishalika]

Hi,

 

As per the logs,it seems that you are trying to re render the charts.

 

Please confirm if dispose() API is used in this case, if not then dispose the chart and again re render it.

 

Refer this link: http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#dispose

 

Sample implementation: http://jsfiddle.net/vishalika/hpzv9qf8/

 

Hope this helps.

[gdsimz]

Hi Vishalika,

 

The code is never re-rendered, but it's happening when tabs are created.  For example like the tabs on this page: http://www.jankoatwarpspeed.com/wp-content/uploads/examples/dynamic_tabs/# 

 

There are dynamic tabs and each tab has dynamically named divs for the chart objects to sit in.  Chart objects are created with selection data and rendered to divs only once.

 

When user selects certain options and clicks a button, it creates a tab.  The first tab runs as expected with fusioncharts as chart-objects 1 through 9  populate TabA chartcontainer divs.  

 

 

The bug is when a second TabB is created dynamically creating the divs for TabB chart Objects.  chart-objects 9 through 18 for TabB populate and create the thumbnails, but then FusionCharts cycles through the chart objects again and again creating infinite thumbnail chart-objects:

 

Here chartobject-53 through 57 actually exist get cycled through over and over (there is no loop or while statements in my code by the way) until iteration goes beyond what exists

 

app.js?_dc=1441222287520:148534 chartobject-53 has rendered drawing

app.js?_dc=1441222287520:148578 chartobject-54 is is drawn

app.js?_dc=1441222287520:148600 chartobject-54 has rendered drawing

app.js?_dc=1441222287520:148641 chartobject-55 is is drawn

app.js?_dc=1441222287520:148664 chartobject-55 has rendered drawing

app.js?_dc=1441222287520:148705 chartobject-56 is is drawn

app.js?_dc=1441222287520:148728 chartobject-56 has rendered drawing

app.js?_dc=1441222287520:148769 chartobject-57 is is drawn

app.js?_dc=1441222287520:148792 chartobject-57 has rendered drawing

app.js?_dc=1441222287520:148511 chartobject-53 is is drawn

app.js?_dc=1441222287520:148534 chartobject-53 has rendered drawing

app.js?_dc=1441222287520:148578 chartobject-54 is is drawn

app.js?_dc=1441222287520:148600 chartobject-54 has rendered drawing

app.js?_dc=1441222287520:148641 chartobject-55 is is drawn

app.js?_dc=1441222287520:148664 chartobject-55 has rendered drawing

app.js?_dc=1441222287520:148705 chartobject-56 is is drawn

app.js?_dc=1441222287520:148728 chartobject-56 has rendered drawing

app.js?_dc=1441222287520:148769 chartobject-57 is is drawn

app.js?_dc=1441222287520:148792 chartobject-57 has rendered drawing

app.js?_dc=1441222287520:148511 chartobject-53 is is drawn

app.js?_dc=1441222287520:148534 chartobject-53 has rendered drawing

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-81.render() Error >> Unable to find the container DOM element.d.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1441222287520:148442(anonymous function) @ app.js?_dc=1441222287520:148533b @ fusioncharts.js:34G @ fusioncharts.js:34I.triggerEvent @ fusioncharts.js:38d.raiseEvent @ fusioncharts.js:38d.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:762

app.js?_dc=1441222287520:148578 chartobject-54 is is drawn

app.js?_dc=1441222287520:148600 chartobject-54 has rendered drawing

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-83.render() Error >> Unable to find the container DOM element.d.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1441222287520:148442(anonymous function) @ app.js?_dc=1441222287520:148599b @ fusioncharts.js:34G @ fusioncharts.js:34I.triggerEvent @ fusioncharts.js:38d.raiseEvent @ fusioncharts.js:38d.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:762

app.js?_dc=1441222287520:148641 chartobject-55 is is drawn

app.js?_dc=1441222287520:148664 chartobject-55 has rendered drawing

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-85.render() Error >> Unable to find the container DOM element.d.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1441222287520:148442(anonymous function) @ app.js?_dc=1441222287520:148663b @ fusioncharts.js:34G @ fusioncharts.js:34I.triggerEvent @ fusioncharts.js:38d.raiseEvent @ fusioncharts.js:38d.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:762

app.js?_dc=1441222287520:148705 chartobject-56 is is drawn

app.js?_dc=1441222287520:148728 chartobject-56 has rendered drawing

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-87.render() Error >> Unable to find the container DOM element.d.extend.render @ fusioncharts.js:70tp.add.items.items.listeners.afterrender.$.get.done.FusionCharts.ready.createThumbNail @ app.js?_dc=1441222287520:148442(anonymous function) @ app.js?_dc=1441222287520:148727b @ fusioncharts.js:34G @ fusioncharts.js:34I.triggerEvent @ fusioncharts.js:38d.raiseEvent @ fusioncharts.js:38d.raiseEventWithLegacy @ fusioncharts.js:39(anonymous function) @ fusioncharts.js:762

app.js?_dc=1441222287520:148769 chartobject-57 is is drawn

app.js?_dc=1441222287520:148792 chartobject-57 has rendered drawing

fusioncharts.js:70 Uncaught RuntimeException: #03091456 chartobject-89.render() Error >> Unable to find the container DOM element.

[Vishalika]

Hi,

 

Can you please share any scaled down sample to replicate the issue?

 

Currently, we don't have such implementation.

 

Awaiting response.