PDA

View Full Version : Chart example in documentation does not work



howHardCanItBe
31 Jan 2012, 7:06 PM
I am so far beyond frustrated with this framework it's not even funny, what am I missing? I took this from the documentation entry and the series does not show. Can anyone suggest any good sites with 4.x tutorials, trying to learn from the documentation had been tedious at best.



Ext.onReady(function () {
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});


var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store,
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'ga'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
]
});
});

mitchellsimoens
1 Feb 2012, 6:58 AM
To be honest, I have always had problems with the time axis. Switch it to Category and it will display but the axis labels aren't correct. To get around that:


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store,
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Category',
position: 'bottom',
fields: ['date'],
label : {
renderer : Ext.util.Format.dateRenderer('ga')
}
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
]
});

howHardCanItBe
1 Feb 2012, 8:06 AM
Could someone update the doc so the next poor noob does not lose their mind?

shprota
9 Feb 2012, 6:58 AM
The time axis seems to work when you give it field name, not an array:
fields: 'date' instead of fields: ['tdate']

Please disregard this as incorrect.

Vitezslav
14 Oct 2012, 11:54 PM
There is a problem that this mothod does not really work correct but gives the right result. But if you change 12 in the example to 17 you'll see that the chart will not really change. X-axis will not really be the time axis...