Most connected data has a temporal element. Understanding it can be the key to unlocking a bigger picture.
That is why we built the KeyLines Time Bar.
Whether your data is time-stamped (cyber, IT networks, financial transactions, communications, etc) or manually collated, using the time bar means you can ask more questions:
What is the cause or effect of X? How does an activity develop over time? What is going on in real time?
We take a closer look at the Time Bar, to see how it works and how to incorporate it into your KeyLines applications.
Getting your data format right
We designed the time bar to be easy to use with the KeyLines chart.
You can define your data in KeyLines’ JSON format once and load it into both your chart and the time bar. The time bar will ignore chart-only properties and vice versa.
The important properties for the time bar JSON are ‘dt’ – which is the timestamp as a JavaScript date object or a millisecond number – and ‘id’.
If your data has a value, for example if it’s a transaction, you could also give it a ‘v’ value. This will cause the histogram to represent the sum of all the ‘v’ values, instead of counting the number of items.
Updating the chart to match the time bar
The time bar and chart are independent of each other, but are simple to connect together.
For example, if you want your chart to update each time the time bar range changes:
// When the time bar range changes
timebar.bind('change', function () {
// filter the chart to show only items in the new range
chart.filter(timebar.inRange, { animate: false, type: 'link' }, function() {
// and then adjust the chart's layout
chart.layout('tweak', { animate: true, time: 1000 });
});
});
This code binds to the time bar change event (fired whenever the range changes, e.g. sliders move or the play button is pressed) and performs a chart filter.
The timebar.inRange is a function which takes an object or id and if it finds an item loaded in the time bar model with the same id as well as a dt property in range it will return true, otherwise false.
This format of returning true/false fits in perfectly with the required filter function for chart.filter. Once the filter is complete we call a tweak layout to space out the items on the chart nicely.
Updating the time bar to match the chart
Another common integration is to show a selection line on the time bar once items have been selected in the chart. KeyLines makes this behaviour easy to achieve.
chart.bind(‘selectionchange’, function () {
timebar.selection({id: chart.selection()});
});
Here we bind to the chart selectionchange event. Then when this event fires we call timebar.selection which will draw the selection line on the time bar with the specified array of ids (and conveniently chart.selection() gives us an array of ids of all the selected items).
Customizing the time bar
As a developer, the KeyLines toolkit gives you the freedom to change the visual appearance of any part of the time bar.
Any combination of the scales can be shown or hidden:
And there is fine-grained control over the localization of the time bar by changing the month/day names and time options:
There are also a number of different options for changing the color scheme of the time bar, so it can fit in with the rest of your application, or stand out:
Feeling inspired?
The KeyLines Time Bar is a powerful bit of functionality, and a great tool to experiment with. If you want to know more about the temporal trends in your dynamic graph data, we’re happy to help.
Download our white paper to learn more, or if you have some JavaScript experience, jump right in with a free trial of the KeyLines SDK:
Download white paper Free Trial
Next time, we will take a look at combining the time bar with KeyLines geospatial, helping you uncover the geographic and temporal trends in your graph data.
The post KeyLines FAQS: How to work with the Time Bar appeared first on .