Developer FAQ

Your most frequently asked questions about the KeyLines SDK

Frameworks

Can I use this with jQuery / Dojo / Ext.js / MooTools / etc.?

Yes.

KeyLines has no external dependencies and is a good JavaScript citizen: it does not extend any of the basic JavaScript types and encapsulates everything within its own namespace to avoid global name conflicts.

Does it run on J2EE / .NET / etc.?

Yes.

KeyLines runs on top of any server platform – it is a pure client-side component.


The KeyLines API

What does the API look like?

The SDK has detailed documentation for every callable function and every event raised.

There are three main parts to the API:

Functions

More than 60 functions for adding/removing/changing items on the visualization, view settings, etc.

Events

There are about twenty event types raised by the component as the user interacts with the visualization using the mouse, keyboard & touch.

Wrapper

Functions for loading the component.

In addition there is a simple JSON format for loading data into and out of the component.

Can I see it?

Of course, but you’ll need to register for a trial account first.

How easy is it to learn?

The KeyLines SDK is designed for developers with at least some basic knowledge of the JavaScript programming language. Provided you have these skills, or work with someone who does, then you’ll find the KeyLines SDK a very enjoyable and satisfying development experience.

The SDK has many live demonstration projects that show how to use and customize the component. Our existing customers have found it pretty quick to get up and running.


KeyLines Performance

How well does it perform?

KeyLines offers excellent performance.

We measure performance by frame rate – the number of animation frames per second – and we regularly stress-test the component to see how many items it can handle.

There are several factors that will directly affect KeyLines’ performance, including:

  • The device
  • The browser
  • The rendering component being used (HTML5 Canvas v WebGL)
  • The size of the network being visualized.

To give you some idea, on an average laptop we can maintain an impressive 60 fps when panning around a chart with 10,000 items with the WebGL renderer. Other benchmarks have shown the KeyLines WebGL renderer coping very well with networks of 100,000 items.

Read more about KeyLines’ performance.

What about bandwidth?

There are two aspects to that – the size of the component, plus the data transfer across the wire.

The KeyLines components are very small, and provided you set the cache headers correctly they’ll only be downloaded the first time anyway.

The data format is designed to be very concise across the network too.


Miscellaneous

How customizable is KeyLines?

Every visual aspect can be customized – icons, colors, font sizes, background colors, etc.

In terms of behaviour the component raises events that developers can code to: events are raised for mouse and touch actions like dragging, hover, clicks and context menus.

Does it use Canvas or SVG?

We use HTML5 Canvas because we find it performs really well and is more flexible for animation work. Read more about Canvas v SVG, and the benefits of HTML5 Canvas for developers.

We also use a WebGL renderer which offers better performance than the Canvas component, but is not as widely compatible with legacy browsers.

How do I get data into KeyLines?

Getting data into KeyLines is very straight forward and flexible. An explanation of some of the methods you can use can be found in this blog post.

Do you have more questions?

Our team will be happy to answer any questions you have, or to arrange a demo of the toolkit. Get in touch to find out more.

Contact the team!

From the blog

Bringing time-series data to life with KeyLines

We integrate KeyLines with a time series database (TSDB) to see what the advanced time bar features can do.

Visualizing TED Talks data with Memgraph

Integrating Memgraph with KeyLines to shed new light on TED talks data. KeyLines is flexible enough to work with any...

Using Angular CLI to get started with KeyLines

This blog walks you through the commands you need to integrate Angular with KeyLines and start coding.

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email