GChart irregular time-series chart?

[malcolm...@gmail.com]

Has anybody used GChart (or any other charting package) to display
a line chart of an irregular time series?

I want to plot data using GChart that has regular hourly, half-hourly
and
one-minute time points, with significant data shifts plotted in
between the
regular times.

For instance:

X (time) Y (value)
28/01:00pm 15.5
28/12:30pm 15.4
28/12:00pm 14.7
28/11:30am 14.0
28/11:00am 14.3
28/10:30am 11.9
28/10:12am 13.7
28/10:00am 14.4
28/09:30am 12.4
28/09:00am 11.7
28/08:30am 11.2
28/08:00am 12.9
28/07:30am 12.9
28/07:00am 11.4
28/06:30am 12.5
28/06:00am 11.6
28/05:30am 12.8
28/05:00am 12.2
28/04:46am 12.5
28/04:24am 13.0
28/04:11am 12.9
28/03:51am 12.9
28/03:30am 12.9
28/03:00am 13.0


Two schemes that are used in other software are:

(1) Excel:

http://blogs.msdn.com/excel/archive/2007/12/17/intraday-time-series-charts.aspx

where each day is expressed as a whole floating point number, with
each time of day
expressed as a fraction of that day number.

(2) GNUPLOT

http://www.gnuplot.info/docs/node76.html#1408

where time is expressed as seconds since 2000.


Any suggestions would be most welcome!

Mal.

[John Gunther]

This GChart tutorial by Ben Martin provides one approach:

http://www.linux.com/feature/132854

Ben's basic approach is to use the GChart's addTick and addPoint
methods in concert, within a single "visit" method. This is handy
when every point gets an x-axis tick-label, but in your case,
some of the irregularly spaced points probably won't have tick
labels, so also consider a variation on Ben's approach that
generates the tick labels in a separate loop from the one that
adds your points. Note also that unlabeled intermediate ticks
can be added by setting the tick labels to "".

You might find the Date.getTime() method helpful for converting
your dates into a number of milliseconds since Jan 1, 1970
that is acceptable for a GChart x value.

To format your dates appropriately with the GWT
DateTimeFormat class see this article by "zundel":

http://code.google.com/p/bunsenandbeaker/wiki/DevGuideDateAndNumberFormat

Note that the first argument of the GChart addTick method would again
have to be the value returned by the Date.getTime method applied to
your date values.

Unfortunately, the default hovertext will then show number of seconds
since Jan 1, 1970 a comma, and then the Y value, instead of your
nicely formated tick labels. To keep these relatively meaningless
long integer values out of the hovertext, you may want to simply
elide them from the hovertext via, say:

getCurve().getSymbol().setHovertextTemplate("y=${y}");

Ideally, Client-side GChart would provide direct support for
converting, say, the number of seconds since Jan 1, 1970 into
various common date-time formats, say, via appropriate extensions
to its Axis.setTickLabelFormat method (sort of like your your
GNUPLOT link does it). Date formating of tick labels would then
be as easy as number formatting now is.

Beware: Though I think it should work, I have not actually tried any
of the above myself.

Right now, I'm focused on getting a Chart 2.1 out the door (goal
is to make chart updates faster, and fix various bugs). This
seems like a very good idea for what to do after that, though.
Please consider entering any ideas you may have of how best to
make formatting date-time axis labels easier into Client-side
GChart's issue tracker.

Thanks for using Client-side GChart!

John Gunther
http://gchart.googlecode.com

On Apr 28, 12:44 am, "m.gor...@bom.gov.au" <malcolm.gor...@gmail.com>
wrote:
> Has anybody usedGChart(or any other charting package) to display

> a line chart of an irregular time series?
>

> I want to plot data usingGChartthat has regular hourly, half-hourly

> http://blogs.msdn.com/excel/archive/2007/12/17/intraday-time-series-c...

[John Gunther]

Malcom,

I just released Client-side GChart 2.02 to make creating charts with
time-stamped data sequences like the one in your post easier.

There's also a new Chart Gallery chart that shows how to display the
date-stamped sequence in your post using the new version:

http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/client/package-summary.html#GChartExample12

The new version allows you to use GWT DateTimeFormat formatting
patterns (e.g. "mm/dd/yyyy") to transform tick locations into tick
labels. For details, see the Axis.setTickLabelFormat method's
javadocs:

http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/client/GChart.Axis.html#setTickLabelFormat%28java.lang.String%29

Thanks for taking the time to clearly describe this issue in your
post--it was very helpful to the product.

John Gunther

On Apr 28, 12:44 am, "m.gor...@bom.gov.au" <malcolm.gor...@gmail.com>
wrote:

> Has anybody usedGChart(or any other charting package) to display

> a line chart of an irregular time series?
>

