Results 1 to 4 of 4

Thread: Charts on Android 4.3 Issue

  1. #1
    Sencha User
    Join Date
    Sep 2013
    Posts
    23
    Answers
    2
    Vote Rating
    2
      0  

    Default 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 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
    4,088
    Answers
    342
    Vote Rating
    136
      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.

    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
    23
    Answers
    2
    Vote Rating
    2
      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
    4,088
    Answers
    342
    Vote Rating
    136
      0  

    Default

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

    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •