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:
Code:
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:
Code:
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:
Code:
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.