PDA

View Full Version : Ext.chart.NumericAxis: maximum not autocalculated



sergids
24 Jul 2009, 12:55 AM
Hi all,

I'm displaying charts and when maximum property is not specified, it's not autocalculated. Its value is always 1.
Note: I'm using float numbers: 1.98765, 1.233456...


maximum : Number
The maximum value drawn by the axis. If it is not set explicitly, the axis maximum will be calculated automatically.

What I'm doing wrong?


panel = new Ext.Panel({
id: 'chartPanel',
autoDestroy: true,
autoWidth: true,
applyTo: panelContainer,
title: chartTitle,
layout:'auto',
tbar: [formPanel],
items: {
store: chartStore,
xtype: 'columnchart',
xField: xFieldName,
xAxis: xAxis,
yAxis: new Ext.chart.NumericAxis({
title: 'load\ntime\n(s)'
}),
series: [{
type: 'column',
displayName: 'load time',
yField: 'time',
style: {
size: columnWidth,
}
}],
chartStyle: {
animationEnabled: true,
font: {
size: 9
},
xAxis: {
labelRotation: -90
}
}
}
});

lv34
25 Jul 2009, 7:01 PM
Are you reloading your data dynamically or is it preloaded and defined once? I think the issue has something to do with rendering the page before the data is loaded.

sergids
27 Jul 2009, 2:59 AM
I'm just defining yAxis before defining chart panel like follows. It happens always, even when loading chart for the very first time.


//var maximum;
var yAxisTitle;
if(mode=='errors_timedist'){
//maximum=1;
yAxisTitle='Errors';
} else {
//maximum=15;
yAxisTitle='load\ntime\n(s)';
}
var yAxis = new Ext.chart.NumericAxis({
title: yAxisTitle
//maximum: maximum
});
after that I define my chart as follows:

panel = new Ext.Panel({
id: 'chartPanel',
autoDestroy: true,
autoWidth: true,
applyTo: panelContainer,
title: chartTitle,
layout:'auto',
tbar: [formPanel],
items: {
store: chartStore,
xtype: 'columnchart',
xField: xFieldName,
xAxis: xAxis,
yAxis: yAxis,
series: [{
type: 'column',
displayName: 'load time',
yField: 'time',
style: {
size: columnWidth
}
}],
chartStyle: {
animationEnabled: true,
font: {
size: 9
},
xAxis: {
labelRotation: -90
}
}
}
});

juanramoney
27 Jul 2009, 11:38 AM
Hi, I had the same problem, and adding the type of element in the store works for me.
for example:
{ name: 'Total', type: 'int' }

sergids
27 Jul 2009, 10:58 PM
It works great!

Thank you very much for your fast answers!

sergids
28 Jul 2009, 2:52 AM
Now when all yAxis values are lower than 1 (0.123, 0.2345, ...) the values are not shown unless:
- Defining maximum=1
- Forcing at least one yAxis value>=0.5

Any more elegant solution?

Example:



var chartStore = new Ext.data.JsonStore({
data: [
{"col1":"07/28/2009 00:02:00", "col2":0.4},
{"col1":"07/28/2009 00:10:00", "col2":0.11},
{"col1":"07/28/2009 00:18:00", "col2":0.125},
{"col1":"07/28/2009 00:26:00", "col2":0.109},
{"col1":"07/28/2009 00:34:00", "col2":0.11},
{"col1":"07/28/2009 00:42:00", "col2":0.11}
],
storeId: 'recordsStore',
fields: [{name:'col1',type:'date'},{name:'col2',type: 'float'}]
});

Ext.onReady(function(){

new Ext.Panel({
width: 700,
height: 400,
renderTo: document.body,
title: 'Column Chart with Reload - Hits per Month',
tbar: [{
text: 'Load new data set',
handler: function(){
store.loadData(generateData());
}
}],
items: {
xtype: 'columnchart',
store: chartStore,
yField: 'col2',
xField: 'col1',
xAxis: new Ext.chart.CategoryAxis({
title: 'Month'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Hits',
minorUnit: 0.1
}),
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});
});

sergids
28 Jul 2009, 3:03 AM
I answer myself:

majorUnit: 0.1