5 reasons developers love the KronoGraph timeline SDK

We know a few things about building great SDK products here at Cambridge Intelligence.

Over the years, thousands of developers have put our toolkits through their paces. Every comment, suggestion and request from them has fed back into our products, driving a program of continuous development and improvement.

The result is a collection of SDKs that make building powerful, intuitive and insightful data visualization tools a breeze.

The latest addition to those SDKs is KronoGraph – the world’s first toolkit for visual timeline analysis. We’ve blogged before about the great end-user experience you can design with KronoGraph, from policing to bitcoin, root-cause analysis to fraud detection.

This time, we’ll look at KronoGraph’s awesome developer experience. It’s packed with neat tricks and handy shortcuts to make your job easier, faster, and more enjoyable.

Prefer watching to reading?

This blog post is also available as a webinar recording.

Watch the webinar here

A plug & play timeline SDK

As a developer, you should expect 3 advantages from a great timeline SDK product: save time, save code and save effort. These free you up to focus on the rest of the application development process.

We’ve designed the KronoGraph timeline SDK to be as close to ‘plug & play’ as possible. We’ve thought through all the best practices and design options, embedding them into the default behaviors.

As a result, your timeline visualization will ‘just work’ as soon as you load your data – regardless of the data’s size, shape, or complexity. You’re free to change any of those defaults of course – that’s the beauty of an SDK – but we’ve done everything possible to make your life easier.

Here’s some sample phone call data which we’ve translated into KronoGraph’s JSON format, ready to load into a timeline.

{
   "events": {
    "07434677419-07610039694": {
      "entityIds": [
        "07434677419",
        "07610039694"
      ],
      "time": {
        "start": 1284578264000,
        "end": 1284578475000
      }
    },
    "07588304495-07641036117": {
      "entityIds": [
        "07588304495",
        "07641036117"
      ],
      "time": {
        "start": 1284060937000,
        "end": 1284061061000
      }
    },
    ...
  },
  "entities": {
    "07102745960": {
      "label": "Adrienne Benson",
      "data": {
        "country": "Australia",
        "region": "South East"
      }
    },
    "07456622368": {
      "label": "Isaac Harmon",
      "data": {
        "country": "Canada",
        "region": "North America"
      }
    },
    ...
  }
}

In it, we’ve identified entities (phone numbers) and the events (phone calls and text messages) and timestamps. Extra information, like names and labels, is in there too.

When we load the data, KronoGraph automagically aggregates the information into a heatmap view, summarizing events and entities to show the whole dataset in one go:

When you load a large dataset, the KronoGraph timeline SDK automatically summarizes it in a heatmap
When you load a large dataset, the KronoGraph timeline SDK automatically summarizes it in a heatmap

As we zoom in, the chart transitions seamlessly into an events view – showing more granular detail as the scope of our timeline reduces.

A smooth transition from heatmap to individual event view

All of this behavior comes out of the box. All you need to do is get the data from the back-end and into KronoGraph in our documented JSON format. Pretty neat.

Conditional formatting made easy

Another area where the KronoGraph timeline SDK makes life so much easier is conditional formatting.

When our customers play with timelines, they often want to color-code events and entities by some kind of logic – blue for phone calls, red for text messages, for example.

Normally that involves creating a separate schematic file to cross-reference conditions and styles, and then applying stylings on top. Not in KronoGraph!

Instead, we just provide a type property on the entity, and then an entityType object which defines the styling for each type of entity. It’s much simpler to create and easier to maintain.

Returning to our phone calls data, here we’ve told KronoGraph to style all entities with the region ’South East’ in magenta, ‘North America’ in blue and ‘Europe’ in green:

{
  "events": {
    "07434677419-07610039694": {
      "entityIds": [
        "07434677419",
        "07610039694"
      ],
      "time": {
        "start": 1284578264000,
        "end": 1284578475000
      }
    },
    "07588304495-07641036117": {
      "entityIds": [
        "07588304495",
        "07641036117"
      ],
      "time": {
        "start": 1284060937000,
        "end": 1284061061000
      }
    },
    ...
  },
  "entities": {
    "07102745960": {
      "label": "Adrienne Benson",
      "type": "South East",
      "data": {
        "country": "Australia",
        "region": "South East"
      }
    },
    "07456622368": {
      "label": "Isaac Harmon",
      "type": "North America",
      "data": {
        "country": "Canada",
        "region": "North America"
      }
    },
    ...
  },
  "entityTypes": {
    "South East": {
      "color": "#e91e63",
      "labelColor": "#e91e63",
      "typeLabel": "South East"
    },
    "North America": {
      "color": "#2196f3",
      "labelColor": "#2196f3",
      "typeLabel": "North America"
    },
    "Europe": {
       "color": "#009688",
       "labelColor": "#009688",
       "typeLabel": "Europe"
    },
   ...
  }
}

