Performance Tips

KronoGraph allows you to visualize and explore many thousands of events effectively. As your dataset approaches thousands of entities, or hundreds of thousands of events, data loading can slow and heatmaps may begin to lag when panning and zooming.

This section outlines some design tips and tricks you can use to optimize the performance of your KronoGraph app.

Reducing Data Processing

Combining events into duration events

Your KronoGraph app may be dealing with an extremely large amount of time-stamped data, if, for example, being integrated with MapWeave observations.

If so, you can combine multiple separate events affecting an entity into a single duration event as a way of reducing the event count. KronoGraph then handles them in the usual way, allowing performant panning and zooming of heatmaps.

Loading data in stages

When working with large datasets in KronoGraph you can limit the amount of data to be loaded at once by limiting the maximum viewable time range. This caps the range of data that the user can see and interact with at one time, and so throttles the rate at which it needs to be loaded. You can do this using zoomOutLimit as illustrated in the Loading Large Datasets example. You can use panLimit in a similar way.

Minimizing Timeline Updates

Using event handlers efficiently

Methods that return a lot of information can affect performance. For example, your event handlers should avoid calling getInRangeItems getInRangeItems on each draw event as this is likely to slow down performance dramatically.

Some timeline events, such as the range change event, changes to the range prop, fire very frequently when high volumes of data change. These updates cause KronoGraph to recalculate a lot of information, so you could consider reducing the frequency of timeline updates by increasing rangeEventDelay.

Performant heatmap styling strategy

The standard approach to heatmap styling is effective at illustrating the density of events at many scales. By default, cell color is determined by averaging the colors of its events. This means that cell color always reflects its constituent events proportionately, but can result in lags when panning and zooming large datasets.

We recommend considering whether highlighting particular features in the dataset over density would be an appropriate approach, as this improves heatmap performance with large datasets. For example:

• Set heatmapColor to a particular color (or set of colors), so that an alpha value is set according to the number of events represented by that cell.
• Set heatmapColor to heatmapEventTypePriority so that KronoGraph identifies whether each cell includes an event of the specified type(s), and then uses its associated color. Note, however, that when zoomed right out, these event types can be disproportionately emphasized by the heat map.

To explore further, see the Heatmap color settings and the Heatmap Colors examples.