Building with KronoGraph

Step 1: Download KronoGraph

Use Yarn or NPM to add it to your project. You can also make use of our React component and TypeScript definitions.

Step 2: Connect to your data source

Choose whatever source of time-based data you want, or overlay multiple datasets.

Step 3: Add interactions & styling

Get inspiration from demos and use intuitive APIs to design the interactions your users need.

Step 4: Integrate with KeyLines or ReGraph (optional)

Seamless integration with our graph visualization toolkits gives users powerful options for driving chart and timeline analysis.

Ready to try KronoGraph?

Coding with KronoGraph is easy. Throughout the KronoGraph SDK site there’s downloadable code – both plain JavaScript and React – to help get you started.

Request a free trial

JavaScript example:

//     Copyright © 2011-2021 Cambridge Intelligence Limited. 
//     All rights reserved
//     Sample Code - Using JavaScript to create a basic timeline visualization.

// index.js 
import { createTimeline } from 'kronograph';

const timeline = createTimeline('my-timeline');

const timelineData = {
    entities: {'Person 1': {} , 'Person 2': {} },
    events: {
        'Phone call 1': {
            entityIds: ['Person 1', 'Person 2'],
            time: new Date(2020, 6, 1, 12, 0),
        },
        'Phone call 2': {
            entityIds: ['Person 1', 'Person 2'],
            time: new Date(2020, 6, 1, 13, 0),
        },
        'Phone call 3': {
            entityIds: ['Person 2', 'Person 1'],
            time: new Date(2020, 6, 1, 14, 0),
        },
    },
    type: 'Timeline',
};

timeline.set(timelineData);
                

React example:

//     Copyright © 2011-2021 Cambridge Intelligence Limited. 
//     All rights reserved
//     Sample Code - Using JavaScript to create a basic timeline visualization.
 
// App.js 
import React from 'react';
import Timeline from 'kronograph/react/Timeline';
 
const data = {
  entities: { 'a': {}, 'b': {} },
  events: {'a-b': { entityIds: ['a', 'b'], time: 1525000000000 }},
};
 
function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Timeline entities={data.entities} events={data.events} />
    </div>
  );
}
 
export default App;