Timeline

Abstract

This topic describes how to use Timeline component in SPEAK.

The Timeline control displays a timeline of events. You specify these events in the Data property of the control. The Data property is the only property you need to use for this control.

The control expects data as a JavaScript object that contains an array of event objects. You can pass this data to the control in different ways:

You can bind the Data property to a data source. You have to create this data source yourself.
You can construct the data in PageCode JavaScript and pass this data to the control: app.Timeline1.set("data", data).

The timeline looks this this:

Users can drag the timeline to see other periods, and they can use scroll to zoom in and out (change the time resolution), or they can use touch events on touchscreen devices to interact with the Timeline control.

The timeline contains these parts:

The red bar on the top of the timeline is the Era bar. You use it to mark significant events that start a new era, for example, when the status of a contact changes from “Anonymous” to “Customer”. The Timeline control displays the text you specify in the EraText property just below the red bar.
The timeline represents normal events with a vertical stick. You can specify an image for these events. If you do, the Timeline control displays this image above the stick (for example, a hand).
Quantifiable events are represented by bar charts. There is a bar for Duration, EngagementValue, and MonetaryValue. The heights of the bars are relative to other bars that are currently visible. You can specify an image for these events. If you do, the Timeline control displays this image at the bottom (for example, a phone).

Data format

You must provide data for the Timeline control as an array of JavaScript objects:

{  
   "dataSet":{  
      "journey":[]
   }
}

where journey is an array of event objects. This is an example of an event object:

{
   "TimelineEventId": "8724ff0e-24e2-4980-a63c-ca3c07d39fff",
  "EventType": "Quantifiable",
  "ImageUrl": "phone.png",
  "DateTime": "2011-01-01T09:04:16",
  "Duration": 13945000,
  "EngagementValue": 982,
  "MonetaryValue": 2067,
  "EraText": "Anonymous",
  "IndicatorImagePath1": "",
  "IndicatorImagePath2": ""
},

The fields of an event are described in the following table:

Name	Description
TimelineEventId	ID of the event.
EventType	`Normal`, `Quantifiable`, or `EraChange`. See description above.
ImageUrl	Points to an image for the event. See description above.
DateTime	Indicates where to place the event on the timeline
Duration	Numerical value that is represented as one of the bars in a bar chart when the EventType is `Quantifiable`.
EngagementValue	Numerical value that is represented as one of the bars in a bar chart when the EventType is `Quantifiable`.
MonetaryValue	Numerical value that is represented as one of the bars in a bar chart when the EventType is `Quantifiable`.
EraText	The text that appears in the Era bar at the top of the control when the EventType is `EraChange`.
IndicatorImagePath1	Points to an image. If used, the Timeline control shows the image next to the bars to give more visual information about the event.
IndicatorImagePath2	Points to an image. If used, the Timeline control shows the image next to the bars to give more visual information about the event.

You can add extra fields and call them what you want. The Timeline control ignores such fields.

Some important methods and properties

You can select a specific event by passing the ID of the event to the selectSegmentId method:

app.Timeline1.viewModel.selectSegmentId("6ecb6136-aee4-4fa7-8b1d-1d3bf3e0f59b");

When you have selected an event, you can move to the adjacent event like this:

app.Timeline1.viewModel.selectPreviousSegment();
app.Timeline1.viewModel.selectNextSegment();

You can get the currently selected event using:

app.Timeline1.get("selectedSegment")