KeyLines FAQ
Frequently asked questions about KeyLines
Frameworks
Can I use this with Angular / Vue / Ember.js / Meteor / etc.?
Yes – every one of those and more.
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.
If you’re using Angular or Vue, KeyLines comes with dedicated components and integration tutorials to get you started quickly.
What if I’m using React?
For React developers, we’ve created ReGraph – a toolkit designed for adding graph visualizations to React applications. Learn more about ReGraph
Does it run on J2EE / .NET / etc.?
Yes. KeyLines runs on 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 object, function, event and option.
There are three main parts to the API:
- Functions for adding, removing and changing everything from items on the visualization to view settings.
- Events raised by the component as the user interacts with the visualization using mouse, keyboard or touch.
- Wrapper functions for loading the component.
There’s also a simple JSON format for getting data in and out of the component.
How do I get data into KeyLines?
The process is straightforward and flexible. As long as you can parse it into the JSON format KeyLines needs, you can load the data any way you like.
Can I try it for free?
Of course. Just register for a trial account first.
How easy is it to learn?
The KeyLines SDK is designed for developers with basic knowledge of the JavaScript programming language. If you have this, or work with someone who does, you’ll enjoy developing with the KeyLines SDK.
The SDK has over 80 live chart demos that show how to use and customize the component. Most of our customers get up and running quickly and easily.
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.
Several factors directly affect KeyLines’ performance, including:
- The device
- The browser
- The rendering component 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, and the data transfer across the wire.
KeyLines components are very small. As long as you set the cache headers correctly, they’ll only be downloaded once.
The data format is designed to be concise across the network too.
Customizing
How customizable is KeyLines?
You can style every visual aspect, for example:
- adjust almost every attribute of a node – from the image representing it to the label font
- change the link weight, color, style or label, add custom arrowheads and create self-links
- add animated halo effects to make key items stand out
- use custom-designed glyphs to represent additional information on items
- add donuts to show relative values on a node, with each segment colored and sized proportionally
- make the chart your own with background color, company logos, watermarks or modified navigation controls
The component raises mouse, keyboard and touch events that developers can bind to. In this way, the chart can respond to certain user actions – for example, double-clicking a mouse to reveal a context menu.
Rendering engines & images
WebGL or HTML5 Canvas?
Both – choose the one you prefer.
Canvas offers wider compatibility with legacy browsers. Our WebGL renderer exploits GPU power to give better performance.
What image formats does it support?
KeyLines supports the most popular ones, including PNG, JPG and SVG, as well as font icons.
Do you have more questions?
Our team are happy to talk, or to arrange a demo of the toolkit. Get in touch to find out more.
