- Can I use this with jQuery / Dojo / Ext.js / MooTools / etc.?
- Does it run on J2EE / .NET / etc.?
- What does the API look like?
- Can I see it?
- How easy is it to learn?
- How well does it perform?
- What about bandwidth?
- How customizable is KeyLines?
- Does it use Canvas or SVG?
- How do I get data into KeyLines?
The KeyLines API
Can I use this with jQuery / Dojo / Ext.js / MooTools / etc.?
Does it run on J2EE / .NET / etc.?
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:
More than 60 functions for adding/removing/changing items on the visualization, view settings, etc.
There are about twenty event types raised by the component as the user interacts with the visualization using the mouse, keyboard & touch.
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 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.
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.
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.
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 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.
From the blog
In this blog post, we'll describe five of our favorite ways to breathe new life into your graph visualizations with stylish glyphs.
In this blog post, a first-time KeyLines user describes their experience of using the graph visualization toolkit to create their own visualization.
There are so many visualization options to choose from. In this post, we examine the pros and cons of one popular choice: chord diagrams.