Chart axes error: Uncaught TypeError: Cannot call method 'substring' of undefined

[Barry_127]

Hi,

I'm trying to create a simple Ext chart as shown in the documentation. But when i'm making the axes i get this error:




Uncaught TypeError: Cannot call method 'substring' of undefined ext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)

Ext.ClassManager.parseNamespaceext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.ClassManager.getext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.ClassManager.instantiateext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.ClassManager.instantiateByAliasext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
(anonymous function)ext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.initializeAxisext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.redrawext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.afterComponentLayoutext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.notifyOwnerext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.callLayoutext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.flushLayoutsext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.runCompleteext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
dext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
b.implement.callParentext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.override.runCompleteext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.runext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.statics.flushLayoutsext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.statics.resumeLayoutsext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.resumeLayoutsext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.renderext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.constructorext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
b.implement.callParentext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.constructorext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
b.implement.callParentext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.define.constructorext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
hext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
(anonymous function)
Ext.ClassManager.instantiateext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
(anonymous function)ext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
(anonymous function)
isEventext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
fireext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.apply.readyEvent.e.fireext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.apply.fireReadyEventext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.apply.onDocumentReadyext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.apply.onReady.zext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.apply.onReadyext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
Ext.onReadyext-all.js:21 (http://192.168.1.109:8080/l/js/common/Ext/ext-all.js)
(anonymous function)
(anonymous function)



I'm using the following code:



<?php
/*... CODE FOR $data and $total */
?>
<script type="text/javascript"> Ext.onReady(function() {
/* Ext.define('modelYear', {
extend: 'Ext.data.Model',
fields: ['totalCount','month']
});*/

var yearStore = new Ext.data.ArrayStore({
data: [
<?php
$i = 0;
foreach($data as $value) {
echo ($i == 0) ? '' : ',';
echo '[' . $value['total'] . '], ["' . $value['text'] . '"]';
$i++;
}
?>
],
fields: ['totalCount','month']
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.get('chartLastYear'),
height: 195,
width: 600,
store: yearStore,
axes: [{
title: 'Pictures',
type: 'Numric',
position: 'left',
fields: ['totalCount'],
minimum: 0,
maximum: <?php echo $total;?>
}, {
title: 'Month',
position: 'bottom',
fields: ['month'],

}]
});
});
</script>
//Div chartLastYear is here


Can anybody help me?

[fschaeffer]

Hello,

maybe it is just a typo, try using type: 'Numeric'

HTH

[Barry_127]

Hi fschaeffer,

Thank you for looking.

I changed type to 'Numeric' but i'm still getting the error.

Could it be anything else?

[Barry_127]

Hi!

After lot of tries I managed to get chart working using a panel as container.

I took the code form the example and changed it to my needs

here's my working code:


<script type="text/javascript"> Ext.onReady(function() {
Ext.define('modelYear', {
extend: 'Ext.data.Model',
fields: ['totalCount','mon','added']
});

var yearStore = Ext.create('Ext.data.Store', {
model: 'modelYear',
data: [
<?php
$i = 0;
foreach($data as $value) {
echo ($i == 0) ? '' : ',';
echo '{totalCount: ' . $value['total'] . ', mon: "' . $value['text'] . '", added: ' . $value['added'] . '}';
$i++;
}
?>

]
});

Ext.get('chartLastYear').update();

var pnlChartLastYear = Ext.create('Ext.panel.Panel', {
height: 195,
border: false,
renderTo: Ext.get('chartLastYear'),
layout: 'fit',
items: {
id: 'chrtLastYear',
xtype: 'chart',
animate: true,
store: yearStore,
axes: [{
title: 'Pictures total',
type: 'Numeric',
position: 'right',
fields: ['totalCount'],
minimum: 0,
maximum: <?php echo $total;?>
},{
title: 'Pictures added',
type: 'Numeric',
position: 'left',
fields: ['added'],
grid: true,
minimum: 0,
maximum: <?php echo $admax;?>
},{
type: 'Category',
position: 'bottom',
fields: ['mon'],
title: 'Month'
}],
series: [{
type: 'line',
axis: 'right',
xField: 'mon',
yField: 'totalCount',
tips: {
trackMouse: true,
width: 80,
height: 20,
renderer: function(storeItem, item) {
this.setTitle('<b>Total:</b> ' +storeItem.get('totalCount'));
}
}
}, {
type: 'column',
axis: 'left',
xField: 'mon',
yField: 'added',
label: {
display: 'insideEnd',
'text-anchor': 'middle',
renderer: Ext.util.Format.numberRenderer('0'),
field: 'added',

}
}]
}
});
});
</script>

fschaeffer thanks again for your help.