Introduction to KronoGraph

KronoGraph is a JavaScript library that provides a timeline component you can add to your web application.

The timeline component is shown here with an orange border.

KronoGraph allows you to visualize the timelines of events occurring to a set of entities. Events can involve multiple entities or just one.

This example shows emails (the events) sent between a set of people (the entities).

The scale shows you exactly when these events happened. Pan across time by dragging the main display area from left to right.

When the number of events visible on the timeline becomes very dense, KronoGraph aggregates them into a heatmap. This provides a dynamic visual summary of events, enabling you to spot and analyze high-level trends.

Scroll the main display area to zoom out, condensing the heatmap over a longer period, and zoom back in to view individual events again.

In this example the heatmap helps you identify the busiest month for email traffic.

In addition to showing events across a full timeline, KronoGraph can also summarize them according to when they occurred within a repeating unit of time, such as a day or a week.

This view is called scale wrapping and aggregates all events according to the time of day that they occurred.

The scale-wrapped view in this example helps to reveal emails sent at an unusual time of day.

KronoGraph gives you full control over timeline styling so you can bring events to life within a rich context.

Zoom in on the highlighted 'events of interest' to see what else happened at around the same time.

Now that you’ve explored the basics, take a look our gallery of showcase demos to see how KronoGraph helps in real-world use cases.