Question

I am trying to add pie chart to the existing sencha touch mvc application , pie chart displays fine if i place the chart related code in the app.js file , The problem i am facing is if place the chart in seperate view its not displaying , i dont see any errors also being triggered, Please can i know is their any different approach to integrate pie chart for different views?

This my sample code of the view where piechart code is written

Ext.define('Example.view.PieChartTest', {
    extend: 'Ext.Panel',
    xtype: "piecharttestpage",
    requires: [
        'Ext.chart.Panel',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.series.Pie'

        ],
   intit: function () {
        //this.callParent(arguments);

        window.initExample = function (title, helpText, defaultStore) {
            defaultStore = defaultStore || 'store1';
            window.generateData = function (n, floor) {
                var data = [],
                    i;

                floor = (!floor && floor !== 0) ? 20 : floor;

                for (i = 0; i < (n || 12); i++) {
                    data.push({
                        name: Ext.Date.monthNames[i % 12],
                        data1: Math.floor(Math.max((Math.random() * 100), floor)),
                        data2: Math.floor(Math.max((Math.random() * 100), floor)),
                        data3: Math.floor(Math.max((Math.random() * 100), floor)),
                        2003: Math.floor(Math.max((Math.random() * 100), floor)),
                        2004: Math.floor(Math.max((Math.random() * 100), floor)),
                        2005: Math.floor(Math.max((Math.random() * 100), floor)),
                        2006: Math.floor(Math.max((Math.random() * 100), floor)),
                        2007: Math.floor(Math.max((Math.random() * 100), floor)),
                        2008: Math.floor(Math.max((Math.random() * 100), floor)),
                        2009: Math.floor(Math.max((Math.random() * 100), floor)),
                        2010: Math.floor(Math.max((Math.random() * 100), floor)),
                        iphone: Math.floor(Math.max((Math.random() * 100), floor)),
                        android: Math.floor(Math.max((Math.random() * 100), floor)),
                        ipad: Math.floor(Math.max((Math.random() * 100), floor))
                    });
                }
                return data;
            };

            window.store1 = new Ext.create('Ext.data.JsonStore', {
                fields: ['name', '2004', '2005', '2006', '2007', '2008', '2009', '2010', 'iphone', 'android', 'ipad'],
                data: generateData(5, 20)
            });

            window.store2 = new Ext.data.JsonStore({
                fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
                data: generateData(6, 20)
            });

            window.store3 = new Ext.data.JsonStore({
                fields: ['name', '2007', '2008', '2009', '2010'],
                data: generateData(12, 20)
            });

            var onRefreshTap = function () {
                window[defaultStore].setData(generateData(window[defaultStore].data.length, 20));
            };


            var onHelpTap = function () {
                window.helpPanel = window.helpPanel || Ext.create('Ext.Panel', {
                    ui: 'dark',
                    modal: true,
                    fullscreen: false,
                    hideOnMaskTap: true,
                    centered: true,
                    width: 300,
                    height: 250,
                    styleHtmlContent: true,
                    scrollable: 'vertical',
                    zIndex: 100,
                    items: [
                        {
                            docked: 'top',
                            xtype: 'toolbar',
                            title: title
                        },
                        {
                            html: helpText,
                            hidden: !helpText
                        }
                    ]
                });
                window.helpPanel.show('pop');
            };

            window.createPanel = function (chart) {
                return window.panel = Ext.create('Ext.chart.Panel', {
                    fullscreen: true,
                    title: title,
                    buttons: [
                        {
                            xtype: 'button',
                            iconCls: 'help',
                            iconMask: true,
                            ui: 'plain',
                            handler: onHelpTap
                        },
                        {
                            xtype: 'button',
                            iconCls: 'shuffle',
                            iconMask: true,
                            ui: 'plain',
                            handler: onRefreshTap
                        }
                    ],
                    chart: chart
                });
            };
        };


      window.createPanel(new Ext.chart.Chart({
            themeCls: 'pie1',
            theme: 'Demo',
            store: store1,

            shadow: false,
            animate: true,
            insetPadding: 20,
            legend: {
                position: 'left'
            },
            interactions: [{
                type: 'piegrouping',
                listeners: {
                    selectionchange: function (interaction, selectedItems) {
                        var sum = 0,
                i = selectedItems.length;
                        if (i) {
                            while (i--) {
                                sum += selectedItems[i].storeItem.get('visitors');
                            }
                            window.chartPanel.descriptionPanel.setTitle('Total visitors: ' + sum);
                            window.chartPanel.headerPanel.setActiveItem(1, { type: 'slide', direction: 'left' });
                        }
                        else {
                            window.chartPanel.headerPanel.setActiveItem(0, { type: 'slide', direction: 'right' });
                        }
                    }
                }
            }],
            series: [
                {
                    type: 'pie',
                    field: '2007',
                    showInLegend: true,
                    highlight: false,
                    listeners: {
                        'labelOverflow': function (label, item) {
                            item.useCallout = true;
                        }
                    },
                    // Example to return as soon as styling arrives for callouts
                    callouts: {
                        renderer: function (callout, storeItem) {
                            callout.label.setAttributes({
                                text: storeItem.get('name')
                            }, true);
                        },
                        filter: function () {
                            return false;
                        },
                        box: {
                        //no config here.
                    },
                    lines: {
                        'stroke-width': 2,
                        offsetFromViz: 20
                    },
                    label: {
                        font: 'italic 14px Arial'
                    },
                    styles: {
                        font: '14px Arial'
                    }
                },
                label: {
                    field: 'name'
                }
            }
            ]
        }));
       // this.add(chartpanel);

    },

    config: {
        title: 'info',
        iconCls: 'star',
        scrollable: true,
        cls: 'servicesclass',
        layout: 'vbox',
        height: 500,
        width: 500,
        autoDestroy: true

    }
});

Answer 1

I know this issue you can fix it by converting things in variable. Try the code below in your view section and change the name of the app to your app

generateData = function(n) {
    var data = [];
    var names = ['one', 'two', 'three', 'four'];
    var i;
    for (i = 0; i < n; i++) {
        data.push({description: names[i], value: 3 + i}); //pushes data onto the data array by looping, value is a funciton of i
    }
    return data;
};

var myStore = new Ext.create('Ext.data.Store', {
    fields: ['description', 'value'],
    data: generateData(4)
});

var chart1 =  new Ext.create('Ext.chart.Chart', {

store: myStore, //the store that it will use
height: 480,
width: 320,
    series: [{
        type: 'pie',
        showInLegend: true,
        field: 'value',
        label: { //the label inside each pie
            field: 'description',
            font: '20px Arial',
            display: 'rotate',
            contrast: true
        },
    }],
});



Ext.define('MyApp.view.panel1', {


extend: 'Ext.chart.Panel',

    alias: 'widget.Panel1',

    config:
    {   
        chart: chart1 //displays the chart
    }
});

Tut the name of this panel i.e Panel1 in the App.js file

Ext.Loader.setConfig({

    enabled: true
});

Ext.application({

    views: [
        'panel1',


    ],
    name: 'MyApp',
    controllers: [
        'your controller name'
    ],

 // include this one only if you have MainNav
    launch: function() {

        Ext.create('MyApp.view.MainNav', {fullscreen: true});
    }

});

This one works for me.