having problems with basic pie coding

**jwbworks** · 10 Aug 2012 7:28 AM

hello all I need help I am using the basic pie sample code from the docs site and it is erroring out. what am I doing wrong.

here is my index.html

Code:

<!DOCTYPE html><html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Retirement Plan</title>
    <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/touch-charts.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/main.css"/>
    <script type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="touch/touch-charts-debug.js"></script>
    <script>
        // Fix for problem  with android 3.x and 4.x which is
        // the browser has a problem with urls with ? and this
        // bug has not been fixed by google.  See:
        // http://code.google.com/p/android/issues/detail?id=17535 or
        // http://www.sencha.com/forum/showthread.php?162322-Sencha-Touch-2-PhoneGap-are-not-working-on-Android-4/page3&highlight=Loader
        //
        
        Ext.Loader.setConfig({ disableCaching: false });
        Ext.Ajax.setDisableCaching(false);    
    </script>	
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
        if (!Ext.browser.is.WebKit) {
            alert("The current browser is unsupported.\n\nSupported browsers:\n" +
                "Google Chrome\n" +
                "Apple Safari\n" +
                "Mobile Safari (iOS)\n" +
                "Android Browser\n" +
                "BlackBerry Browser"
            );
        }
    </script>
</head>
<body></body>
</html>

next here is the code I am using for the pie chart

Code:

var contribChartStore = new Ext.data.JsonStore({    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}
    ]
});


Ext.define('MyLifeNowMobile.view.override.contribChart_Module', {
    requires: 'MyLifeNowMobile.view.contribChart_Module'
}); 
    contribChart = new Ext.chart.Chart({
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: contribChartStore,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'data1',
                showInLegend: true,
                tips: {
                  trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        //calculate and display percentage on hover
                        var total = 0;
                        store.each(function(rec) { total += rec.get('data1'); });
                          this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                      }
                },
                highlight: {
                    segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
        });
var contribChartPage =  Ext.ComponentQuery.query('contribChart_Module');
var contribChartPageView= contribChartPage[0];
contribChartPageView.add(contribChart);

lastly I am getting the following error

Uncaught TypeError: Cannot read property 'selectors' of undefined

in the chart library that points to themes.push(Ext.chart.theme[themeName || me.getTheme()].selectors.slice());

any thoughts?

thanks jeff

**mitchellsimoens** · 17 Aug 2012 6:36 AM

Did you set a breakpoint and see what Ext.chart.theme[themeName || me.getTheme()] or any part of that is referring to?

**lilford.immanuel** · 12 Oct 2012 5:28 AM

Hi,
I get Ext.chart.theme.Base returns undefined..

Thanks in advance

having problems with basic pie coding

Thread Tools

Search Thread

Display

Unanswered: having problems with basic pie coding

Unanswered: having problems with basic pie coding

Tags for this Thread