Sign in to follow this  
jake.steele

Fusion Charts failing to fire all events

Recommended Posts

Hello,

 

Version: Fusion Charts 3.3.1 R3

 

Renderer: JavaScript - Works better in my project.

 

Issue: Currently the FusionCharts are not firing the DrawComplete or Rendered events. This doesn't happen all the time, the first time the page loads with all the charts the events are all fired properly. However when a user filters the charts down using a combobox, the new charts that are displayed no longer fire all the events. They do however display correctly, render complete with data properly. This is an issue because I display a load mask that waits until all charts that fire the initialized event fire the rendered event. The loadmask now never disappears. It also affects my pdf rendering as the load manager never fires the page complete event.

 

How I am creating the chart object:

 

 createStackedColumnChart: function (data, id) {

        var chart = new FusionCharts("StackedColumn2D", (id) ? id : Ext.id());
 
        if (data) {
            Ext.apply(data.chart, this.stackedChartSettings);
            chart.setJSONData(data);
        }
 
        return chart;
    },

 

 
 
How I am rendering the chart :snippit:
 
stackedBarChart = fn.call(FS360.single.Chart, me.chartData, chartId);
FusionCharts(chartId).addEventListener("Rendered", chartEnd);
FusionCharts(chartId).addEventListener("NoDataToDisplay", chartEnd);
 
var chartContainer = Ext.create('Ext.Component', {
                autoEl: 'div',
                baseCls: cls,
                listeners: {
                    boxready: function (me, eOpts) {
                        stackedBarChart.render(me.getEl().id);
                    },
                    beforedestroy: function (me, eOpts) {
                        // Make sure you clean up unused charts.
                        stackedBarChart.dispose();
                    }
                }
            });
 

 

 

I also run this code before creating the new charts:

 

for (var i in FusionCharts.items) {
            FusionCharts.items.dispose();            
        }

 

 

How do I ensure that the chart that displays correctly fires the Rendered event?

 

Jacob

 

UPDATE #1

 

When switching the page: the Debug renders. (Looks like the Initialized is firing too many times.)

 

 

["#75 [ext-100] fired "beforedispose" event. "]

index.aspx:31 ["#76 [ext-100] fired "disposed" event. "]
index.aspx:31 ["#77 [ext-111] fired "beforedispose" event. "]
index.aspx:31 ["#78 [ext-111] fired "disposed" event. "]
index.aspx:31 ["#79 [ext-102] fired "beforedispose" event. "]
index.aspx:31 ["#80 [ext-102] fired "disposed" event. "]
index.aspx:31 ["#81 [ext-105] fired "beforedispose" event. "]
index.aspx:31 ["#82 [ext-105] fired "disposed" event. "]
index.aspx:31 ["#83 [ext-114] fired "beforedispose" event. "]
index.aspx:31 ["#84 [ext-114] fired "disposed" event. "]
index.aspx:31 ["#85 [ext-117] fired "beforedispose" event. "]
index.aspx:31 ["#86 [ext-117] fired "disposed" event. "]
index.aspx:31 ["#87 [ext-108] fired "beforedispose" event. "]
index.aspx:31 ["#88 [ext-108] fired "disposed" event. "]

 

Just the initialized and rendered events from below (Should be 8 init and 8 Rendered - 14 init 8 rendered)

 

index.aspx:31 ["#90 [ext-257] fired "initialized" event. "]
index.aspx:31 ["#94 [ext-259] fired "initialized" event. "]
index.aspx:31 ["#98 [ext-276] fired "initialized" event. "]
index.aspx:31 ["#102 [ext-278] fired "initialized" event. "]
index.aspx:31 ["#106 [ext-281] fired "initialized" event. "]
index.aspx:31 ["#110 [ext-284] fired "initialized" event. "]
index.aspx:31 ["#114 [ext-287] fired "initialized" event. "]
index.aspx:31 ["#118 [ext-290] fired "initialized" event. "]
index.aspx:31 ["#125 [ext-290] fired "rendered" event. "]
index.aspx:31 ["#128 [ext-314] fired "initialized" event. "]
index.aspx:31 ["#135 [ext-314] fired "rendered" event. "]
index.aspx:31 ["#138 [ext-330] fired "initialized" event. "]
index.aspx:31 ["#145 [ext-330] fired "rendered" event. "]
index.aspx:31 ["#148 [ext-332] fired "initialized" event. "]
index.aspx:31 ["#152 [ext-335] fired "initialized" event. "]
index.aspx:31 ["#159 [ext-335] fired "rendered" event. "]
index.aspx:31 ["#162 [ext-338] fired "initialized" event. "]
index.aspx:31 ["#170 [ext-338] fired "rendered" event. "]
index.aspx:31 ["#173 [ext-341] fired "initialized" event. "]
index.aspx:31 ["#180 [ext-341] fired "rendered" event. "]
index.aspx:31 ["#190 [ext-357] fired "rendered" event. "]
index.aspx:31 ["#200 [ext-380] fired "rendered" event. "]

 

 

 
 
