A clean and simple software architecture
A clean data visualization solution
KeyLines’ architecture is simple, secure and scalable. As a browser-based component, there is no dependency on any specific architecture on the server, or any specific data source.
How does it work?
KeyLines is deployed to your web server and embedded on your web page. It comprises a series of JavasScript components featuring a comprehensive API for you to customize.
Assets including KeyLines font icons, images and glyphs are also deployed to your web server.
Automatic rendering in any browser
KeyLines renders your charts using the most modern WebGL engine, delivering high performance. It can also fall back to use HTML5 Canvas when WebGL isn’t available to a user:
- 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.
- Canvas is supported by a much wider range of legacy browsers compared with WebGL.
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.
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. You can view demo code on the SDK and there’s also a live-coding playground for fast prototyping.
You can host KeyLines on any web server. Whether you prefer Apache or NGINX, Node.js or .NET, 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
Developers are free to choose the framework they want to use. Whether it’s Angular, Vue, Svelte or any of the others, you’re not restricted by KeyLines.
For React developers, there is a React component for KeyLines, but we’ve also created ReGraph – a toolkit designed for adding graph visualizations to React applications in a more native way. Learn more about ReGraph.
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
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.
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.