KeyLines Architecture

A simple and secure architecture

A clean data visualization solution

KeyLines’ architecture is simple, secure and scalable. No need for dedicated visualization servers, risky Java applets or extra data security.

The generic architecture of a KeyLines application
The generic architecture of a KeyLines application.

How does it work?

KeyLines is deployed to your web server and embedded on your web page. It contains a JavasScript file featuring a library of functions for you to call.

Your JavaScript controller receives function calls from and sends events to KeyLines. You customize the controller to trigger what happens when your users interacts with a chart.

Assets including KeyLines icons, images and glyphs are also deployed to your web server. You can use our icon sets or choose your own.

Automatic rendering in any browser

You can use either KeyLines’ WebGL or HTML5 Canvas engines for graphics rendering. The engine you choose depends on your environment:

  • Canvas is supported by a much wider range of legacy browsers compared with WebGL.
  • WebGL offloads much of the heavy lifting to the device’s GPU. This additional processing power means you can visualize much larger and more complex networks compared with Canvas.

One of the smart things about KeyLines is that exactly the same API is used for both rendering engines. You don’t have to worry about which platform you’re running on, so developers are free to focus on the business logic.

Event model

Every time your user interacts with a KeyLines chart, it raises an event. Developers can bind to those events to customize how KeyLines should behave.

There are many mouse and keyboard events to bind to, including dragging, clicking, selecting or editing behaviors. Downloadable demo code on the SDK also saves you coding events from scratch.

Server architecture

You can host KeyLines on any web server. Whether you prefer Apache or NGINX, Node.js or PHP, embed KeyLines on the web page and you’re good to go.

Feel free to define your endpoints, MVC patterns and authentication choices in your favorite framework.

Choose your own framework

KeyLines has no dependencies. Everything is encapsulated inside the KeyLines namespace. It doesn’t depend on 3rd party libraries, extend any of the base JavaScript prototypes or define global variables.

Developers are free to choose the framework they want to use. Whether it’s Angular, Vue, Ember, Meteor or any of the others, you’re not restricted by KeyLines.

For React developers, we’ve created ReGraph – a toolkit designed for adding graph visualizations to React applications. Learn more about ReGraph.

Scalable visualization

KeyLines’ cleverly designed architecture means there’s no need to deploy visualization servers, or deal with the difficulties of server-side rendering:

  • No need to push images to a separate server, which can use more bandwidth and lead to higher latency
  • No need to buy, configure or maintain visualization servers
  • No need to rely on additional servers at peak times to cope with extra load

The KeyLines approach is far more scalable. Graphics are processed on the client side, which means lightweight architecture, minimized server costs and easier capacity planning. Just drop our simple, self-contained components into a web application.

Secure data visualization

KeyLines is a low-risk, highly secure JavaScript library.

There are no third-party dependencies in the core library. It doesn’t send data to remote servers or depend on server-side components. KeyLines doesn’t track user data or persist data in any form of local storage, and internal data structures are not available through the global scope or public interface.

Source code in KeyLines is obfuscated and minified before distribution. It runs entirely inside the browser using standard JavaScript, and we prevent potential security breaches with regular releases and patches.

If you want to use KeyLines for extranet or public deployments you can. Simply use SSL encryption with HTTPS endpoints in the transport layer for the KeyLines component, data loading and assets.

From the blog

A new SDK, new demos & a new link style - July updates

July’s toolkit updates: ReGraph v1.0, a KeyLines & Azure Cosmos DB integration demo, and inline link labels for clearer charts.

Adaptive graphs and flow visualization - June updates

Our toolkit updates for June include adaptive graph styling, showing flow on links, and the organic layout moving to its beta development phase.

How WebGL powers the best user experience

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.

Visit the blog