Time Span Events - Introduction

Time Span Events (TSE) is a module that will allow users visual clarity to a complex event. This is accomplished by plotting the event in a dedicated panel and each event type is associated with a horizontal "swimlane". ChartIQ provides two types of Time Span Events out of the box: Point in time and span of time events.

  • This module runs as a plug-in to the sample-template-advanced.html GUI interface and not as a stand-alone module.
  • Only one TSE module per chart instance.

In addition to the the standard library files, This module requires deployment of the following files:

  • plugins/timespanevent/* (TSE is an optional feature not included in all packages)
  • js/componentUI.js

User Interface

  • The TSE interface is activated once you include the TSE plugin script. For ease of access it's already commented out in sample-template-advanced.html but also listed below just in case.
<script src="plugins/timespanevent/timespanevent.js"></script>
  • Once activated you will have the ability to access the TSE panel and event markers from the Events menu. Out of the box ChartIQ has included a sample interface for testing purposes, located in your plugins/timespanevent/examples directory.

  • The TSE panel will display all the TSE markers you have selected. Each TSE marker selected will be displayed in its own "swimlane". Remove one marker type and the currently activated markers will fill in the space accordingly.

  • Once a TSE marker is activated you will be able to interact with the event itself. Hovering will highlight the marker itself and if needed preview what will be drawn on the chart itself. Some examples of the preview mode is date range highlighting, marker nodes, etc.

  • The TSE panel must be activated to view the TSE markers. If you have selected any TSE markers but have not not turned the TSE panel nothing will be displayed.

  • The TSE markers are displayed in the order in which they are selected from the Events menu.


  • There are three types of TSE markers that ChartIQ has defined out of the box.
  1. **Single Event:** A point in time event that has no range but needs to convey information on the chart. Ex: daily news/annoucements, alerts, emails, etc
  2. **Duration Event:** An extension of the Single Event but has a range and needs to convey information on the chart. Ex: Buy/Sell sessions, phone calls, etc.
  3. **Span Event:** An event that is mainly used to highlight that specific range on the chart while allowing the user to see market reactions. Ex: recessions, tenure of company executives/political periods, weather reports, etc
  • All three of these events must follow a specific data structure. Below is the bare minimum to display a TSE marker. All that is needed is a label to identify what type of marker (type), the event data (events), and the spanType (spanEvent, singleEvent, durationEvent).
// the bare minimum for TSE data
var testData = [
			label: "CEO",
			spanLabel: "CEO NAME",
			startDate: "01/01/2019",
			endDate: "09/01/2019"

var spanEvent = {
				type: "CEO",
				events: testData,
				spanType: "spanEvent",
  • Some TSE markers might have a need for subChildren which is data within a event itself (Ex: Trading Buy/Sell orders). That data will also have to be attached via an array in the event data object.
var testData = [
			label: "Trades",
			spanLabel: "Trade",
			startDate: "03/01/2019",
			endDate: "03/06/2019",
			textColor: "white",
			bgColor: "#FFA500",
			headline: "Trade Event",
			story: "Trade start ",
			category: "trade",
			markerShape: "circle",
			subChildren: [
					date: new Date(03/05/2019),
					headline: "Sub Trade Event",
					price: 113.66,
					story: "The price is: 113.66"


  • You have the ability to assign different background colors, font color, opacity, shape size, and spacing for the TSE markers.

  • The colors you can assign in your event data. The following will allow the marker background to have a blue background and white font.

var testData = [
			label: "CEO",
			spanLabel: "CEO NAME",
			startDate: "01/01/2019",
			endDate: "09/01/2019",
			textColor: "white",
			bgColor: "blue",
  • If a color is not assigned the following defaults are used. "BBBBBB" for marker background color, "FFFFFF" for font color.

  • If you need to change the default visual characteristics of TSE markers just change the constants located in plugins/timespanevent/timespanevent-marker.js.

  • If you need to change the default spacing between TSE markers just change the SPACING constant in plugins/timespanevent/timespanevent.js.