PDA

View Full Version : [SOLVED] Linechart Dipslays (Loads) Data Within a Day Only



alisyah
8 Nov 2010, 3:20 AM
Hello all, I have one problem with extjs chart, actually linechart.

My linechart are reading data from a json store. The jsonstore contains 3 fields; date, time, and val. So my data will simply will look like this:
"date":"20101102","time":"20:00:00","val":10
"date":"20101102","time":"21:00:00","val":14
"date":"20101102","time":"22:00:00","val":17
"date":"20101102","time":"23:00:00"
"date":"20101103","time":"00:00:00","val":12
"date":"20101103","time":"01:00:00","val":29
"date":"20101103","time":"02:00:00","val":22
"date":"20101103","time":"03:00:00","val":26

The first line means: date is Nov, second (2nd) 2010, time is 8 PM, and val is 10
The second line means: date is still Nov, second (2nd) 2010, time increase to one minute; it is 9 PM, and val is 14

Let's jump to the forth line
date is still Nov, second (2nd) 2010, time is 23:00:00 (11 PM), and there is no field val.
The fifth line: now date is Nov, third (3rd) 2010, time is 00 AM, and val is 12.

Actually I have daily data like above, so every date (every single day) will have 24 lines (rows) from 00:00:00 to 23:00:00.

Then I'm using linechart to graph the data. Here is the code which declares the chart:

items: [{
xtype: 'linechart',
width: 850,
height: 350,
autoScroll: true,
id: 'myChart',
store: store,
url: '../../resources/charts.swf',
xField: 'time',
extraStyle: {
legend: {
display: 'top'
},
xAxis: {
labelRotation: -90
}
},
xAxis: new Ext.chart.CategoryAxis({
title: 'Time'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Val'
}),
// rest codes come here
.....

And the problem is:
the linechart only displays (or loads?) data within a day only. If my json store contains data from date Nov 2nd to Nov 3rd, so the linechart only displays 24 dot points (00:00:00 to 23:00:00 which belongs to date Nov, 2nd).

It dosen't display any data from date Nov, 3rd. Is there something that I am missing in configuration of linechart? Or is it because of the forth line doesn't contain field val?

Thank you for any suggestion.
Alisyah.

Animal
8 Nov 2010, 3:35 AM
Your X axis should probably be an Ext.chart.TimeAxis

You will need to find the incantations for major units and minor units.

This stuff isn't even documented properly at YUI's charts.

I'm working on a similar problem now, and finding out stuff about charts by brute force since we can't read any source.

I'm looking forward to Ext 4 which will be pure Javascript+web standards charting where we can at least read the source to find out how to customize it!

Animal
8 Nov 2010, 3:37 AM
http://developer.yahoo.com/yui/docs/YAHOO.widget.TimeAxis.html

See what I mean? "blank" API docs.

alisyah
8 Nov 2010, 4:10 AM
First, thank you for replying :-)

The previous format for date field was without dash (-) symbol. But I have added that symbol recently so now the line looks like this: "date":"2010-11-02","time":"20:00:00","val":10.

I also have changed the xAxis property to become TimeAxis, include setting values for minorUnit and majorUnit. But now the linechart won't display anything. Do you have any other suggestion? or am I missing any other configuration?

I still curious if the missing field val in forth line of my first post is the problem.

Thanks.
Alisyah.

alisyah
8 Nov 2010, 6:39 PM
my xAxis works now!

date and time must be in one field like:
"datetime":"11/01/2010 00:00:00", val: 10

and date format must be using slash (/) symbol, linechart won't display anything if date format is using dash (-) symbol.

But the linechart still displays/graphs data within one day only. If in the previous it displays data of fromdate(start date), now it displays data of Nov 1 only while now it's giving spaces for data within others date.

Any suggestion/comment would be appreciated.

Thanks,
Alisyah.

alisyah
9 Nov 2010, 1:17 AM
Hello guys,

It is solved now. The date of our data must be in range of minimum and maximum date :-)

Thanks all,
Alisyah.