Search

KronoGraph Examples

Timeline

Styling the Timeline

Styling the Timeline

Customize label area width and global timeline options.

See example

Navigation

Navigation

Control the visible time range with fit, pan, and zoom.

See example

Lens

Lens

Reveal entity names using the built-in lens control.

See example

Ping Animations

Ping Animations

Draw attention to events with ping animations.

See example

Reveal

Reveal

Click a heatmap cell to reveal and inspect its events.

See example

Expanded Rows

Expanded Rows

Expand entity rows into sub-rows for busy sequences.

See example

Font Icons

Font Icons

Decorate entities and events with font icons.

See example

Styling Items by Type

Styling Items by Type

Define reusable styles in types for consistent theming.

See example

Inherited Styles

Inherited Styles

Inherit visual properties from base types using baseType.

See example

Entities

Groups

Groups

Organize entities into a multi-level nested hierarchy.

See example

Styling Entities

Styling Entities

Change the styling of individual entities or entity groups.

See example

Connected Entities

Connected Entities

Connect entities with directional or non-directional events.

See example

Styling Glyphs

Styling Glyphs

Style glyphs decorating entities and entity type labels.

See example

Emojis

Emojis

Use emoji characters in your timeline.

See example

Ordering

Ordering

Control how entities are ordered vertically in the timeline.

See example

Spacing

Spacing

Adjust the vertical spacing between entity rows.

See example

Events

Simple Events

Simple Events

Explore the JSON object data format for the timeline.

See example

Styling Events

Styling Events

Change the styling of individual events or event types.

See example

Events with Duration

Events with Duration

Visualize events with a duration in the timeline.

See example

Event Folds

Event Folds

Group simultaneous events into collapsible folds.

See example

Multiple Recipients

Multiple Recipients

Model broadcast events from one source to many targets.

See example

Multiple Sources

Multiple Sources

Represent many-to-many transactions across entities.

See example

Gantt Chart

Gantt Chart

Visualize a sequence of processess using a Gantt chart.

See example

Event Labels

Event Labels

Display text labels on event lines with custom colors.

See example

Annotations

Styling Annotations

Styling Annotations

Customize annotation appearance with several styling options.

See example

Creating Annotations

Creating Annotations

Let timeline users annotate events with interactive annotations.

See example

Markers

Markers

Highlight points in time not tied to a specific entity.

See example

Sizing and Positioning

Responsive Timeline

Responsive Timeline

Adapt the timeline when the viewport resizes.

See example

Create Portal

Create Portal

Render the timeline in a different part of the DOM.

See example

Handling Data

Loading Large Datasets

Loading Large Datasets

Load data dynamically as the user explores the timeline.

See example

Add/Remove Data

Add/Remove Data

Add and remove items in the timeline.

See example

Undo/Redo

Undo/Redo

Save, undo and restore changes in the timeline.

See example

Heatmap

Heatmap Colors

Heatmap Colors

Reveal hidden data patterns with custom color schemes.

See example

Custom Heatmaps

Custom Heatmaps

Customize heatmap with custom values and directions.

See example

Heatmap Tooltips

Heatmap Tooltips

Show tooltips on heatmap cells to add more context.

See example

Reveal Events

Reveal Events

Reveal particular events of interest inside heatmap cells.

See example

Time and Scales

Higher Resolution Time

Higher Resolution Time

Visualize high-frequency data at nanosecond resolution.

See example

Nonlinear Scale Mode

Nonlinear Scale Mode

Space events evenly to make the sequences easier to see.

See example

Scales Options

Scales Options

Customize date and time formats at each zoom level.

See example

Scale Guide

Scale Guide

Show a guide line on the timeline for reading precise times.

See example

Scale Wrapping

Scale Wrapping

Wrap time to a repeating scale to reveal repeated patterns.

See example

Time Series Charts

Time Series Charts

Time Series Charts

Visualize continuous data over time to correlate trends with activity.

See example

Time Series Chart Tooltips

Time Series Chart Tooltips

Show tooltips when hovering on time series charts.

See example

Interactions

Events

Events

Explore all pointer, keyboard, and touch events.

See example

Timeline Tooltips

Timeline Tooltips

Show HTML tooltips by handling hover events.

See example

Filtering

Filtering

Filter the timeline by various criteria on entities and events.

See example

Context Menu

Context Menu

Add right-click context menus to the timeline.

See example

Custom Dragging

Custom Dragging

Customize dragging interactions in the timeline.

See example

HTMLOverlays

HTMLOverlays

Position HTML elements over entity and event locations.

See example

Change Event

Keep timeline state synchronized with any changes.

See example

Saving your View

Export to PNG

Export to PNG

Export the current timeline view as a PNG image.

See example

Save/Load Snapshot

Save/Load Snapshot

Persist and restore timeline state between sessions.

See example

Integrations > KeyLines and ReGraph

Basics

Basics

Synchronize selection and time filtering with a graph.

See example

Time Bar

Time Bar

Sync a KronoGraph timeline with a time bar.

See example

Font Icons

Font Icons

Use Font Awesome icons in both the timeline and graph.

See example

Integrations > MapWeave

Basics

Basics

Filter a MapWeave map by time using KronoGraph.

See example

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.