> I want to plot data usingGChartthat has regular hourly, half-hourly

> http://blogs.msdn.com/excel/archive/2007/12/17/intraday-time-series-c...

[malcolm...@gmail.com]

John,

I'm very sorry for not seeing your post until now.

I have just one suggestion right now from using GChart, and then I'll
take
some time to go through your GChart enhancements and incorporate them.

It would be useful if the addTick() method allowed line-break
formatting.
I would like to be able to break, say, "9am Wed" so that it is
displayed as:

"9am
Wed"

I've tried "9am\nWed" and "9am<br>Wed" but without success.

Is that perhaps tricky to implement, given the need to map that to
pixel locations?
If so, maybe an addTick() method with an offset.

Once again, sorry to have missed your post.

Mal.


On May 3, 6:39 am, John Gunther <johncurtisgunt...@yahoo.com> wrote:
> Malcom,
>
> I just released Client-sideGChart2.02 to make creating charts with

> time-stamped data sequences like the one in your post easier.
>
> There's also a new Chart Gallery chart that shows how to display the
> date-stamped sequence in your post using the new version:
>

> http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/clie...

>
> The new version allows you to use GWT DateTimeFormat formatting
> patterns (e.g. "mm/dd/yyyy") to transform tick locations into tick
> labels. For details, see the Axis.setTickLabelFormat method's
> javadocs:
>

> http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/clie...

>
> Thanks for taking the time to clearly describe this issue in your
> post--it was very helpful to the product.
>
> John Gunther
>
> On Apr 28, 12:44 am, "m.gor...@bom.gov.au" <malcolm.gor...@gmail.com>
> wrote:
>
> > Has anybody usedGChart(or any other charting package) to display

> > a line chart of anirregulartime series?

[malcolm...@gmail.com]

John,

I tried out

getXAxis().setTickLabelFormat("=(Date)h:mmaa");

and it works perfectly. It would probably be a good idea to allow line
breaks, or simply HTML,
in the format. Nevertheless, it will satisfy most time-series graphing
requirements that users of
GChart will have.

However, I've got something more in mind, and it might be a very easy
thing for you to add to GChart.

The dataset I will be displaying is from midnight yesterday until a
few minutes ago today. That means
the tick intervals are harder to calculate. What I have found is it's
simple to just add an if statement
within the loop that it calling

curve.addPoint(millis, value);

and see whether we have reached a round number in terms of time:

static final int TICK_INTERVAL_HOURS = 2;
...
if (hour % TICK_INTERVAL_HOURS == 0 && minute == 0) {
getXAxis().addTick(millis, tickString);
}

This removes the need for GChart to anticipate a wide range of time-
series requirements. The calculations
are dead simple, using a Date object to get back hour and minute
numbers. And the worst that can happen
is that a round numbered time may be missing. That's extremely rare
with the data I am plotting. But if it
were a problem, it would be easy to step along intervals in the
epochal time instead. In fact, that may be
a better solution.

If the addTick() method were to accept an offset

int offset = 10; // Pixels below default tick offset.
getXAxis().addTick(millis, tickString, offset);

I would be able to calculate and plot coarser time units as well, such
as day (Wed) and date, without them
repeating at the same frequency as the the finest tick frequency (2
hourly in the above code).

In other words, I could do two, maybe three, rows of time information:

(1) Minutes, such as 0 15 30 45
(2) Hours, such as 3pm 4pm
(3) Days and dates, such as Wed 11 June Thu 12 June

These would all fit neatly below, with no risk of messy overlap.

This may be very easy for you to add to the library (an addTick()
method with offset) I hope.

And it is very easy to code as an end-user of the GChart library.

I am responsible for one of the highest hit weather pages on the most
hit government website in my country.
Management has been unwilling to authorise sophisticated charts
because of the bandwidth costs of images.
Using GWT and GChart promises to get around that restriction, because
of course data-only is shipped.
(It took some time to convince people that client-side charts are
technically possible, and that it's written in Java.)
After the first few iterations of the GChart charts, management has
sat up and taken notice.

What do you think?

Mal.


On Jun 11, 1:54 pm, "m.gor...@bom.gov.au" <malcolm.gor...@gmail.com>
wrote:

> John,
>
> I'm very sorry for not seeing your post until now.
>

> I have just one suggestion right now from usingGChart, and then I'll
> take
> some time to go through yourGChartenhancements and incorporate them.

[John Gunther]

Mal,

I like your suggestions and it's very encouraging to hear that the
date casting prefix feature works well for you and especially about
your anticipated weather application. Please send a link once it
becomes publicly accessible (I'm looking for real-live GChart
applications to link to from GChart's home page).

Right now, I'm focused on making GChart update a lot faster (planned
for 2.1) and fixing off-by-one pixel bugs and such. Please consider
adding your request to GChart's issue tracker (a title and a link back
to your post is all that's really needed).

Something to think about re: packaging your feature: Ticks are really
annotated points behind the scenes but they don't have all of an
annotated point's capabilities (no Point.setAnnotationYOffset
equivalent, for example). Would be nice to somehow address this
inconsistency as part of implementing your feature.

