Thursday, November 22nd, 2007

Chronoscope: GWT based charting library

Category: GWT, JavaScript, Library, UI

Ray Cromwell and the Timepedia team have released Chronoscope, a charting and visualization platform for Google Web Toolkit, as open source.

Chronoscope provides a rich Java API for you to play with:

  • Canvas abstraction for drawing vector graphs
  • Graph Style Sheets abstraction for configuring the look-and-feel of charts
  • Scalable multiresolution rendering supporting up to tens of thousands of points
  • Zoom and pan at interactive frame rates, from centuries to milliseconds
  • Auto-ranging, auto-layout of chart axes and ticks.
  • Auto-legend, and mini-chart Overview
  • Add pushpin markers, domain and range markers, and overlays like Google Maps
  • Bookmarkable chart state, works with Back button
  • JS interopability. GWT API can be used by pure Javascript programmers
  • Microformat support. Charts can be configured without programming.
  • Server-side Font assistance. Render rotated text.
  • Portable, Chronoscope is not tied to GWT, can be used to render from servlets, applets, or other environments.

Chronoscope Demo

We also have a piece over at devphone on GWT and Android: A marriage made in heaven?

Posted by Dion Almaer at 8:00 am
12 Comments

+++--
3 rating from 41 votes

12 Comments »

Comments feed TrackBack URI

This is nice but uses a lot of resources. The key/mousebindings are welcome and work well. I could not find any bugs while testing around.

Comment by Alex — November 22, 2007

Too S… L… O… W…. ! !

Comment by SloMo — November 22, 2007

There sure are a lot of abstractions in web tool kits and ajax libraries. When are the browser vendors going to get off their asses and start doing things in a standardized way so abstractions aren’t necessary?

Comment by Andy — November 22, 2007

@SloMo:
Could you tell me which browser you’re using, and which CPU you have? Also, whether you have Firebug enabled if Firefox? On my system, under Safari and Firefox, the scrolling/zooming is as fast as Google/Yahoo finance charts. (Mac Pro). If there’s a performance problem, I’d like to identify it and fix it (I can scale the number of points plotted while animating/dragging) One thing I’ve noticed that slows it down is having a GMail chat window open.

@Alex: It uses a lot of resources if you load large datasets, like the 600kbyte Fedfunds (18,000 points), but if you’re plotting trivial datasets like Dojo or Plotkit, it uses less resources and is much more on par with a typical GWT application. You can also configure it in non-interactive mode (no zooming/panning) which cuts down on resources, as well as using server-side rendering if you don’t want any JS at all.

I am concerned however by the performance and resource concerns and I want to improve on them as much as possible, so if you have any advice or feedback, please email me personally or send to chronoscope@googlegroups.com

Thanks,
-Ray

Comment by Ray Cromwell — November 22, 2007

@Andy: Right on Brother! That goes for you especially Microsoft! :-p

Comment by Ray Cromwell — November 22, 2007

Opps, I found a issue in the animation routine that causes the interpolation to lag on some platforms (tried it on my PC), I’ll put up a new build after Thanksgiving which should fix some of the perceived slowness when animating.

Sorry bout that,
-Ray

Comment by Ray Cromwell — November 22, 2007

Ray – Firefox 2.0.0.9, Linux, 2.0 GHz Pentium4 (I know – don’t laugh), 512M RAM.

The Flash-based Google finance charts are around 10 times faster on this machine. GWT charts are DHTML-based, I’m guessing?

Comment by SloMo — November 22, 2007

@SloMo,
It uses the Safari/WHATWG element, in the next version, it will use Flash. When animating, the chart draws a reduced resolution version of the curve and then at the end, switches to the high res version (rendering hundreds or thousands of points). One problem is, if you’re dragging or pressing the buttons multiple times, the last step can take very long on slower machines, so the animation seems to get stuck.

The other issue is, it renders 8 frames of animation no matter what. On Safari and FF (and a 3Ghz PC), I had no problems getting over 8 frames per second, but I didn’t test it on FF Linux. I’m going to switch it to a time interpolated animation so that transitions take 1 second no matter what, only the # of frames changes. I’m also going to make the ‘high res’ rendering pass wait until the user has stopped inputting commands, and also tone town the resolution a little (perhaps render 1/10 the # of points)

Thanks for the help though. I happen to have a 2Ghz Dell sitting closet, so I’ll put Linux on that and use that as one of my test machines.

Happy Thanksgiving,
-Ray

Comment by Ray Cromwell — November 22, 2007

@SloMo,
I believe I have a patch which addresses the performance issue hopefully. I will publish the fix on my blog tommorow sometime, see timepedia.blogspot.com for news when it goes live. Could you try it again sometime tommorow and let me know via a blog comment or direct email to cromwellian at gmail.com. I really appreciate it, thanks.

-Ray

Comment by Ray Cromwell — November 23, 2007

there is clearly a need for such a widget – but I prefer simile timeline and timeplot still – http://simile.mit.edu/timeplot/

Comment by jon — November 23, 2007

Ok, for anyone who had performance issues I pushed a new version to the production server which I hope will have a better user experience. I recommend using the arrow keys on the keyboard to zoom around the chart. Hopefully there are no regressions.

Cheers,
-Ray

Comment by Ray Cromwell — November 23, 2007

@jon – Most of the Chronoscope look and feel can be controlled via GSS (CSS). For instance, setting the backgrounds to white and turning off gridlines would be:

plot { background-color: white; }
grid { visibility: hidden; }

Take a look at http://timepedia.org/chronoscope/docs/gss/

Putting axis labels inside the plot area is an option we
haven’t exposed in GSS yet, but someone could implement
a new RangeAxisRenderer for that if we don’t do it first.
Better control of axis label precision is also coming soon.

We mention Timeplot on our about page — it’s polished,
works great, and Stefano is awesome.

That said, we’d love to hear any specific suggestions for improvement you might have as a Timeplot user.

Comment by Shawn — November 23, 2007

Leave a comment

You must be logged in to post a comment.