- Can I use this with React / Angular / Vue / Ember.js / Meteor / etc.?
- What if I’m using React?
- Does it run on J2EE / .NET / etc.?
- What does the API look like?
- How do I get data into KeyLines?
- How easy is it to learn?
- Can I try it for free?
- How well does it perform?
- What about bandwidth?
- How customizable is KeyLines?
- WebGL or HTML5 Canvas?
- What image formats does it support?
The KeyLines API
Rendering engines & images
Can I use this with Angular / Vue / Ember.js / Meteor / etc.?
Yes – every one of those and more.
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.?
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. Learn more about data loading options
Can I try it for free?
Of course! Just register for a trial account first.
How easy is it to learn?
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.
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.
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.
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.
From the blog
July’s toolkit updates: ReGraph v1.0, a KeyLines & Azure Cosmos DB integration demo, and inline link labels for clearer charts.
Our toolkit updates for June include adaptive graph styling, showing flow on links, and the organic layout moving to its beta development phase.
Let's focus on WebGL - what it is, how it works, and why performance is a key contributor to one of the most important goals of your application design: good user experience.