Timeline - Graph stacking results are odd

Flow
1

Hi,

I’m evaluating the timeline component to display system events (20-30 types per “day”). I followed the tutorial and used multiple datasources (IndexedContainer) to represent different event types. In the screenshots you will see several Yellow blocks that is because I reused the color for several types.

My issue is that I get strange results with timeline.setGraphStacking(false)!

I attached some screenshots with different zoom levels. I can’t really describes the behavior but as you can see on the screenshots it doesn’t look right. As an example there are unattached blocks with whitespace inbetween. When you zoom out/in the visualization is completely changed. Disabling GraphStacking works fine.

Thanks!

Screenshot1: http://i.imgur.com/aHG9V0Q.png
Screenshot2: http://i.imgur.com/GP2aXtw.png

2

If anyone is interested I was able to narrow down the problem and actually resolve it.

I added the Timeline to a VerticalLayout component and set a fixed pixel height size (setSize(“300”)). If I set the Size to for instance 100% the issue does not occur.

3

I have to correct my post above. That issue was not with sizing - it just looked better.

I finally found the problem.

With Stacked Columns in the Timeline chart every Datasource needs to have the exact same order of the time otherwise it creates a mess.