1. #1
    Sencha User
    Join Date
    Sep 2013
    Posts
    20
    Answers
    2
    Vote Rating
    2
    Tieis is on a distinguished road

      0  

    Default Answered: Charts on Android 4.3 Issue

    Answered: Charts on Android 4.3 Issue


    I haven't found any posts on this bug so maybe someone can help me figure this out.

    I'm experimenting with charts in ST 2.2.1 and on a native build. What happens is that when a chart is generated, it displays 2 copies of it. If i make the graph scrollable, 1 graph will move while there will be a lingering copy of the original graph in the back. One crucial thing is that it happens on OS Androidd 4.3(hardware+emulator both emits this problem). However it seems to work fine in older Android versions.

    I've tested this on Android 2.2 (emulator) and 4.0.3(hardware+emulator); they both display the chart fine. If i run the code in a browser, it is also fine. My question is, is this a Sencha, Android OS firmware, or implementation problem? I tested this with a newly created sencha project, and adding the chart code to main.js:
    Code:
    Ext.define('Test.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'Ext.Video',
             'Ext.chart.CartesianChart', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'Ext.chart.series.Line', 'Ext.chart.interactions.PanZoom'
        ],
        config: {
            tabBarPosition: 'bottom',
    
            items: [
                {
                    title: 'Welcome',
                    iconCls: 'home',
    
                    styleHtmlContent: true,
                    scrollable: true,
    
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Welcome to Sencha Touch 2'
                    }
                },
                {
                    title: 'Get Started',
                    iconCls: 'action',
                    xtype: 'panel'
                }
            ]
        },
        
        initialize : function(){
            var lineChart = new Ext.chart.CartesianChart({
            animate: true,
            interactions : {
                    type : 'panzoom',
                    axes : {
                        "left" : {
                            allowPan : false,
                            allowZoom : false
                        },
                        "bottom" : {
                            allowPan : true,
                            allowZoom : true
                        }
                    }
                },
            store: {
              fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
              data: [
                  {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                  {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                  {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                  {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                  {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
              ]
            },
            axes: [{
                type: 'numeric',
                position: 'left',
                fields: ['data1'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                grid: true,
                minimum: 0
            }, {
                type: 'category',
                position: 'bottom',
                visibleRange : [ 0.25, 0.75 ],
                fields: ['name'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                }
            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                style: {
                    stroke: 'rgb(143,203,203)'
                },
                xField: 'name',
                yField: 'data1',
                marker: {
                    type: 'path',
                    path: ['M', -2, 0, 0, 2, 2, 0, 0, -2, 'Z'],
                    stroke: 'blue',
                    lineWidth: 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                fill: true,
                xField: 'name',
                yField: 'data3',
                marker: {
                    type: 'circle',
                    radius: 4,
                    lineWidth: 0
                }
            }]
            });
            Ext.Viewport.add(lineChart);
        }
    });
    In the first attachment, it's the screen I see after loading the app on an Android emulator on Android version 4.3. If i try to scroll the graph, you can see in the second attachment that there is a lingering copy of the original display, along with the axis labels.

    Thanks,
    Attached Images

  2. I'm unable to reproduce this on the simulator. On what device are you experiencing this problem. Touch 2.3.0 was released today. I recommend testing with that version as well.
    http://www.sencha.com/blog/announcin...-support-more/

  3. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,716
    Answers
    314
    Vote Rating
    116
    fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light

      0  

    Default


    I'm unable to reproduce this on the simulator. On what device are you experiencing this problem. Touch 2.3.0 was released today. I recommend testing with that version as well.
    http://www.sencha.com/blog/announcin...-support-more/
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  4. #3
    Sencha User
    Join Date
    Sep 2013
    Posts
    20
    Answers
    2
    Vote Rating
    2
    Tieis is on a distinguished road

      0  

    Default


    We suspected it was an android default browser problem since the ghosting of the graph would only appear on a native build running on android 4.3 and also on a web app being accessed through the default android browser.

    However i just tested the code with sencha cmd 3.1.2 and ST 2.3; built a native build and ran it on my Galaxy Nexus phone on android 4.3. The problem is gone now. It seems fixed.

    Seems like 2.3 did the trick.

    Thanks

  5. #4
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,716
    Answers
    314
    Vote Rating
    116
    fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light fmoseley is a glorious beacon of light

      0  

    Default


    Good to hear. Thanks for the update.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

Thread Participants: 1

Tags for this Thread