All
API
Docs
Demos
Blogs
Webinars

Introduction

This quick start guide shows how to create a simple KeyLines visualisation with Rollup.js. When you are finished, you will have a simple interactive KeyLines chart.

See also our other demos, documentation, API Reference page and visit our blog for best practices on building graphs.

Note that if you store KeyLines in your source control you must ensure it's not publicly available. Read more about the Obfuscation Requirements before deploying your application.

Requirements

To follow this tutorial, you should have the latest version of Node.js installed. To check your version, you can run node -v in the console.

Step 1: Create a new package

Create a new directory named my-app and create a new npm package from this directory:

mkdir my-app && cd my-app
npm init -y

In the terminal from the my-app directory, add Rollup as a dependency:

npm add -D rollup@^2

Step 2: Create a boilerplate application

Create a new src folder inside the my-app directory.

Inside my-app/src, create a new main.js file with the following contents:

console.info('Hello World!');

The main.js file will eventually contain our application code.

Back inside the main my-app directory, create a new rollup.config.js file containing Rollup configuration. This will take our application code and bundle it: 

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
};

Also inside the my-app directory, modify the existing package.json file to include a script to compile the bundle: 

{
  "scripts": {
    "rollup": "rollup -c rollup.config.js"
  },
}

We can now begin compiling the app bundle by using this command:

npm run rollup -- --watch

Also in the my-app directory, create a HTML file index.html which will load and run the application bundle in the browser: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="./dist/bundle.js" defer></script>
  </head>
  <body>
    <!-- This is the HTML element that will contain the KeyLines component -->
    <div id='kl' style='width: 800px; height: 600px;'></div>
  </body>
</html>

Step 3: Run a web server

To start serving the application, run this command in a new terminal from the my-app directory: 

npx serve

Navigate to the local address from the browser. Typically this is http://localhost:3000. In the developer tools console you should see the line: 

Hello World!

Step 4: Create a chart

Now we'll integrate KeyLines into the application. Download the KeyLines package from the link below and place it in the my-app directory.

Request a trial (Required to Download)

Next, open a new terminal window from the my-app directory and add KeyLines as a package dependency:

npm add -D file:./keylines-8.6.0-11643712880.tgz

Next, add rollup-plugin-node-resolve as a dependency, which will resolve import statements in the app to Node.js packages during bundling: 

npm add -D @rollup/plugin-node-resolve@^13.1.3

Then change my-app/rollup.config.js to use this Rollup plugin to find and bundle the KeyLines dependency: 

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  plugins: [nodeResolve()],
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
};

And finally, change my-app/src/main.js to import KeyLines and load a chart containing one node:

import KeyLines from 'keylines/esm';

async function main() {

  const chart = await KeyLines.create({ container: 'kl' });

  await chart.load({
    type: 'LinkChart',
    items: [{ id: 'id1', type: 'node', c: '#43976C', t: 'Hello World' }]
  });

  chart.zoom('fit');
}

main();

You should now see a simple KeyLines chart in your browser:

A single green node with Hello World label

This is your environment to develop your application.

Step 5: Minify your bundle and create source maps (optional)

During development of an optimised application, we might like to have the bundle minified and to have source maps to make debugging easier.

Note that while you can use source maps of your source code for debugging, you need to ensure that you are not deploying them to your end users.

To use minified bundle and source maps, first add rollup-plugin-terser and rollup-plugin-sourcemaps as dependencies: 

npm add -D rollup-plugin-terser@^7 rollup-plugin-sourcemaps@^0

And then enable these plugins by adding them to the configuration in my-app/rollup.config.js: 

import { nodeResolve } from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import sourcemaps from 'rollup-plugin-sourcemaps';

export default {
  input: 'src/main.js',
  plugins: [nodeResolve(), terser(), sourcemaps()],
  output: {
    sourcemap: true,
    file: 'dist/bundle.js',
    format: 'iife',
  },
};

Now you should have a minified bundle file dist/bundle.js and its source map dist/bundle.js.map.