KeyLines

The components object has all the current components loaded by the KeyLines wrapper. Components are accessed via their DOM id:

KeyLines.components['canvasID'].zoom('in');

Components are not created directly, but via KeyLines.create().

Allows asynchronous functions to be used with callbacks. This function is for backwards compatibility only.

Calculates the coordinates of events relative to their target.

Sets the value of the crossorigin HTML attribute whenever KeyLines is trying to load an image from a third-party domain.

The function takes a callback function that should return the value of the HTML attribute as a string depending on your criterion. If corsAdapter() is not set or if the callback returns undefined, the crossorigin attribute defaults to 'anonymous'.

KeyLines.corsAdapter((url) => {
  if (url.startsWith('https://keylines.io/')) {
    return 'use-credentials';
  } else {
    return 'anonymous'
  }
});

Creates KeyLines components in your web page.

The create() function is asynchronous, and so returns a promise. If an error occurs, the error catch function will be called, passing the error parameter to it. Otherwise, the success function will be called with the result object as the new component or array of components.

// Load a single chart
KeyLines.create({ container: 'div1' })
  .then((result) => {
    chart = result;
  })
  .catch((err) => {
    // handle the error here
});
// Load two KeyLines components with a specific id
KeyLines.create([
    { container: 'chartDiv', type:'chart' },
    { container: 'timebarDiv', type:'timebar' }
])
  .then((result) => {
    [chart, timebar] = result;
})
  .catch((err) => {
    // handle the error here
});

Checks whether the current browser can show elements full screen.

To view the current state of browser support for the Fullscreen API with desktop and mobile devices, see Can I use Fullscreen API.

Use the toggleFullScreen() call to make an element full screen.

A helper to find the right Unicode character to use for the icon based on the class name:

let data = { id: 'user', type: 'node', fi: { t: KeyLines.getFontIcon('fas fa-user') } };   // retrieves the Unicode position

The getfontIcon() function is deprecated as you can set font icons directly:

let data = { id: 'user', type: 'node', fi: { t: 'fas fa-user' } };

This applies to both the t option on the fi property to set an icon, and the imageAlignment option to scale and position it.

See the Font Icons documentation for details.

The Graph engine can be used to perform traversals or other graph computations within a separate context from the chart. For more information see The Graph Engine.

The info function returns an object containing useful information about how KeyLines is set up in your environment, including the KeyLines version number.

Defines which runtime KeyLines will use when calling KeyLines.create().

Tells KeyLines where it can find various resources on your server. This function must be called before the KeyLines.create() function.

When many chart items use images from the same directory, the images path can be used to save repeated use of the directory path within the chart object.

By default the full path to images must be passed in the u parameter of nodes, e.g.,

const item = { t: 'label', u: '/path/to/very/deep/directory/person.png' };

Alternatively, using the images path:

// in the initialization code put this:
KeyLines.paths({ images: '/path/to/very/deep/directory/' });
// and in the item creation
const item = { t: 'label', u: 'person.png' };

The images path is also used for glyph images, the logo and the background watermark.

The images path must have a trailing slash (/) character.

Allows any given HTMLElement to be put in Full Screen mode, using the browser's full screen API.

Usually a containing div is made full screen, rather than the KeyLines component itself. You should change the sizes of any parts of the page in the handler function – this receives a boolean parameter which is true if new status is full screen, or false if not.

Note that this function does not support Promises.

Checks if the current device supports WebGL and meets the minimum requirements.