Possible to plot Timeline and Graph on top of each other?

[DanTulovsky]

Hi.

Is it possible to plot Timeline and Graph on top of each other? If I specify the same container, then the graph ends up under the timeline. I'd like both to be plotted on top of each other.

Thank you
Dan

[AlexDM0]

Currently that is not possible. It is something we plan for future releases though. Maybe @josdejong could give you a way to do this with custom constructors but I don't think we can do this at the moment.

Regards,

Alex

[josdejong]

You will have to merge Timeline.js and Graph2d.js into one (located here). They both share the same core, Core.js.

[jarekpelczynski]

I need help to create something like this (attached image). Is this possible?

[AlexDM0]

Hi Jarek,

This is not possible at the moment, at least, not out of the box. We do eventually want to modularize the Graph2D and merge it with the timeline as much as we can but this cannot be done now.

However, you could 'fake' this. You can create 3 graph2d's and plot them under each other, you can then hide the X axis from the two top graphs, hide the Y axis from all graphs, then listen to the 'rangechange' event on each graph individually and update the ranges of the other 2 graphs to match.

This might not be seamless but it should, in theory, work.

Finally, as for the groups, put everything in a table and position everything in css so it looks good.

Regards,

Alex

[bhspencer]

One issue you have to watch out for with the approach Alex suggested is that the width of the Y axis label on the left is not constant. It changes based on the data in the graph. You have to manually set the x position of the graph or timeline under it to every time there is a change otherwise the x axis on the two won't line up precisely.

[AlexDM0]

Hi Spencer,

You can change the width with the dataAxis.width option. I know you know this because there is the other issue on this but for completeness, I wanted to put it here as well.

@jarekpelczynski The issue with the width as reported by Spencer (#510) has been solved and is awaiting release. With that, the method I mentioned above should work for you.

Regards,

Alex

[bhspencer]

Hi Alex

I didn't mean to express any unhappiness with my above comment. I just wanted to point out one of the challenges of stacking a Graph2d on top of Timeline. You are quite correct, you can set the dataAxis.width option and this is really a minWidth. As you zoom in and out of the Graph2d the width of the data axis may increase to fit the labels. When it does it will nolonger line up with the timeline. A such I believe setting dataAxis.width alone is insufficient if you want to keep the Graph2d and Timeline aligned. I found that setting dataAxis.format.left.decimals helps keep the width more constant but I still find that it is necessary to "watch" for a change in the width and adjust the position of the Timeline underneath in some circumstances.

Ben

[AlexDM0]

Hi Ben,

I agree that this solution is not optimal, however, as it stands now, this is the only way to do what jarek wants. Since this is a workaround, I don't plan on improving the options to suit this. In the future, we want a closer integration of the timeline and the graph2d, which would allow behaviour like this out of the box.

I didn't mean to imply you were negative about any of this, apologies for that.

Regards,

Alex