having problems with basic pie coding
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
