Building with KeyLines

Build and deploy high performance graph visualization tools quickly

How does KeyLines work?

How does KeyLines work?

KeyLines is a JavaScript software development kit (SDK). You can use the technology to quickly build network visualization web components to embed in your applications.

These components use WebGL and HTML5 Canvas for fast performance, and harness a powerful event model and API of functionality to help make sense of data connections.

With detailed API documentation to help you, and a team of KeyLines developers providing support, it’s easy for you to build the custom visualization applications your users want.

Why Build with KeyLines?

Designed for performance

Every aspect of KeyLines is built for performance.

It uses fast, lightweight JavaScript, plus WebGL and HTML5 Canvas for powerful rendering across all browsers. Carefully optimized graph algorithms mean it can handle your biggest datasets.

Built for developers

We’ve designed KeyLines with a developer’s needs in mind.

The documentation is easy to follow and features downloadable example source code. If you need help, our developers provide expert support and we offer Training and Consulting.

It works in your existing environment

We’ve worked hard to ensure KeyLines apps ‘just work’ in any setup.

You can keep your existing servers and use your favourite database and code in your preferred JavaScript framework. We also have a growing list of integrations to help you get started.

A powerful API

KeyLines includes a fully-documented API of functionality including real-time, dynamic and geospatial network support.

We run to a frequent release cycle, with multiple major releases each year, plus patches in between for enhancements and fixes.

Lightweight, secure and scalable

KeyLines’ clean architecture means it can be easily deployed into any existing IT environment with minimal disruption.

All files are hosted on your own servers and the data stays inside your firewall at all times. KeyLines has no external dependencies and doesn’t require plugins. It manages rendering client-side, so you won’t need dedicated visualization servers. If you need greater security, the transport layer can be SSL encrypted with HTTPS end-points.

The architecture of a KeyLines application

KeyLines Architecture

Any browser, any device

KeyLines works in all major browsers on desktops, tablets or cell phones.

Supported browsers and devices

Trusted by developers

KeyLines has been deployed into hundreds of high profile applications around the world.

How the API works

Step 1: Download

…the KeyLines.js file, either on its own or as part of a pre-assembled demo.

Step 2: Connect

…to your chosen data source. We have examples of some of the most popular options.

Step 3: Customize

…using the KeyLines graph API. Call different functions based on chart actions or user events like click, swipe or hover.

Try it out

Request a trial account to get started. In the meantime, here’s an example of a KeyLines demo combining filters, the chart and time bar elements.

//     Copyright © 2011-2017 Cambridge Intelligence Limited. 
//     All rights reserved
//     Sample Code - See how a network changes over time.
var chart;
var timebar;
function klReady(err, ready) {
  chart = ready[0];
  timebar = ready[1];
  // load the data (defined in separate js file) into both the chart and timebar
  timebar.load(data, function () {
    timebar.zoom('fit', { animate: false });
  chart.load(data, chart.layout);
  // When the time bar range changes
  timebar.bind('change', function () {
    // filter the chart to show only items in the new range
    chart.filter(timebar.inRange, { animate: false, type: 'link' }, function() {
      // and then adjust the chart's layout
      chart.layout('tweak', { animate: true, time: 1000 });
$(function () {
  KeyLines.paths({ assets: 'assets/' });
    {id: 'kl', type: 'chart', options: {logo: {u: 'assets/Logo.png'}, overview: {icon: false, shown: false}}},
    {id: 'tl', type: 'timebar'}
  ], klReady);

Start a Trial

Integrate with your favorite database

KeyLines is flexible enough to work with virtually any database. If your data can be parsed into a JSON format, KeyLines can visualize it. To help you get started, we have built integrations with some of the most popular data storage and querying technologies.

Click the logos to read more:

Visualizing the Neo4j graph database with KeyLines
Visualizing the DataStax graph database with KeyLines
Visualizing the Titan graph database with KeyLines
Visualizing JanusGraph with KeyLines
Visualize graphs using ArangoDB
Visualizing Elasticsearch with KeyLines
Visualizing the OrientDB graph database with KeyLines
Visualizing the Cayley graph database with KeyLines
Visualizing the Postgres database with KeyLines
Visualizing the Postgres database with KeyLines

Use your favorite JavaScript framework

We’ve created documentation and examples to help you build using the most popular JavaScript frameworks.


Still have questions?

Do you still have questions about building a graph visualization application with KeyLines?

Our developer FAQ can help, or you can request a trial of the KeyLines SDK to see the full documentation.

Read our Developer FAQs

From our blog

Our blog is full of useful materials and tutorials to help you make the most of the KeyLines SDK.

5 (quirky) ways to style combos for maximum impact

Combos are great for reducing clutter and organizing your networks into something more manageable. This blog demonstrates five combo styling ideas you’ve probably never thought of.

More powerful geospatial with KeyLines and Esri ArcGIS

We show how to integrate KeyLines with Esri’s open source esri-leaflet library to access their ArcGIS mapping platform.

KeyLines 5.1: New year, new combos

The groundbreaking combos functionality released early last year just got better. Enhanced features, neat styling and improved performance will change the way you group chart items.

Visit the blog

Subscribe to our newsletter

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