PDA

View Full Version : Chart with time axis is not drawn



Vitezslav
13 Aug 2012, 6:09 AM
Hello everyone!
Today I came across such a problem.
I've got such a data generating function:

window.generatedata = function ()
{
var data = [], a, b, c, t;
<c:forEach items="${bids}" var="bid" varStatus="status">
a = "${efn:formatDateTime(bid.bidDate)}";
var arr = a.split(".");
var tmp = arr[0];
arr[0] = arr[1];
arr[1] = tmp;
a = arr.join(".");
var t = new Date(Date.parse(a,"dd.mm.yyyy hh:mm"));
b = "${bid.bidPrice}";
c = "${bid.contactName}";
data.push({name: c, bid: parseFloat(b), time:t});
</c:forEach>
return data;
};


window.store = Ext.create('Ext.data.JsonStore', {
fields: ['bid', 'time', 'name'],
data: generatedata()
});

When I use this data set to draw a bid-name chart it is drawn visible:


var chart1 = function () {

var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: '??????? ??????',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff;',
animate: true,
store: store,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Bidder'
}

, {
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['bid'],
title: 'Bidding price',
minorTickSteps: 0.01,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'bid',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
} ]
}
});
};


But when I use same data set to get bid-time dependance the line is just not drawn.


var chart = function () {

var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: '??????? ??????',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff;',
animate: true,
store: store,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [/*{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Bidder'
}*/

{
type: 'Time',
position: 'bottom',
fields: ['time'],
title: 'Date',
dateFormat: 'd/m/Y H:i',
//adjustMaximumByMajorUnit:'true',
//adjustMinimumByMajorUnit: 'true'
//minorTickSteps: 0.01,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}

, {
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['bid'],
title: 'Bidding price',
minorTickSteps: 0.01,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}],
series: [{
type: 'line',
/*highlight: {
size: 7,
radius: 7
},*/
axis: 'left',
xField: 'time',
yField: 'bid',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
} ]
}
});
};

The axis scales on the other hand are chosen correctly. Can anybody help me to solve this problem? Thanks in advance!