PDA

View Full Version : Please help me with chart and TimeAxis!



lufton
26 Oct 2011, 1:22 PM
First of all, sorry about my English, I'm from Ukraine, so...
That's a problem: I need to draw a chart with time (x) and category (y) axes. My store definition is:


Ext.define('TimeLineStore', {
extend: 'Ext.data.Store',
fields: ['rb', {name: 'time', type: 'time', dateFormat: 'timestamp'}, {name: 'reliability', type: 'int'}],
autoLoad: true,
listeners: {
'load': function(t, records, successful, operation){
// ??? need to change fromDate, toDate params of chart ???
}
},
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
proxy: {
type: 'ajax',
url: 'api.php',
reader: {
type: 'json',
root: 'items',
},
extraParams: {
mode: 'chart',
server_id: cfg.server_id,
start: compute_time(cfg.start),
end: compute_time(cfg.end),
},
}
}, cfg)]);
}
});

My chart definition (as item of window) is:


Ext.define('ChartWindow', {
extend: 'Ext.window.Window',
constrain: true,
height: 700,
width: 1200,
resizable: true,
layout: 'absolute',
closable: true,
title: '??????',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
height: 600,
width: 1100,
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: new TimeLineStore({
server_id: 4,
start: new Date(new Date() - 24 * 60 * 60 * 1000),
end: new Date(),
chart: me,
}),
axes: [{
type: 'Time',
grid: true,
dateFormat: 'd.m.Y H:i',
position: 'bottom',
fields: ['time'],
title: '?????',
// groupBy: 'year,day,month,hour,minute,second',
// aggregateOp: 'sum',
step: [Ext.Date.HOUR, 1],
// fromDate: new Date(new Date() - 24 * 60 * 60 * 1000),
// toDate: new Date(),
}, {
type: 'Category',
grid: true,
position: 'left',
fields: ['rb'],
title: '??'
}],
series: [{
tips: {
trackMouse: true,
width: 120,
height: 44,
renderer: function(storeItem, item) {
this.setTitle('<center><span style="color:red; text-weight: bold">' + storeItem.get('rb') + ' (' + storeItem.get('reliability') + '%)</span><br/>' + Ext.util.Format.date(new Date(storeItem.get('time')), 'd.m.Y H:i') + '</center>');
}
},
type: 'scatter',
markerConfig: {
radius: 4,
size: 4
},
highlight: {
size: 5,
radius: 5
},
axis: 'left',
color: '#ccc',
xField: 'time',
yField: 'rb',
renderer: function(sprite, record, attr, index, store) {
color = Renderers.color('reliability', 'rgb(250, 0, 0)', 'rgb(250, 240, 240)', 0, 100);
return color(sprite, record, attr, index, store);
},
}],
},
]
});
me.callParent(arguments);
}
});

My 'time' field is in timestamp like
1319661300000 is for {Wed Oct 26 2011 23:35:00 GMT+0300}
On the load my store receive this data:

{
"items":[
{"rb":"\u0422\u041e\u0418 11","time":1319594400000,"reliability":75},
{"rb":"\u0422\u041e\u0418 11","time":1319590800000,"reliability":75},
{"rb":"\u0422\u041e\u0418 11","time":1319587200000,"reliability":75}],
"min":1319587200000,
"max":1319594400000
}
When it rendered I see this picture:28899



Why point on the chart moved (shifted) somewhere aside and scaled?
Why my y axes shows 3 different values, when I have the same 3 values (\u0422\u041e\u0418 11 in unicode escape or ??? 11)? I want they all placed on the same height if they will be the same.
Should I set fromDate, toDate and minimum, maximum params of the TimeAxis? How it should be done?

Please, help me, I'm newbie in ExtJS.

lufton
27 Oct 2011, 12:54 AM
Please, do not ignore my problem, help (((