23 August 2009 ~ 40 Comments

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:
ExtJs grid - Ext chart time axis

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:
Ext Chart without timeaxis

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!

Ext Line Chart and time axis

Updated based on questions in the ExtJs forum thread http://www.extjs.com/forum/showthread.php?t=78616

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! πŸ™‚

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide

40 Responses to “ExtJs – Working with Ext Chart and timeaxis”

  1. Andy 26 August 2009 at 17:14 Permalink

    Nice article. I have not had the chance to play with Ext charts. How does it compare to FusionCharts?

  2. Anders-Meyer EldΓΈy 28 August 2009 at 21:03 Permalink

    I’ve also worked with fusion charts – how do they compare?

  3. maksimer 29 August 2009 at 02:42 Permalink

    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. πŸ™‚

  4. Royce 1 September 2009 at 05:03 Permalink

    Here is a reference for TimeAxix

    http://developer.yahoo.com/yui/docs/YAHOO.widget.TimeAxis.html

  5. Jaygarcia@tdg-i.com 14 September 2009 at 17:48 Permalink

    Nils,

    Great blog post dude.

  6. Design Yahoo store 26 September 2009 at 10:34 Permalink

    This is nice Ext chart to use but some part on that it i cant understand.

  7. maksimer 26 September 2009 at 23:02 Permalink

    What do you not understand?

  8. Ext User 30 September 2009 at 21:31 Permalink

    nice article…

  9. vnug 2 October 2009 at 09:28 Permalink

    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.

  10. maksimer 2 October 2009 at 22:28 Permalink

    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… πŸ™‚

  11. Ext User 3 October 2009 at 01:36 Permalink

    Hi Nils

    Can we have a BarChart work with TimeAxis??
    I tried using it, but no luck…

    Would appreciate any information…
    Thank you.

  12. vnug 5 October 2009 at 09:53 Permalink

    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.

  13. maksimer 5 October 2009 at 19:45 Permalink

    Two interesting questions here. Will have a look at things to night.

  14. maksimer 5 October 2009 at 22:06 Permalink

    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?

  15. vnug 6 October 2009 at 06:51 Permalink

    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.

  16. maksimer 11 October 2009 at 22:10 Permalink

    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! πŸ™‚

  17. cheva19 16 October 2009 at 17:03 Permalink

    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

  18. maksimer 16 October 2009 at 23:29 Permalink

    cheva19,
    do you mean to just plot the points without lines?

  19. cheva19 17 October 2009 at 00:02 Permalink

    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

  20. maksimer 19 October 2009 at 00:49 Permalink

    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!

  21. cheva19 20 October 2009 at 21:16 Permalink

    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

  22. maksimer 20 October 2009 at 21:22 Permalink

    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

  23. Dan Johnson 10 December 2009 at 18:32 Permalink

    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

  24. zhuangyinqian 28 June 2010 at 11:58 Permalink

    Pls recommend me a better plugin about charting of ext2.0, thx everyone

  25. maksimer 20 July 2010 at 23:42 Permalink

    zhuangyinqian,

    If you have a look at my post about ExtJs and jQuery flot you have a great alternative.

  26. maksimer 20 July 2010 at 23:44 Permalink

    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!

  27. m4eclipse 30 September 2010 at 11:50 Permalink

    Hi, Nils, this is a good article from where I know the basic usage of time axis.

    However I meet some problems when I use it myself so I wonder if you can give me some guide?
    ————————–
    http://www.sencha.com/forum/showthread.php?111186-the-labelrenderer-of-the-time-axis

  28. proteasome 1 December 2010 at 21:00 Permalink

    Super helpful intro, just what I was looking for. Thanks!

  29. Maurice 2 March 2011 at 12:13 Permalink

    Nice article, could you kindly give an example of stackedbarchart using TimeAxis? For me the stackedbarchart is working fine if I follow NumericAxis, CategoryAxis but when I try w/ TimeAxis w/ format, the chart is not being displayed. I have also given stackingEnable:true option. Appreciate your effort/reply. Thanks

  30. maksimer 4 March 2011 at 00:23 Permalink

    @maurice: Thanks for your feedback. I’ll have a look at it. I might put up an own post about ext js stackedbarcharts. It has been too long since I did any ext chart coding.

    Best regards,
    Nils-Fredrik

    http://twitter.com/nilsfredrik

  31. Sabrina 8 June 2011 at 09:45 Permalink

    Hi!

    I’m working with a chart with a timeaxis.
    I’m using the groupby option to dinamically change chart scale.

    What are the groupby admitted values?
    groupBy: ‘year,month,day’ works, but I’d like to group by week. Is it possible? How can I do?

    Thanks,
    Sabrina

  32. bindupavan 18 July 2011 at 15:39 Permalink

    Can we pass data values to Ext.data.store dynamically from the cfc/cfm templates to render a chart

  33. gouse 27 September 2011 at 08:59 Permalink

    I want to know can we use ext chart in extjs 1.2 version please provide the solution

  34. gouse 27 September 2011 at 09:00 Permalink

    how can we use charts in extjs 1.2 version

  35. dffdfd 24 January 2012 at 13:08 Permalink

    alert(‘sddsd’);

  36. Ilan 28 January 2012 at 22:44 Permalink

    Do you have this working in 4.0.7? I’ve tried to convert your example to Ext JS 4 and am running into problems. If I stick a javascript breakpoint in the label: { renderer: function(date) { …} } it never seems to get the dates that are configured in the var data when I have an axes: [{ type: ‘Time’, … }]. If I switch to axes: [{ type: ‘Category’, … }] it works – but then you don’t get the scaling along the y-axis. Any ideas?

  37. Wout 11 May 2012 at 13:02 Permalink

    Really thanks! This is what I was looking for. could not find this nice solution in the Ext docs.

  38. Gidget Sagaser 2 April 2013 at 04:47 Permalink

    Take your window of opportunity I say : ) Let me know what you think of this new version. The original is irreplacable but this is a nice side adventure.

  39. MikeD 19 October 2016 at 02:05 Permalink

    thanks for post. i’m thinking about converting some extjs charts to jquery flot.

    having trouble with extjs charts and itemclick events not working.
    do you have any examples of extjs charts with click listener?


Leave a Reply