Entire log
 
["#75 [ext-100] fired "beforedispose" event. "]
index.aspx:31 ["#76 [ext-100] fired "disposed" event. "]
index.aspx:31 ["#77 [ext-111] fired "beforedispose" event. "]
index.aspx:31 ["#78 [ext-111] fired "disposed" event. "]
index.aspx:31 ["#79 [ext-102] fired "beforedispose" event. "]
index.aspx:31 ["#80 [ext-102] fired "disposed" event. "]
index.aspx:31 ["#81 [ext-105] fired "beforedispose" event. "]
index.aspx:31 ["#82 [ext-105] fired "disposed" event. "]
index.aspx:31 ["#83 [ext-114] fired "beforedispose" event. "]
index.aspx:31 ["#84 [ext-114] fired "disposed" event. "]
index.aspx:31 ["#85 [ext-117] fired "beforedispose" event. "]
index.aspx:31 ["#86 [ext-117] fired "disposed" event. "]
index.aspx:31 ["#87 [ext-108] fired "beforedispose" event. "]
index.aspx:31 ["#88 [ext-108] fired "disposed" event. "]
LoadManager.js:7 Completed.
index.aspx:31 ["#89 [ext-257] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#90 [ext-257] fired "initialized" event. "]
index.aspx:31 ["#91 [ext-257] fired "beforedataupdate" event. "]
index.aspx:31 ["#92 [ext-257] fired "dataupdated" event. "]
index.aspx:31 ["#93 [ext-259] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#94 [ext-259] fired "initialized" event. "]
index.aspx:31 ["#95 [ext-259] fired "beforedataupdate" event. "]
index.aspx:31 ["#96 [ext-259] fired "dataupdated" event. "]
index.aspx:31 ["#97 [ext-276] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#98 [ext-276] fired "initialized" event. "]
index.aspx:31 ["#99 [ext-276] fired "beforedataupdate" event. "]
index.aspx:31 ["#100 [ext-276] fired "dataupdated" event. "]
index.aspx:31 ["#101 [ext-278] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#102 [ext-278] fired "initialized" event. "]
index.aspx:31 ["#103 [ext-278] fired "beforedataupdate" event. "]
index.aspx:31 ["#104 [ext-278] fired "dataupdated" event. "]
index.aspx:31 ["#105 [ext-281] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#106 [ext-281] fired "initialized" event. "]
index.aspx:31 ["#107 [ext-281] fired "beforedataupdate" event. "]
index.aspx:31 ["#108 [ext-281] fired "dataupdated" event. "]
index.aspx:31 ["#109 [ext-284] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#110 [ext-284] fired "initialized" event. "]
index.aspx:31 ["#111 [ext-284] fired "beforedataupdate" event. "]
index.aspx:31 ["#112 [ext-284] fired "dataupdated" event. "]
index.aspx:31 ["#113 [ext-287] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#114 [ext-287] fired "initialized" event. "]
index.aspx:31 ["#115 [ext-287] fired "beforedataupdate" event. "]
index.aspx:31 ["#116 [ext-287] fired "dataupdated" event. "]
index.aspx:31 ["#117 [ext-290] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#118 [ext-290] fired "initialized" event. "]
index.aspx:31 ["#119 [ext-290] fired "beforedataupdate" event. "]
index.aspx:31 ["#120 [ext-290] fired "dataupdated" event. "]
index.aspx:31 ["#121 [ext-290] fired "beforerender" event. "]
index.aspx:31 ["#122 [ext-290] fired "dataloaded" event. "]
index.aspx:31 ["#123 [ext-290] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#124 [ext-290] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#125 [ext-290] fired "rendered" event. "]
index.aspx:31 ["#126 [ext-290] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#127 [ext-314] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#128 [ext-314] fired "initialized" event. "]
index.aspx:31 ["#129 [ext-314] fired "beforedataupdate" event. "]
index.aspx:31 ["#130 [ext-314] fired "dataupdated" event. "]
index.aspx:31 ["#131 [ext-314] fired "beforerender" event. "]
index.aspx:31 ["#132 [ext-314] fired "dataloaded" event. "]
index.aspx:31 ["#133 [ext-314] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#134 [ext-314] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#135 [ext-314] fired "rendered" event. "]
index.aspx:31 ["#136 [ext-314] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#137 [ext-330] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#138 [ext-330] fired "initialized" event. "]
index.aspx:31 ["#139 [ext-330] fired "beforedataupdate" event. "]
index.aspx:31 ["#140 [ext-330] fired "dataupdated" event. "]
index.aspx:31 ["#141 [ext-330] fired "beforerender" event. "]
index.aspx:31 ["#142 [ext-330] fired "dataloaded" event. "]
index.aspx:31 ["#143 [ext-330] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#144 [ext-330] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#145 [ext-330] fired "rendered" event. "]
index.aspx:31 ["#146 [ext-330] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#147 [ext-332] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#148 [ext-332] fired "initialized" event. "]
index.aspx:31 ["#149 [ext-332] fired "beforedataupdate" event. "]
index.aspx:31 ["#150 [ext-332] fired "dataupdated" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#151 [ext-335] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#152 [ext-335] fired "initialized" event. "]
index.aspx:31 ["#153 [ext-335] fired "beforedataupdate" event. "]
index.aspx:31 ["#154 [ext-335] fired "dataupdated" event. "]
index.aspx:31 ["#155 [ext-335] fired "beforerender" event. "]
index.aspx:31 ["#156 [ext-335] fired "dataloaded" event. "]
index.aspx:31 ["#157 [ext-335] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#158 [ext-335] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#159 [ext-335] fired "rendered" event. "]
index.aspx:31 ["#160 [ext-335] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#161 [ext-338] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#162 [ext-338] fired "initialized" event. "]
index.aspx:31 ["#163 [ext-338] fired "beforedataupdate" event. "]
index.aspx:31 ["#164 [ext-338] fired "dataupdated" event. "]
index.aspx:31 ["#165 [ext-338] fired "beforerender" event. "]
index.aspx:31 ["#166 [ext-338] fired "dataloaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#167 [ext-338] fired "nodatatodisplay" event. "]
index.aspx:31 ["#168 [ext-338] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#169 [ext-338] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#170 [ext-338] fired "rendered" event. "]
index.aspx:31 ["#171 [ext-338] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#172 [ext-341] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#173 [ext-341] fired "initialized" event. "]
index.aspx:31 ["#174 [ext-341] fired "beforedataupdate" event. "]
index.aspx:31 ["#175 [ext-341] fired "dataupdated" event. "]
index.aspx:31 ["#176 [ext-341] fired "beforerender" event. "]
index.aspx:31 ["#177 [ext-341] fired "dataloaded" event. "]
index.aspx:31 ["#178 [ext-341] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#179 [ext-341] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#180 [ext-341] fired "rendered" event. "]
index.aspx:31 ["#181 [ext-341] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#182 [ext-357] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#183 [ext-357] fired "initialized" event. "]
index.aspx:31 ["#184 [ext-357] fired "beforedataupdate" event. "]
index.aspx:31 ["#185 [ext-357] fired "dataupdated" event. "]
index.aspx:31 ["#186 [ext-357] fired "beforerender" event. "]
index.aspx:31 ["#187 [ext-357] fired "dataloaded" event. "]
index.aspx:31 ["#188 [ext-357] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#189 [ext-357] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#190 [ext-357] fired "rendered" event. "]
index.aspx:31 ["#191 [ext-357] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.
index.aspx:31 ["#192 [ext-380] fired "beforeinitialize" event. "]
index.aspx:27 INIT
index.aspx:31 ["#193 [ext-380] fired "initialized" event. "]
index.aspx:31 ["#194 [ext-380] fired "beforedataupdate" event. "]
index.aspx:31 ["#195 [ext-380] fired "dataupdated" event. "]
index.aspx:31 ["#196 [ext-380] fired "beforerender" event. "]
index.aspx:31 ["#197 [ext-380] fired "dataloaded" event. "]
index.aspx:31 ["#198 [ext-380] fired "internal.domelementcreated" event. "]
index.aspx:31 ["#199 [ext-380] fired "loaded" event. "]
Chart.js:87 DONE
index.aspx:31 ["#200 [ext-380] fired "rendered" event. "]
index.aspx:31 ["#201 [ext-380] fired "drawcomplete" event. "]
LoadManager.js:7 Completed.
LoadManager.js:7 Completed.

 

 

Edited by jake.steele

Share this post


Link to post
Share on other sites

I found a way to fix this issue, by moving the init call from FusionCharts listener to the container itself. I no longer need help as this has passed all my tests. Thanks for your time, mods please close and remove this thread.

Edited by jake.steele

Share this post


Link to post
Share on other sites

I found a way to fix this issue, by moving the init call from FusionCharts listener to the container itself. I no longer need help as this has passed all my tests. Thanks for your time, mods please close and remove this thread.

Hi,

 

Thanks for the update and suggestion.

 

We are glad that your issue is resolved.

 

Happy FusionCharting! :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this