Even with the current version, you probably can do what you want if
you get a bit tricky:

* Create a special curve of annotated (Point.setAnnotationText("the
label")) points centered on the x position of the tick label, whose y
position equals your chart's "yMin" (thus placing them right along the
axis). Be sure it is configured so it's elided from any chart key you
may be using.

* Use a SQUARE point symbol with a width and height of 0 (so the
symbol itself won't take up any space or be visible on the chart).

* Then use the Point.setAnnotationYOffset(-10) method to push the
label down 10px.

* Add as many points as you require, each with appropriate offsets,
for all the y-offset tick-like labels you require. (You'll probably
want to use the ordinary tick for the very first line of tick labels,
and for the tick itself).

Should work, but have not actually tried the above workaround. If you
try it, please post back.

John C. Gunther
http://gchart.googlecode.com


On Jun 11, 2:08 am, "m.gor...@bom.gov.au" <malcolm.gor...@gmail.com>
wrote:
> John,
>

> I tried out
>
> getXAxis().setTickLabelFormat("=(Date)h:mmaa");
>
> and it works perfectly. It would probably be a good idea to allow line
> breaks, or simply HTML,
> in the format. Nevertheless, it will satisfy most time-series graphing

> requirements that users ofGChartwill have.

>
> However, I've got something more in mind, and it might be a very easy
> thing for you to add toGChart.
>
> The dataset I will be displaying is from midnight yesterday until a
> few minutes ago today. That means
> the tick intervals are harder to calculate. What I have found is it's
> simple to just add an if statement
> within the loop that it calling
>
> curve.addPoint(millis, value);
>
> and see whether we have reached a round number in terms of time:
>
> static final int TICK_INTERVAL_HOURS = 2;
> ...
> if (hour % TICK_INTERVAL_HOURS == 0 && minute == 0) {
> getXAxis().addTick(millis, tickString);
> }
>

> This removes the need forGChartto anticipate a wide range of time-

> Using GWT andGChartpromises to get around that restriction, because

> of course data-only is shipped.
> (It took some time to convince people that client-side charts are
> technically possible, and that it's written in Java.)

> After the first few iterations of theGChartcharts, management has

[malcolm...@gmail.com]

Hi John,

Yes, the focus on speed will be important for my application. If all
goes well,
it should be out onto the web in about three or four months.

I will code up the tick string offset following your tips on how to do
it.
If it's generic enough, you might be able to incorporate it into the
GChart library.

I discovered this morning that GChart handles Double.NaN nicely,
leaving a
gap in the line, which in my case means a missing value.

I'll keep you informed of significant progress.

Mal.

On Jun 13, 3:29 am, John Gunther <johncurtisgunt...@yahoo.com> wrote:
> Mal,
>
> I like your suggestions and it's very encouraging to hear that the
> date casting prefix feature works well for you and especially about
> your anticipated weather application. Please send a link once it
> becomes publicly accessible (I'm looking for real-liveGChart

> applications to link to fromGChart'shome page).
>
> Right now, I'm focused on makingGChartupdate a lot faster (planned

> for 2.1) and fixing off-by-one pixel bugs and such. Please consider

> adding your request toGChart'sissue tracker (a title and a link back

> to your post is all that's really needed).
>
> Something to think about re: packaging your feature: Ticks are really
> annotated points behind the scenes but they don't have all of an
> annotated point's capabilities (no Point.setAnnotationYOffset
> equivalent, for example). Would be nice to somehow address this
> inconsistency as part of implementing your feature.
>
> Even with the current version, you probably can do what you want if
> you get a bit tricky:
>
> * Create a special curve of annotated (Point.setAnnotationText("the
> label")) points centered on the x position of the tick label, whose y
> position equals your chart's "yMin" (thus placing them right along the
> axis). Be sure it is configured so it's elided from any chart key you
> may be using.
>
> * Use a SQUARE point symbol with a width and height of 0 (so the
> symbol itself won't take up any space or be visible on the chart).
>
> * Then use the Point.setAnnotationYOffset(-10) method to push the
> label down 10px.
>
> * Add as many points as you require, each with appropriate offsets,
> for all the y-offset tick-like labels you require. (You'll probably
> want to use the ordinary tick for the very first line of tick labels,
> and for the tick itself).
>
> Should work, but have not actually tried the above workaround. If you
> try it, please post back.
>

> John C. Guntherhttp://gchart.googlecode.com