1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    zhiyong.xu@shinerad.com is on a distinguished road

      0  

    Default Answered: How to add itemtap listener for Pie Chart?

    Answered: How to add itemtap listener for Pie Chart?


    I'm try to add a itemtap listener to pie chart but is not working, this is my code:

    Ext.define('Stock.view.ChartTest', {
    extend: 'Ext.Container',


    config: {
    layout: {
    type: 'card'
    },
    items: [
    {
    xtype: 'polar',
    id: 'testpie',
    itemId: 'mypiechart2',
    colors: [
    '#115fa6',
    '#94ae0a',
    '#a61120',
    '#ff8809',
    '#ffd13e',
    '#a61187',
    '#24ad9a',
    '#7c7474',
    '#a66111'
    ],
    store: 'piedata',
    series: [
    {
    type: 'pie',
    highlightCfg: {
    scale: 1.0,
    margin: 30
    },
    labelField: 'name',
    xField: 'data'
    }
    ],
    interactions: [
    {
    type: 'itemhighlight'
    },
    {
    type: 'rotate'
    }
    ]
    }
    ],
    listeners: [
    {
    fn: 'onTestpieItemTap',
    event: 'itemtap',
    delegate: '#testpie'
    }
    ]
    },


    onTestpieItemTap: function(series, item, event, eOpts) {
    console.log('item tap');
    },


    initialize: function() {
    this.callParent();


    }


    });

  2. First, please use BBCode CODE tags.

    Second, if you have no other code in initialize, it's a waste of space and some performance to have it with callParent, in this code just remove it.

    Third, try using #mypiechart2 for the listener delegate.

    This works for me (from API docs):

    Code:
    var chart = new Ext.chart.PolarChart({
        animate      : true,
        interactions : ['rotate'],
        colors       : ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e"],
        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}
            ]
        },
        series       : [
            {
                type       : 'pie',
                labelField : 'name',
                xField     : 'data3',
                donut      : 30
            }
        ],
        listeners : {
            itemtap : function() {
                console.log('hi');
            }
        }
    });
    Ext.Viewport.setLayout('fit');
    Ext.Viewport.add(chart);

  3. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,949
    Vote Rating
    953
    Answers
    3623
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First, please use BBCode CODE tags.

    Second, if you have no other code in initialize, it's a waste of space and some performance to have it with callParent, in this code just remove it.

    Third, try using #mypiechart2 for the listener delegate.

    This works for me (from API docs):

    Code:
    var chart = new Ext.chart.PolarChart({
        animate      : true,
        interactions : ['rotate'],
        colors       : ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e"],
        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}
            ]
        },
        series       : [
            {
                type       : 'pie',
                labelField : 'name',
                xField     : 'data3',
                donut      : 30
            }
        ],
        listeners : {
            itemtap : function() {
                console.log('hi');
            }
        }
    });
    Ext.Viewport.setLayout('fit');
    Ext.Viewport.add(chart);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

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

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  4. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    zhiyong.xu@shinerad.com is on a distinguished road

      0  

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    Answers
    1
    Eliyahu is on a distinguished road

      0  

    Default But it's not working...

    But it's not working...


    I search in "Sencha Touch Docs" and not find itemtap listener...
    http://docs-origin.sencha.com/touch/...-cfg-listeners

    But, for example, in "Ext JS Docs"
    http://docs.sencha.com/extjs/4.2.3/#...vent-itemclick
    It has itemtap listener.

    Is it possible to define itemtap listener for Pie Chart in Sencha Touch?

Thread Participants: 2