Adding Pie Charts to Sencha Touch2 Application

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.

Answer 2

first make sure that you're referencing the sencha touch library inside the sencha touch distribution, not the main sencha touch library you can download in your html.

secondly you'll save yourself a lot of headache if you use MVCS folders and learn how to use the new references in ST2 and it will make debugging this 1000 times easier.

also you are using globals (window.)??