ExtJs – Working with Ext Chart and timeaxis
I am stuck in time (and dates).
ExtJs has in their version 3 launched a Chart package. I have been working on a project that uses charts quite a lot. So far it has been based on FusionCharts, a flash based commercial alternative with more than 45 different types of charts. Quite interesting and impressive. Since the rest of the front end of the application I am working on is based on ExtJs it was exciting to see their Charts package. But again, I find the Ext documentation lack. Or maybe it’s just me.
Following is a guide for using the line charts in ExtJs combined with a timeseries axis. And hopefully I manage to fill some of the holes I have found in the documentation.
First of all some basic setup:
/*
I have defined two div's in a html file:
The last one just for debug and testing purpose.
*/
// Defining the fields for the record.
var fields = [ {name: 'timestamp', type: 'date'}, 'temperature'];
// Sets up the record
var rec = new Ext.data.Record.create([
{ name: 'datetime', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{ name: 'temp' }
]);
// Creates an array with the data
var data = [
['2009-08-22 00:00:00', 10],
['2009-08-22 01:00:00', 10.2],
['2009-08-22 02:00:00', 10.6],
['2009-08-22 03:00:00', 10.7],
['2009-08-22 04:00:00', 10.8],
['2009-08-22 05:00:00', 10.6],
['2009-08-22 06:00:00', 10.9],
['2009-08-22 09:00:00', 10.6],
['2009-08-22 12:00:00', 11.2],
['2009-08-22 15:00:00', 11.5],
['2009-08-22 18:00:00', 11.7],
['2009-08-22 21:00:00', 11.9]
];
// Creates an array reader
var reader = new Ext.data.ArrayReader({}, rec);
// And finally the store
var store = new Ext.data.Store({
fields: fields,
reader: reader,
data : data
});
That is the basic stuff needed, a store, metadata about the data and the data itself.
Now, let’s first render the store to a grid to see if everything looks well.
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header:'datetime', renderer: function(date) { return date.format("d. H"); }},
{header: 'temp'}
],
renderTo: "grid",
autoHeight: true
});
This should render a grid that looks like this:
So, everything looks well. Let’s move on and make the chart!
var chart = new Ext.chart.LineChart({
height: 300,
width: 600,
store: store,
// The two following is not documented, but it's central for the linechart.
xField: "datetime",
yField: "temp",
renderTo: "chart"
});
Will produce a chart like this:
I don’t know if you have noticed the point yet. Take a close look at the data:
['2009-08-22 00:00:00', 10], ['2009-08-22 01:00:00', 10.2], ['2009-08-22 02:00:00', 10.6], ['2009-08-22 03:00:00', 10.7], ['2009-08-22 04:00:00', 10.8], ['2009-08-22 05:00:00', 10.6], ['2009-08-22 06:00:00', 10.9], ['2009-08-22 09:00:00', 10.6], ['2009-08-22 12:00:00', 11.2], ['2009-08-22 15:00:00', 11.5], ['2009-08-22 18:00:00', 11.7], ['2009-08-22 21:00:00', 11.9]
Notice what happens after 06:00:00. It goes from 1 hour steps to 3 hour steps. That’s what we need the timeaxis for!
So, let’s modify the chart setup a bit:
var chart = new Ext.chart.LineChart({
height: 300,
width: 600,
store: store,
xField: "datetime",
yField: "temp",
// This one, and the config parameter yAxis is not documented either.
xAxis: new Ext.chart.TimeAxis({
labelRenderer: function(date) { return date.format("H"); }
}),
renderTo: "chart",
});
So, how does it look now? Far better!
if you need to add day, month year or some other date parameter to the x-axis modify the labelRenderer function to:
- Day: date.format(“d”);
- Month: date.format(“m”);
- Year: date.format(“Y”);
See my post about Ext date format for more information about javascript date format
What I have problems understandig is why you find how-to-use the timeaxis in bugposts in the extjs forum… So, discussion start! 
Nice article. I have not had the chance to play with Ext charts. How does it compare to FusionCharts?
Andy
26 Aug 09 at 17:14
I’ve also worked with fusion charts – how do they compare?
Anders-Meyer Eldøy
28 Aug 09 at 21:03
I have been working with FusionCharts yes. My experience with FusionCharts is mainly taking over a project, so I have not had the change to dig into it. As far as I have seen you don’t have the timeaxis, and as long as it is populated by a xml file and not by a javascript store it’s quite stressfull to update the data. Especially when you might have situatuions where you have “holes” in the line. Of course, there might be stuff here I don’t know.
As an Ext fan I am very exited about the way I can connect my datastores to the charts and present data in such a simple manner.
But, it’s nothing near FusionCharts for advanced usage.
I have actually just hired the guys behind a jQuery alternative Flot (http://code.google.com/p/flot/) to do some customisation of their open source chartssolution and connect it to the Ext stores.
I also put in as a requirement that it should be contributed to the ext community when done. They are going to implement a timeaxis in their solution that compresses combined with the ability to draw (and I mean draw, not click and drag point by point) new lines in the chart. It will be cool!
What do you think about FusionCharts?
I have also hired a guy who made the linecharts i Ext dragable. Quite cool, and will also be contributed back to the Ext community. But, as long as it’s build on top of YUI you can’t take it any further than that.
Nils-Fredrik G. Kaland
29 Aug 09 at 02:42
Here is a reference for TimeAxix
http://developer.yahoo.com/yui/docs/YAHOO.widget.TimeAxis.html
Royce
1 Sep 09 at 05:03
Nils,
Great blog post dude.
Jaygarcia@tdg-i.com
14 Sep 09 at 17:48
This is nice Ext chart to use but some part on that it i cant understand.
Design Yahoo store
26 Sep 09 at 10:34
What do you not understand?
Nils-Fredrik G. Kaland
26 Sep 09 at 23:02
nice article…
Ext User
30 Sep 09 at 21:31
Hi Nils -
Thanks for the article. We have got two lines within a chart. We are using this for trend analysis. So, one line should show the actual data and the other we want to trend it beyond the actual data. We know how to trend and all. But, can we have two datasets to be used for drawing the lines? Would appreciate any information. Thanks, again.
vnug
2 Oct 09 at 09:28
vnug,
two datasets – do you mean two stores? Or are they both in the same store? Do you have any example code?
Sounds like it can be done…
Nils-Fredrik G. Kaland
2 Oct 09 at 22:28
Hi Nils
Can we have a BarChart work with TimeAxis??
I tried using it, but no luck…
Would appreciate any information…
Thank you.
Ext User
3 Oct 09 at 01:36
Nils,
Thanks for the response. Here is the situation -
We have actual dataset (store), from which we draw line graph (Line1) and we would like to draw another line graph (Line2) in the same chart along with Line1. We were able to draw Line1 and Line2 using a single datastore. What we would like to do is – Line2 be using it’s own datastore. Reason – Line2 is like a “trend line”, so we are predicting the future for which we do not have Actual Values for Line1. I hope you understand what we are trying to achieve. Thanks for any inputs.
vnug
5 Oct 09 at 09:53
Two interesting questions here. Will have a look at things to night.
Nils-Fredrik G. Kaland
5 Oct 09 at 19:45
Vnug,
I don’t think so. Or, it can probably be done – but you have to do some serious digging and probably rewrite parts of the store binding stuff.
As mentioned in an earlier comment I have been working on a project combining extjs stores and the jQuery chart alternative flot. It would be quite simple to do this in flot I think.
Interested in an example?
Nils-Fredrik G. Kaland
5 Oct 09 at 22:06
Nils -
If it is ok with you …. sure. I would like to check out the example code. I would appreciate if you can send it to my email address. Thanks.
vnug
6 Oct 09 at 06:51
[...] Got a comment on my previous post Ext JS Charts and timeaxis: [...]
Data from multiple stores to charts in ExtJs – jQuery flot « Extjs « A front-end development blog
11 Oct 09 at 22:09
vnug,
wrote a new post regarding your question:
http://aboutfrontend.com/2009/10/data-from-multiple-stores-to-charts-in-extjs-jquery-flot/
Happy reading!
Nils-Fredrik G. Kaland
11 Oct 09 at 22:10
ok nice article, i’m looking for any advice to how draw a simple Cartesian Chart with no lines, columns or pies around.
just some (x,y) ordered couples and a point showing em on a x,y axis chart.
I used ext charts to draw pies, columns and whatever but can’t get a way to draw my simple x,y chart…any suggestion!?
sorry for poor english
regards
daniele
cheva19
16 Oct 09 at 17:03
cheva19,
do you mean to just plot the points without lines?
Nils-Fredrik G. Kaland
16 Oct 09 at 23:29
ye i mean that , i mean u have couples like (3,5) – (7,6) – … – (10,5) and uwant to put em on a x,y axis chart.
the simplest chart ever.
thx for answering
cheva19
17 Oct 09 at 00:02
cheva19,
Interesting stuff. After doing some tests I (again) ended up looking at the YUI charts documentation that ExtJS Charts is based upon.
The simplest way to solve this, since what you are looking for is linechart without the lines, is to style the series and not display the line.
Reading the ExtJS documentation does not tell you very much, but looking at the YUI examples gives you a hint: http://developer.yahoo.com/yui/examples/charts/charts-styles.html
Replace the var chart = … code above with:
var chart = new Ext.chart.LineChart({
height: 300,
width: 600,
store: store,
xField: “datetime”,
renderTo: “chart”,
xAxis: new Ext.chart.TimeAxis({
labelRenderer: function(date) { return date.format(“H”); }
}),
series: [
{
type: "line",
displayName: "Fooo!",
yField: "temp",
style: {
lineColor: 0xffffff,
lineAlpha:.5,
borderColor:0xB5BAC8,
fillColor:0xB5BAC8
}
}
]
});
Good luck!
Nils-Fredrik G. Kaland
19 Oct 09 at 00:49
it’s a nice solution, but there’s still a problem, the charts seems not able to recognize 2 points if they share the same xAxis value…so i got what i need in the end, but not properly working.
thx for the answer ,a lot.
if u know any ext js resource site or guides, plz post a link here
regards
daniele
cheva19
20 Oct 09 at 21:16
cheva19,
I see your problem – but I don’t see a solution. Or, I don’t think there is a solution.
Interesting learning though.
Best regards,
Nils-Fredrik
Nils-Fredrik G. Kaland
20 Oct 09 at 21:22
We would like to move from Webcharts3d to these charts. We need background color strips (red/yellow/green) at various heights with line chart on top. We also need annotations and date formatting x axis. Are these available on these charts? Thanks, Dan
Dan Johnson
10 Dec 09 at 18:32
Pls recommend me a better plugin about charting of ext2.0, thx everyone
zhuangyinqian
28 Jun 10 at 11:58
zhuangyinqian,
If you have a look at my post about ExtJs and jQuery flot you have a great alternative.
Nils-Fredrik G. Kaland
20 Jul 10 at 23:42
Dan Johnson,
I haven followed the development of flot the last months. Have a look at http://code.google.com/p/flot/. If you have feature requests, you should contact the main developer, Ole Laursen. Great guy!
Nils-Fredrik G. Kaland
20 Jul 10 at 23:44