View Full Version : Presenting time series of events

22 Jul 2010, 1:53 AM

I want to draw a project time line using an ExtJS chart. My Data is a series of (day,description) points, each representing some project milestone, sorted by day (date).
Ideally, I would like to have this displayed as a line of events, all in the same Y level, with day as X axis.

The main problem: how to display a constant label, and not just the data tip, near each marker (point) ?

The only thing close to this that I was able to find this far is the data tip, but it shows only when hovering over the marker, while I would like the labels to be shown constantly.
I looked for a solution to this high and low, and the only thing I found that solves this is the highcharts library (http://www.highcharts.com/demo/?example=line-labels&theme=grid).

So far I managed to show this a a two dimensional line chart, with X a time axis using day and Y a category axis using the milestones descriptions. However, this is not what I really want. With that I am having yet another problem: the spacing between categories is too big, and labelSpacing doesn't seem to have any effect.

I will attach the relevant code in a separate post

Any ideas will be welcome.


22 Jul 2010, 5:17 AM
The chart code:

deliveries_chart = new Ext.chart.LineChart({
id: "deliveries_chart",
height: 235,
width: 580,
hidden: true,
store: store,
yField: "description",
xField: "day",
xAxis: new Ext.chart.TimeAxis({
displayName: "Date",
hideOverlappingLabels: true,
labelFunction: "format_date"
yAxis: new Ext.chart.CategoryAxis(),
extraStyle: {yAxis: {labelSpacing: 2}}

Relevant code from the store (I use some utility function to create the actual store, as part of the grid seen in the picture below the chart):

{name: "id", type: "int"}, /* for identification only */
{name: "day", type: "date", type: "date",
dateFormat: mysql_date_format_short},
sortInfo: {field: "day", direction: "ASC"}

22 Jul 2010, 5:38 AM
You are looking for annotations.

This isn't supported by the YUI Chart swf, but there is a code fork (http://www.alexandre-gomes.com/opensource/yui.php) that does.

22 Jul 2010, 5:46 AM
Thanks, that looks like like what I've been looking for.

22 Jul 2010, 6:19 AM
Shameless plug: Check out the Ext Scheduler, definitely has support for showing data in a timeline fashion.