Sencha Charts: Uncaught TypeError: Object [object Object] has no method 'getDirection'

Question

Morning,

I am using Sencha Touch 2.3, Sencha Cmd 4.0.2.67

Unfortunately, I do not know enough about Sencha to be able to explain and diagnose my problem, so please forgive any omissions.

When I try to run my app, which creates several gauges and bar charts, before any charts have been drawn, the app crashes and console.log give the following error message:

Uncaught TypeError: Object [object Object] has no method 'getDirection'

It says the error is on line 683 of chart.series.Series.js, which looks like this (this is how it came out of the box):

for (i = 0, ln = axes.length; i < ln; i++) { axis = axes[i]; if (!directionMap[axis.getDirection()]) {// <-- line 683 directionMap[axis.getDirection()] = [axis]; } else { directionMap[axis.getDirection()].push(axis); } }

I have checked axis.Axis.js, and I can see that line 543 has the following:
getDirection: function () { return this.getChart().getDirectionForAxis(this.getPosition()); },

console.log(axes[i]) shows the following: Class {titleStyle: Class, labelStyle: Class, gridStyle: Class, initConfig: function, initialConfig: Object…} _chart: Class _fields: Array[0] _labels: Array[0] _margin: 10 _maximum: 10 _minimum: 0 _position: "gauge" _steps: 10 _title: false axisId: "ext-axis-12" config: objectClass eventDispatcher: Class getEventDispatcher: function () { getObservableId: function () { getUniqueId: function () { gridStyle: Class id: "ext-chart-axis-gauge-1" initConfig: function (){} initialConfig: Object labelStyle: Class managedListeners: Object observableId: "#ext-chart-axis-gauge-1" titleStyle: Class usedSelectors: Array[1] __proto__: Object

My app generates both gauges AND bar charts. If I disable the gauges then I no longer get this error. So, the problem lies with the function which creates my gauges. Here it is:

var gaugeTitle = thetabs[tt].Entries[tt2].Title;
var currentValue = (thetabs[tt].Entries[tt2].CurrentValue > 0)?thetabs[tt].Entries[tt2].CurrentValue:0;  
var baseValue = thetabs[tt].Entries[tt2].BaseValue;  
var centreValue = thetabs[tt].Entries[tt2].CentreValue;  
var generated = thetabs[tt].Entries[tt2].Generated;  
var gaugeData = thetabs[tt].Entries[tt2];// this data populates the gauge store  

// now we create a store for the gauge  
var gaugeStore = Ext.create('Ext.data.Store', {  
storeId: 'gaugeStore',  
fields: [{'name':'BaseValue','type':'int'},  
{'name':'CentreValue','type':'int'},  
{'name':'CurrentValue','type':'int'},  
{'name':'Generated'},  
{'name':'Title'},  
{'name':'Type'}],  
data: gaugeData  
});  

gaugeStore.setData(gaugeData);  // Use the add function to add records or model instances.

// set the maximum value on the gauge, then round it to whole number    
var gaugemax = (thetabs[tt].Entries[tt2].CentreValue>10)?  thetabs[tt].Entries[tt2].CentreValue*2:10;  

// ensure gauge max is never less than currentValue  
if(gaugemax < currentValue){  
gaugemax =  currentValue+(currentValue*.1); // use 110% of currentValue   
}  
// show whole numbers only  
gaugemax = Math.round(gaugemax/10)*10;   

//set gauge colour  
gaugeColor = setGaugeColour(siteName);  

/// new gauge  
var chartgx = {  
cls: 'thegauge',  
itemId: 'gauge'+tt2,  
xtype: 'chart',  
shadow: true,  
store: gaugeStore,  
width : 'auto',  
animate: true,  
insetPadding: 50,  
axes: [{  
type: 'gauge',  
position: 'gauge',  
minimum: 0,  
maximum: gaugemax,  
steps: 10,  
margin: 10  
}],  

series: [{  
type: 'gauge',  
minimum: 0,  
maximum: gaugemax,  
steps: 10,  
margin: 10,  
angleField: 'CurrentValue',  
donut: 30,  
colorSet:[gaugeColor,'#e1e1e1']  
}]  
}; 


                            `

Can someone please advise me how to correct.

Answer 1

Removing the axes from the gauge seems to have fixed this problem, but now I am presented with another :-(