Performance

Introduction

There are a number of ways that you can improve the performance of your KeyLines application. Poor performance can usually be resolved with good design, so here are a few common solutions that you can try.

Reducing the amount of Data

KeyLines can display thousands of nodes and links, but it's rarely a good idea to push KeyLines to it's limits. Not only will performance deteriorate with lots of items, but users will find networks harder to understand.

Having fewer items not only improves rendering times, but also improves the performance of functions, such as layouts, which involve complex calculations on visible items.

Filtering

Filtering is a great way to reduce the amount of data that you need to process, and can be done within KeyLines as well as in your back-end environment. KeyLines' built-in filter function lets you only show items that match a certain criteria, stopping you from overloading users with information. Less visible data will also speed up chart functions such as layouts.

Combos

Another way to reduce the amount of visible data is to use Combos to group nodes together. Combos are a powerful feature that hide data initially, while allowing users to drill down to the detail on demand. Combos also help to speed up layouts as these functions only need to consider items on the top level of the chart, not items inside combos.

For more information on combos see the Combos documentation.

Rendering Mode

There are three rendering modes in KeyLines; Canvas, WebGL and automatic. We recommend leaving KeyLines in its default 'auto' mode so that it chooses the best available renderer for the browser. To learn more about WebGL, see KeyLines Rendering.

Data manipulation

It's a good idea to pass information to KeyLines for many items using a single call, rather than calling KeyLines functions repeatedly for many different items. Many functions that operate on a single item in the chart will also accept an array, allowing you to operate on multiple items in one operation:

const nodesToColourBlue = [];

// collect the changes in an array before passing them all at once to setProperties
chart.each({ type: 'node' }, (item) => {
  nodesToColourBlue.push({ id: item.id, c: 'blue' })
});
chart.setProperties(nodesToColourBlue);

Asynchronicity

Some KeyLines functions start an operation running, but return before it is complete. This feature can speed up your code by allowing functions to run simultaneously, but its important to manage these functions. Asynchronous functions allow either .then methods and use of async/await.

// Using await to wait for create to finish before loading some data.
let chart = await KeyLines.create({ container: 'div1' });
chart.load(data);

This ensures that the chart has been created before you perform another operation using it. For more information on asynchronous behaviour, see our Asynchronous JavaScript documentation.

Browsers

KeyLines performance does depend to some extent on the browser it is running on. You will usually see better performance on more modern browser versions.

Support

Finally, if you are still experiencing performance issues, it's always worth contacting support to see if we can offer any advice for your particular situation.