ChronoGrapher i.e. Simile Timeline for Vaadin!

Hi!

I just released a very experimental first version of the ChronoGrapher. The ChronoGrapher is a Vaadin wrapper for the
gwt-similetimeline
which is gwt wrapper for the
Simile Timeline
javascript library. This experimental release is currenlty for the Vaadin 6.8.x only. I will continue working with this and try to release Vaadin 7 version as soon as possible.

On the longer run, my intention is to write the gwt wrapper side from the scrathes using the tools that the modern gwt 2.5 offers. But that will take more time. Before that, please, play with this experimental version. And, please, tell me about any issues or other concerns etc.!

You could find the ChronoGrapher add-on and the Quick Start Guide from the Directory:
http://vaadin.com/directory#addon/chronographer

Cheers,
Johannes

Hi!

I just made rather significant upgrade to the ChronoGrapher add-on. The ChronoGrapher supports now also custom theming, e.g. you can change event icons and colors on the server side. Please, have a fun with the ChronoGrapher, and please let me know if you like it or if you found issues from it :slight_smile:

Johannes

Hi Johannes,
Could you please tell me where I can get some examples (source code of demo maybe)?
Or maybe there is some sort of wiki where I can get information about “How to use”?

Thanks,
Leonid

Hi Leonid!

Unfortunatelly, the only current Vaadin example is the one in the source code
https://github.com/johannest/similetimelineforvaadin/blob/master/timeline/Cronograma/src/main/java/org/vaadin/chronographer/TimelineApplication.java
. I’ll add more examples with the next release 0.0.4.

Johannes

Hi everybody!

The ChronoGrapher just updated to the version 0.0.4. This would be the last Vaadin 6 version of the add on. I’ll start working on converting the add-on into Vaadin 7, when I’ll have time to work with this project again.

The newest version 0.0.4, contains the newest Simile Timeline javascript libraries, one more example case, and some bug fixes. I also migrated needed gwt sources from the gwsimiletimeline under this project to make it easier to use the add on (no need to add gwt-simile-timeline.X.jar into your project any more).

Best regards, Johannes

Hello,

There has been some obscurities and pitfalls how to quick start with ChronoGrapher. That in my mind I created a detailed Quick Start tutorial
https://github.com/johannest/similetimelineforvaadin/wiki/Quick-Start-with-ChronoGrapher-(using-maven)

Best regards, Johannes

I like the name :slight_smile: And a very nice add-on as well!

I am trying to implement timeline for vacations planning. I noticed that Chronographer draws events in free (non-crossing with other events) places of the lines. If required time period is free in upper line then the event is drawn there. But if it is already busy then the event is drawn on below line.

Is it possible to draw required (e.g., non-crossing, sorted by name) events on the same line with Chronographer?

Thanks,
Leonid

Hi!

First Vaadin 7 compatible version of ChronoGrapher is now released.


http://vaadin.com/directory#addon/chronographer


http://vaadin.com
[quote=Leonid Vay]
I am trying to implement timeline for vacations planning. I noticed that Chronographer draws events in free (non-crossing with other events) places of the lines. If required time period is free in upper line then the event is drawn there. But if it is already busy then the event is drawn on below line.

Is it possible to draw required (e.g., non-crossing, sorted by name) events on the same line with Chronographer?

Thanks,
Leonid
[/quote]

Hi Leonid,

Sorry for long delay. Do you still have the problem without solution?

Best regards, Johannes

Just having a look at this plugin, and I can’t seem to find a method to add events to bands? i.e have 5 bands in the timeline with different events in each. In the gwt components it seems that this is done by BandOptions and providing an event provider?

Are these methods exposed in the plugin?

~Ben

In addition to this, I can’t seem to get an overview band to work? Setting the band to overview mode true still has event text, and even setting setEventText(false) still shows the event text.

Are these methods not fully implemented? or am I doing something wrong?

~Ben

Hi Guys,

I’m having issues initializing ChronoGrapher. The widgetset is compiling OK, but when I load a timeline into the UI I get the following ClientException:

