Presenting time series of events

[yyogev]

Hi,

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/?exam...els&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.
deliveries.png

I will attach the relevant code in a separate post

Any ideas will be welcome.

Thanks,

[yyogev]

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):

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

[Condor]

You are looking for annotations.

This isn't supported by the YUI Chart swf, but there is a code fork that does.

[yyogev]

Thanks, that looks like like what I've been looking for.

[mankz]

Shameless plug: Check out the Ext Scheduler, definitely has support for showing data in a timeline fashion.

http://ext-scheduler.com/examples.html