chevron_right Demos chevron_right Timeline
Discover More
Book a live Demo

See yFiles in action

30 min • Online • No install required


For developers, PMs & tech leads

  • Quick-start walkthrough + a real integration example
  • Live Q&A with next-step recommendations

Prefer another tool over Zoom? Just say so when you book.

Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data with Zoom under its Privacy Policy.

See yFiles in action

30 min • Online • No install required


For developers, PMs & tech leads

Prefer another tool over Zoom? Just say so when you book.

Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data with Zoom under its Privacy Policy.

Timeline Demo

This demo shows how to add a timeline component to the graph.

The height of the bars in the timeline is determined by the number of node creation/removal events at each time point.

Things to try

Hover or select bars of the timeline to highlight corresponding nodes in the main graph.

Details

The timeline component in this demo does not include a timeframe rectangle or a play button, but they are by default included in the Timeline class. Make use of them by initializing a default Timeline instance and register event listeners for filter change.

The input data structure can be arbitrary, but it needs to contain information about the start and end time for each node.