Loading Data

Basics
a diagram showing how data is parsed into JSON format, which is then passed in to KeyLines

KeyLines only accepts data in JSON format:

const dataObject = {
  type: 'LinkChart',
  items: [
    { id: 'node1', type: 'node', t: 'node label 1', c: 'blue' },
    { id: 'node2', type: 'node', t: 'node label 2', c: 'blue' },
    { id: 'link1', type: 'link', id1: 'node1', id2: 'node2', t: 'link label', c: 'rgb(0, 0, 255)' },
    { id: 'annotation1', type: 'annotation', subject: 'link1', t: { t: 'annotation label' } }
    ...
  ]};

Due to the variety of data types, there is no tool for automatic data conversion in KeyLines. You can convert and parse your data either server-side or client-side.

KeyLines is generally tolerant of bad data where possible. Invalid values for properties are usually treated as undefined and the remaining valid data is used to build the graph.

Database compatibility

KeyLines is database agnostic. It works with data passed to it from any source: Graph database, NoSQL datastores, triple stores, SQL databases or a static csv or json file. Graph databases, which are NoSQL datastores optimised for connected data, are particularly suitable for KeyLines deployment.

As long as the data is connected and can be parsed into our published JSON format, KeyLines can visualise it inside the web browser.

For examples of integrating with databases, see our Database Demos and our Neo4j Tutorial.

Loading data into a chart

Once your data is in the KeyLines JSON format, call either chart.load(), chart.merge() or chart.expand() and pass the data object as the first argument:

chart.load(dataObject);

Make sure that you've created a chart with KeyLines.create() before calling any of these functions.

  • chart.load() loads the specified data and deletes any other data from the chart. This is useful when loading data initially when a user first imports data.
  • chart.merge() adds new items to the chart or modifies the properties of existing items. If the merged data contains any items with already existing ids, the properties of existing items will be replaced with the new properties.
  • chart.expand() runs a merge followed by a layout. You can specify the layout in the chart.expand() options.

It's usually a good idea to run a layout after you've loaded or expanded your data. See our Layout Basics for more details.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.