PDA

View Full Version : Chart with type 'line' does not connect points...



gilaras
26 Jan 2012, 3:26 AM
Hi there,

I wanna use a chart in my new ExtJS4 application.
The axes render just fine, and I get a line, too; but it does not make any sense. Here's a screenshot of my problem (although i disabled the labeling of the x-axis meanwhile...):

31039
I hardcoded the data into my store, it looks like this:

Ext.define('MR.store.ResultChartStore', {
extend: 'Ext.data.Store',
model: 'MR.model.ResultPoint',
data: [
{rings: 400, date: new Date(1970, 1, 1,0,0)},
{rings: 200, date: new Date(1970, 1, 2,0,0)},
{rings: 256, date: new Date(1970, 1, 3,0,0)},
{rings: 356, date: new Date(1970, 1, 4,0,0)},
{rings: 375, date: new Date(1970, 1, 5,0,0)},
{rings: 378, date: new Date(1970, 1, 6,0,0)},
{rings: 352, date: new Date(1970, 1, 8,0,0)},
{rings: 107, date: new Date(1970, 1, 9,0,0)},
{rings: 254, date: new Date(1970, 1, 10,0,0)},
{rings: 285, date: new Date(1970, 1, 11,0,0)},
{rings: 100, date: new Date(1970, 1, 12,0,0)},
{rings: 0, date: new Date(1970, 1, 13,0,0)},
{rings: 248, date: new Date(1970, 1, 14,0,0)},
{rings: 354, date: new Date(1970, 1, 15,0,0)},
{rings: 398, date: new Date(1970, 1, 16,0,0)},
{rings: 400, date: new Date(1970, 1, 17,0,0)},
{rings: 255, date: new Date(1970, 1, 18,0,0)},
{rings: 128, date: new Date(1970, 1, 19,0,0)},
{rings: 100, date: new Date(1970, 1, 20,0,0)}
]
});

My chart looks like this:

{
xtype: 'chart',
width: 600,
height: 300,
theme: 'Base',
store: 'ResultChartStore',
axes: [
{
title: 'Ringe',
type: 'Numeric',
position: 'left',
fields: ['rings'],
minimum: 0,
maximum: 400,
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
},
{
title: 'Zeit',
type: 'Time',
label: {
renderer: function() {
return '';
}
},
position: 'bottom',
fields: ['date']
}
],
series: [
{
type: 'line',
hightlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
fill: true,
xField: 'date',
yField: 'rings',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}

}
]
}

I really can't find my mistake, and I read documentation again and again and went along the kind of "tutorial" in the docs ... But it just won't work :/

Anyone can spot my mistake and tell me what to do to get it working? :-)

Thanks in advance and greetz
gilaras

Edit: I think it draws a line through each point, but it doesn't connect them ... is this right or am I looking in the wrong direction? :D

gilaras
8 Feb 2012, 1:41 AM
axis: 'left'

has to be

axis: ['left', 'bottom']