PDA

View Full Version : ExtJS 4.2.0 Chart Set Axis Title



dholtke
25 Apr 2013, 12:35 PM
Maybe this is a bug?

Version ExtJS 4.2.0 commercial

Browsers FF and Chrome
I have the following chart:


xtype: 'chart',
height: 250,
itemId: 'EquipDetailChart',
width: 400,
animate: true,
insetPadding: 20,
store: 'EquipDescriptByCostFactor',
axes: [
{
type: 'Category',
fields: [
'EquipDesc'
],
title: 'Category Axis',
position: 'bottom'
},
{
type: 'Numeric',
fields: [
'Value'
],
title: 'Numeric Axis',
position: 'left'
}
],
series: [
{
type: 'column',
label: {
display: 'insideEnd',
field: 'Value',
color: '#333',
'text-anchor': 'middle'
},
xField: 'EquipDesc',
yField: 'Value'
}
]


I'm using the following to set the bottom axis title. (console test script)


var chartObj = Ext.ComponentQuery.query('#LossDetailChart')[0];
var ba = chartObj.axes.map.bottom;
ba.setTitle('Hello4');


In Chrome I get the error
TypeError: Object #<Object> has no method 'setTitle'


In FF I get:

TypeError: inflections is undefined /ext-all-debug.js
Line 61590

I have checked the axis object in firebug, it shows a setTitle method and that "ba" is axis object. I just can't execute the setTitle method.

I have also tried
var ba = chartObj.axes.get('bottom'); to declare the axis object, but I get the same result.

slemmon
26 Apr 2013, 8:54 PM
The following worked for me in 4.1.3 and 4.2:



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});


var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});


Ext.widget('button', {
renderTo: Ext.getBody()
, text: 'Set Title to "New Title"'
, handler: function () {
chart.axes.map.bottom.setTitle('New Title');
}
});

dholtke
29 Apr 2013, 4:49 AM
I figured out what causes it. The chart must have data in its store for .setTitle() to work. The way my page is structured is that I have several graphs that can be loaded by clicking on previous graphs. What I was trying to do is set the title for all the graphs from a single function, even if the the chart's store had not been loaded. This is how I was trying to set the titles before...



var chartlist = ['DepartmentChart','EquipmentByLineChart','CostFactorByLineChart','EquipDetailChart','LossDetailChart'];
var type = Ext.ComponentQuery.query('#cmbType')[0].getValue();

try
{
for(i = 0; i < chartlist.length; i++) {
chart = Ext.ComponentQuery.query('#'+ chartlist[i])[0];
console.log('#'+ chartlist[i]);
chart.axes.get('left').setTitle(type);
console.log
}
}
catch(err)
{
console.log(err);
}


Once I loaded all the stores, this function works. But if a charts store is not loaded, this .setTitle() gives you the


TypeError: Object #<Object> has no method 'setTitle'

error.

I modified my code to check to make sure a charts store is not empty before trying to set the title.