View Full Version : Touch Charts will consistently crash iPad's Safari when Created and Destroyed

23 Aug 2011, 1:16 PM
I need to initially show a set of up to 4 charts and then be able to switch the view to show another set of up to 4 charts and do this repeatably. When I do this with a fixed set of data, I can consistenly crash the iPad Safari browser at the same point. However this does not happen when running on Chrome or Safari Desktop (Windows or Mac) nor will it happen when using the iOS Simulator.

I have narrowed it down to the chart component by replacing it with a Panel and then re-running the test scripts. It has not yet crashed Safari. Further more, if I alter the number of points to chart, the iterations of showing a new set of charts before it crashes changes as well and is repeatable. The more items in the chart's store, the fewer iterations it takes before Safari crashes. The stores for the charts are loaded using the loadData() method with the append flag set to false.

Example test case-
Show a Panel containing 3 charts with 80 points on Chart 1 and 500 points on Charts 2 and 3
Show a Panel containing 2 charts with 80 points on Chart 1 and 500 points on Chart 2. (The Panel containing the 3 charts was removed from the viewport by doing a removeAll(true) on the containing Panel and then destroy() the Containing Panel before I add the new panel.)
Show a Panel containing 4 charts with 80 points on Chart 1, 500 points on Charts 2 and 3 and 25 on Chart 4.

It will never show the 4 chart panel in step 3 - Safari quits at that point. If I lower the number of datapoints to chart, I can get more iterations of showing charts but eventually it will crash Safari on the iPad.
I suspect its a memory related issue and from what I have been reading, there is no garbage collection on iOS so these DOM elements that have been removed from the DOM tree are still hanging around and never be released. Is that true? If so then what does the destroy() actually do?

24 Aug 2011, 2:02 PM
Hi - Thank you for the report. We had similar issues with the iPad, mainly because each canvas allocates memory in javascript and many of them may exceed the amount of memory the browser / device may have and the browser exits.

What series are you using?

24 Aug 2011, 2:17 PM
They are all JSONStore

The project I sent you regarding the Time Axis scaling is the same one I am using to test this with so you can see what I am seeing as well.

Jamie Avins
26 Aug 2011, 7:02 AM
Are you re-using the same store(s) for these charts or are the new stores each time? It sounds like an issue with the stores.

26 Aug 2011, 8:02 AM
Jamie, I thought so too but I think I made this so it would not be the case.

For this testcase I created 4 initially empty JsonStores: store_Chart1, store_Chart2, store_Chart3 and store_Chart4. Every time I created a new chart, it would use that same store. I then do a loadData(false) on the store to simulate new data.
Using Chrome's Developer Tools Profile, I took 2 heap snapshots, 1 when I initially show the page and 1 after I switch to a new set of charts. In the DOMWindow my Namespace where I have the stores does not increase in size (I am looking at the Retained Size) and the Store variables are the same.
However the Ext object gets larger (again looking at the retained Size) while my namespace object stays the same and even drops in subsequent snapShots.

Doing a Comparison of 2 snapshots, the (array) constructor seems to be growing by about 1-2 MB on each snapshot. A random look through the objects allocated all seem to be Ext.Element.extend.constructor (in the el property). There is also a quite a few of these in the "freed" area.
1 Comparison has 29,187 allocated and 7876 freed if that means anything.

26 Aug 2011, 11:49 AM
I did some more analysis on this using a single chart.
I added a single chart then removed it and viewed another single chart. I then took a heap snapshot. I then removed that chart and viewed another single snapshot with a single chart and took a heap snapshot of that as well. Doing a comparison of the 2 snapshots, I was able to see that the panel that contained the chart was added for 3.03K and 1 was freed at 3.03K. I had 10,182 objects allocated and 3970 freed between these 2 snapshots. I saw that I had 269 796Byte objects allocated but 38 796Byte objects freed. Doing a random sample of these allocated objects most were Ext.row.engine.canvas.Ext.extend and Ext.draw.Matrix.Ext.extend. Of the 796B objects that were freed (38), I just saw 2 of them. The rest were mostly my components that were destroyed when I removed the old chart before I drew the new one.
There were 226 412 Byte objects created but only 32 freed. They looked like part of the axis and tickmarks since I was seeing "color: #fff" properties and x properties. My axis is white. I did not see them in the freed list.
I hope that helps.

4 Nov 2011, 8:45 PM
I downloaded Sencha charts yesterday and was building an application that does create and destroy charts, and have found that I consistently crash the iPad browser after four views. If the solution is not to create and destroy which crashes the iPad, what is the best method to work around this?

15 Dec 2011, 11:38 PM
Having the same problem here.

I am just creating the chart view once, but there are two charts in a carousel.

Afterwards I just change the store data to update the chart.

Is there any bugfix for the iPad touch chart issue?

18 Feb 2013, 4:51 AM
Did anyone find a solution to this behavior in ST1.1? It's a highly annoying bug.

The bug still exists on both iOS5 and iOS6.