Touch Chart 2 Freeze the App

[udesh]

Hi,

I am playing around with Charts in Touch 2 in Android phones and observe that occasionally chart interactions make the application to freeze and the browser to crash after 30-60 seconds being non-responsive. I am trying the app in Android 4.0.4 in Samsung S3. However when I run it in desktop Chrome I did not observe this issue.

The interactions I have tried are Pie chart rotations, enable/disable series by clicking on legends in Pie/Bar charts, etc.

Until this bug is fixed, I don't mind even disabling those interactions. How do I disable them?

Thanks in advance.
- Eranga

[mitchellsimoens]

The separate Touch Charts release is not being developed on. The charts are now within Sencha Touch 2.1+

[udesh]

What I'm using is ST 2.1 GPL. The Charts used is non-other-than what's bundled with 2.1.

I could easily recreate the issue with below 2 Chart panels in an ST barebone app with a tabpanel.

Ext.define('test.app.view.ChartTest1', {
    extend: 'Ext.Panel',
    
    xtype: 'charttest1',
    
    requires: [
        'Ext.chart.PolarChart',
        'Ext.chart.series.Pie',
        'Ext.chart.interactions.Rotate'
    ],
    
    config: {
        title: 'Pie Test',
        iconCls: 'star',
        layout: 'fit',
        padding: 0,
        scrollable: false,
        items: [
            {
                xtype: 'polar',
                background: 'white',
                animate: true,
                interactions: ['rotate'],
                colors: ["#94ae0a", "#a61120"],
                
                store: {
                    fields: ['name', 'stats'],
                    data: [
                        {'name': 'Cat 1', 'stats': 95},
                        {'name': 'Cat 2', 'stats': 5}
                    ]
                },
                
                //set legend configuration
                legend: {
                    position: 'bottom'
                },
                
                series: [{
                    type: 'pie',
                    labelField: 'name',
                    xField: 'stats',
                    donut: 30
                }]
            }
        ]
    }
});

Ext.define('test.app.view.ChartTest2', {
    extend: 'Ext.Panel',
    
    xtype: 'charttest2',
    
    requires: [
       'Ext.chart.CartesianChart',
       'Ext.chart.axis.Category',
       'Ext.chart.axis.Numeric',
       'Ext.chart.series.Bar',
       'Ext.form.FieldSet',
       'Ext.form.Text'
    ],
    
    config: {
        title: 'Bar Test',
        iconCls: 'star',
        layout: 'fit',
        padding: 0,
        scrollable: false,
        items: [
            {
                xtype: 'chart',
                background: 'white',
                colors: ["#94ae0a", "#a61120"],
                store: {
                    fields: ['name', 'c1', 'c2'],
                    data: [
                        {"name": "Cat 1", "c1": 80, "c2": 20},
                        {"name": "Cat 2", "c1": 88, "c2": 12},
                        {"name": "Cat 3", "c1": 90, "c2": 10}
                    ]
                },
            
                //set legend configuration
                legend: {
                    position: 'bottom'
                },
            
                //define the x and y-axis configuration.
                axes: [
                    {
                        type: 'category',
                        position: 'bottom',
                        title: 'Categories',
                        fields: 'name'
                    },
                    {
                        type: 'numeric',
                        position: 'left',
                        grid: true,
                        minimum: 0,
                        title: '%'
                    }
                ],
            
                //define the actual bar series.
                series: [
                    {
                        type: 'bar',
                        xField: 'name',
                        yField: ['c1', 'c2'],
                        axis: 'bottom',
                        highlight: true,
                        showInLegend: true,
                        style: {
                            stroke: 'rgb(40,40,40)',
                            maxBarWidth: 30
                        },
                        // Cycles the red, green, and blue fill mode over the 2008, 2009,.., 2011, 2012 items
                        // subStyle parameters also override style parameters
                        subStyle: {
                            fill: ["#94ae0a", "#a61120"]
                        }
                    }
                ]
            }
        ]
    }
});

The issue is very unpredictable. By continuously doing some chart interactions (like pie chart rotate, enable/disable series, etc), I could re-create the issue in all the times. Sometimes the issue come in few seconds the app start, whereas the other times it takes 40-60 seconds to occur.

In the Android Debugger, I could notice below debug lines when I tap on the chart or canvas, after the application freezes.

01-28 23:10:32.147: V/webview(13529): NO_FAST_DRAW = false
01-28 23:10:32.447: V/webview(13529): singleCursorHandlerTouchEvent -getEditableSupport FASLE
01-28 23:10:33.328: V/webview(13529): NO_FAST_DRAW = false
01-28 23:10:33.698: V/webview(13529): singleCursorHandlerTouchEvent -getEditableSupport FASLE
01-28 23:10:34.179: V/webview(13529): NO_FAST_DRAW = false
01-28 23:10:34.489: V/webview(13529): singleCursorHandlerTouchEvent -getEditableSupport FASLE

I tried to find some pattern in the debug output just before the error occurs and noticed that at all the cases below log output was made within 1-2 seconds before the freeze happens.

[paint] Animation detected. Converting the HTML5 canvas buffer to a SkPicture.
...
GC_FOR_ALLOC freed 227K, 15% free 14372K/16803K, paused 24ms

Note: numbers vary

If it'll help I can send the full debug output. Any ideas?

- Eranga

[udesh]

Hi,

I wonder if it's only me experiencing this issue?

I tested the same App in some other phones. The issue is not coming in all the phones/webkit browsers.

Also, I found when enable/disable chart parts/series dynamically, sometimes Pie chart draw gets crooked.

Still ST 2.1 charts rock! Just need to iron out these small issues.

- Eranga