PDA

View Full Version : Chart not displayed if X and Y axes are Numeric



mycracks
28 Sep 2012, 12:11 AM
Hello everybody,
in my company we use ExtJS 4.0.7 (at the moment my boss doesn't want to upgrade to 4.1).
I have a problem with a line chart configured with both X and Y axes set to 'Numeric' and not displaying anything.
I'm sure that the data gets loaded from the server, because I've done a console.log of the store and I can see that they are there.
If I set the X axis to 'Category' I can see all the data, but I haven't got the same controls over the display as I get with 'Numeric' type, resulting in a mess of displayed labels.
My question is: how could I get the chart to work with both the axes set to 'Numeric'?
Thank you for your support.

Here is the code I use for the chart:


Ext.define('Project.view.stats.LineChart' ,{
extend: 'Ext.chart.Chart',
alias : 'widget.mylinechart',
height: 220,
width: 450,
animate: true,
insetPadding: 20,

initComponent : function() {
this.store = Ext.create('Project.store.Chartdatas');

this.axes = [
{
type: 'Numeric',
decimals: 0,
minimum: 0,
fields: ['timestamp'],
position: 'bottom',
grid: true,
title: "Date",
label: {
renderer: function(value) {
var date = new Date(value * 1000);
var label = Ext.Date.format(date, "j M") + "\n" +
Ext.Date.format(date, "H:i");
return label;
}
}
},
{
type: 'Numeric',
decimals: 0,
minimum: 0,
maximum: 10,
fields: ['value'],
position: 'left',
grid: true,
title: "Value"
}
];

this.series = [
{
type: 'line',
xField: 'timestamp',
yField: 'value'
}
];

this.callParent();
}
});


This is my model:


Ext.define('Project.model.Chartdata', {
extend : 'Ext.data.Model',
fields : [
{
name : 'timestamp',
type : 'int'
},
{
name : 'value',
type : 'double'
}
],
proxy : Ext.create('Project.proxy.DefaultProxy', {
api : {
read : '/get_chart_data'
}
})
});


And this is my Store:


Ext.define('Project.store.Chartdatas', {
extend: 'Ext.data.Store',
model: 'Project.model.Chartdata'
});


Everything is then inserted into a panel, which loads the store and displays the chart.

mycracks
28 Sep 2012, 1:35 AM
You can get a feel for exactly what is my problem by copying and pasting this code (which reproduces my problem) here: http://try.sencha.com/extjs/4.0.7/docs/Ext.chart.axis.Numeric.1/viewer.html


/*global Ext:false */
Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['xValue', 'yValue'],
data: [
{'xValue': 10, 'yValue': 2},
{'xValue': 15, 'yValue': 7},
{'xValue': 18, 'yValue': 22},
{'xValue': 23, 'yValue': 4},
{'xValue': 25, 'yValue': 13},
{'xValue': 32, 'yValue': 0},
{'xValue': 40, 'yValue': 1}
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['yValue'],
title: 'Y Axis',
grid: true,
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Numeric',
position: 'bottom',
fields: ['xValue'],
title: 'X Axis',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'line',
highlight: false,
axis: 'left',
xField: 'xValue',
yField: 'yValue'
}]
});
});


and you'll notice that when you set X axis to 'Category' everything works, but when you set it back to 'Numeric' you will not see anything.