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
next here is the code I am using for the pie chartCode:<!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>
lastly I am getting the following errorCode: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);
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