jake.steele Report post Posted April 17, 2015 (edited) 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 April 17, 2015 by jake.steele Share this post Link to post Share on other sites
jake.steele Report post Posted April 17, 2015 (edited) 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 April 17, 2015 by jake.steele Share this post Link to post Share on other sites
Sanjukta Report post Posted April 20, 2015 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