And KronoGraph delivers:

Types and styles make conditional formatting simpler
Types and styles make conditional formatting simpler

What if you change your mind? Just go back and adjust your types or styles. It’s as simple as that.

Complex grouping made simple

Grouping is a challenging part of any large-scale data visualization.

With timelines, your users expect a clear view regardless of the volume of data they’re trying to visualize. That means deciding on a robust way to group entities.

The KronoGraph timeline SDK handles groups in much the same way it handles types. You just define them in the data, and let us do the rest.

{
  "events": {
    "07434677419-07610039694": {
      "entityIds": [
        "07434677419",
        "07610039694"
      ],
      "time": {
        "start": 1284578264000,
        "end": 1284578475000
      }
    },
    "07588304495-07641036117": {
      "entityIds": [
        "07588304495",
        "07641036117"
      ],
      "time": {
        "start": 1284060937000,
        "end": 1284061061000
      }
    },
    ...
  },
  "entities": {
    "07102745960": {
      "label": "Adrienne Benson",
      "type": "South East",
      "data": {
        "country": "Australia",
        "region": "South East"
      }
    },
    "07456622368": {
      "label": "Isaac Harmon",
      "type": "North America",
      "data": {
        "country": "Canada",
        "region": "North America"
      }
    },
    ...
  },
 "entityTypes": {
    "South East": {
      "color": "#e91e63",
      "groupBy": ["country"],
      "labelColor": "#e91e63",
      "typeLabel": "South East"
    },
    "North America": {
      "color": "#2196f3",
      "groupBy": ["country"],
      "labelColor": "#2196f3",
      "typeLabel": "North America"
    },
   ...
  }
}

This method works for simple groups and nested groups, giving detail on-demand without overwhelming the user. Groups expand and close, appear and disappear automatically depending on the timescale you’re trying to understand.

Define your groups in your data, and let KronoGraph do the rest

Absolute control with JavaScript events

Interaction is a huge part of a successful data visualization tool. Get it right and the whole experience is logical and rewarding. Get it wrong and the user feels frustrated and confused.

KronoGraph’s default interaction behaviors are very intuitive – we’ve spent a lot of time thinking about them – but they’re easy to change, too.

Your timeline is probably part of a wider application or dashboard. To ensure consistent behaviors across all components, we’ve exposed various JavaScript events for you to bind to – click, drag, hover – nearly 20 at the time of writing.

That means you can integrate and synchronize your timeline component seamlessly with the rest of your application.

Using KronoGraph’s events to keep all your components in sync

More insights with every release

The final thing developers love about KronoGraph is that we’re adding new high-quality functionality with every release – ready to deploy directly to your own users.

The latest example is scale wrapping, a powerful analysis feature that reveals behavior patterns over time. It’s simply a case of adding one line of code:

timeline.options({
      scales: {
        wrapping: scaleType // 'off' | 'day' | 'week' | 'month' | 'year'
      }
});

Now your users can see their timeline by day, week, month or year, unlocking fresh insight into their time-based data.

Pattern of life analysis with scale wrapping: change the timeline scale to see different event distribution trends
Pattern of life analysis with scale wrapping: change the timeline scale to see different event distribution trends

We’re always working on exciting new features. Watch this space for more innovative timeline analysis capability coming soon.

Get started fast – in JavaScript or React

There’s one more thing developers love about KronoGraph: it comes in two flavors.

The JavaScript API is flexible enough to work with any JavaScript framework, or none. For React developers, there’s a React component that’ll drop seamlessly into your apps. Simply select the version you want when you login. From there, every example and code snippet will be optimized for your preferred coding language.

Oh, and both versions come with full TypeScript support too.

KronoGraph’s documentation lets you select the version you wish to use
KronoGraph’s documentation lets you select the version you wish to use

Try our timeline SDK

The best way to experience the KronoGraph timeline SDK is to try it for yourself. We know you’re going to love it!

Just request a trial to get started.

More from our blog

Visit our blog

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2021.
Read our Privacy Policy.