(TypeError) stack: $init_8@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:788 execute_87@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:895 execute_0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:706 apply@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:401 entry0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:451 entry_0/<@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:436 scheduleFixedDelayImpl/<@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:738 setTimeout0/timerId<@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:959 fileName: http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView lineNumber: 788 columnNumber: 4: $wnd.Timeline is undefinedcom.google.gwt.core.client.JavaScriptException: (TypeError) stack: $init_8@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:788 execute_87@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:895 execute_0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:706 apply@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:401 entry0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:451 entry_0/<@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:436 scheduleFixedDelayImpl/<@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:738 setTimeout0/timerId<@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:959 fileName: http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView lineNumber: 788 columnNumber: 4: $wnd.Timeline is undefined
at Unknown.$init_8(Unknown Source)
at Unknown.execute_87(Unknown Source)
at Unknown.execute_0(Unknown Source)
at Unknown.apply(Unknown Source)
at Unknown.entry0(Unknown Source)
at Unknown.entry_0/<(Unknown Source)
at Unknown.scheduleFixedDelayImpl/<(Unknown Source)
at Unknown.setTimeout0/timerId<(Unknown Source)
at Unknown.anonymous(Unknown Source)


When I run the same UI in Safari I get a slightly different exception:

(TypeError) stack: $init_8@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:802:37 execute_87@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:909:10 execute_0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:707:23 apply@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:402:26 entry0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:452:21 http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:437:20 http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:739:32 http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:112:9 line: 802 sourceURL: http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView: ‘undefined’ is not an object (evaluating ‘$wnd.Timeline.ClassicTheme’)com.google.gwt.core.client.JavaScriptException: (TypeError) stack: $init_8@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:802:37 execute_87@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:909:10 execute_0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:707:23 apply@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:402:26 entry0@http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:452:21 http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:437:20 http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:739:32 http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView:112:9 line: 802 sourceURL: http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView: ‘undefined’ is not an object (evaluating ‘$wnd.Timeline.ClassicTheme’)
at Unknown.$init_8(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@37)
at Unknown.execute_87(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@10)
at Unknown.execute_0(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@23)
at Unknown.apply(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@26)
at Unknown.entry0(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@21)
at Unknown.anonymous(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@20)
at Unknown.anonymous(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@32)
at Unknown.anonymous(http://localhost:8090/MSCApp/v/?restartApplication&debug=yes#!ScheduleView@9)

I’d appreciate some assistance on this one. Am I not initializing something correctly?

Thanks,
~Ben

Following up on the above error: I get this exception only when running the Application in a non-root URL.

If the application is running on “/” ChronoGrapher inits OK.
If I run the application on “/v” sub URL, ChronoGrapher throws the exception above.

Any thoughts on why this might be?

There might well be something specific to ChronoGrapher behind this, but anyway a general thing to check just in case: If you map the application to some other URL than the root of the application, make sure that also /VAADIN/* is mapped to the same servlet (or otherwise serves the correct static resources).

Hi Henri,

Thanks for the input. Yes the /VAADIN/* seems to be mapping correctly. Based on my work today, what I can see is the following:
On the version that works - localhost:8080/MSCApp
/v

This GET request succeeds: http://localhost:8080/MSCApp/VAADIN/widgetsets/mscwidgetset/ajax/api/simile-ajax-api.js?bundle=false

On the broken version - localhost:8080/MSCApp/v/
This get request does not return the javascript:
http://localhost:8080/MSCApp/[b]
v/
[/b]VAADIN/widgetsets/mscwidgetset/ajax/api/simile-ajax-api.js?bundle=false

it returns:

html, body {height:100%;margin:0;}
You have to enable javascript in your browser to use an application built with Vaadin.

And as such, the widgetset throws a null pointer exception - presumably because it couldn’t load something from that javascript file.

The servlet mapping is as follows (based on grails/vaadin plugin):

VaadinServlet 0
/VAADIN/


VaadinServlet 0
/v/

Hi Ben,

Which version of ChronoGrapher and Vaadin you are using?

Regards, Johannes

Hi Johannes,

I am using the vaadin 7 version. Both 0.1 and 0.2 have the same issue.

~Ben

OK, I was able to reproduce the issue. I’ll try to find a solution…

Johannes

Thanks Johannes. Let me know if I can help at all.