Time Span Events

Implementation

The Time Span Events module is a plug-in included in the Technical Analysis package.

The plug-in is contained in the plugins/timespanevent folder of the charting library. The folder contains the JavaScript and CSS files that define the form and functionality of the plug-in.

The folder also contains the following subfolders:

  • example — Contains an example of a data source
  • images — Contains image files used in the depiction of the time span event markers

In this tutorial

You will learn how to implement the Time Span Events plug-in using:

  • The ChartIQ technical-analysis-chart.html template
  • The Angular framework

Before you begin

This tutorial requires version 8.1.0 or later of the ChartIQ library.

The tutorial is a continuation of the Time Span Events Introduction tutorial. Please familiarize yourself with the introductory material before proceeding.

technical-analysis-chart.html

The Time Span Events plug-in is built into the technical-analysis-chart.html template but is disabled by default. To enable the plug-in, uncomment the following line in technical-analysis-chart.html:

//import "./plugins/timespanevent/timespanevent.js";

Note: These instructions also apply to sample-template-advanced.html (in the examples/templates folder).

Load technical-analysis-chart.html in a web browser.

If your code editor contains a live web server, load the file from the editor. Otherwise, use the web server where you installed the ChartIQ library; for example, if your web server is local:

http://localhost:5500/technical-analysis-chart.html

User interface

Time span events are displayed in a panel (a portion of the display) that opens below the chart. In a typical implementation, user interface controls enable users to open the panel and display the time span events.

The technical-analysis-chart.html template has a full-featured user interface that includes an Events menu. When the Time Span Events plug‑in is enabled, the Events menu is augmented with a PANEL EVENTS section which enables you to select time span events and open the Time Span Events panel.

On your running instance of technical-analysis-chart.html, open the Events menu:

Events menu

The types of available time span events are listed in the PANEL EVENTS section. Select one or more of the check boxes to open the Time Span Events panel. The selected events populate the panel. Each event type is displayed in its own swim lane. The swim lanes are arranged from top to bottom in the panel in the order in which the events are selected from the menu.

A sample data source provides the information used to graph the events. (See the Creating a Data Source tutorial for information on creating a data source.)

Technical Analysis Chart with Time Span Events panel Figure. Technical Analysis Chart with Time Span Events panel.

Note: A chart can have only one instance of the plug-in; that is, only one Time Span Events panel.

Angular

To enable the plug-in in an Angular project, add the following imports:

import "chartiq/js/advanced";
import "chartiq/plugins/timespanevent/timespanevent";

The Time Span Events plug-in relies on library functions in the advanced.js file to create the visual markers that depict time span events; and so, advanced.js must be imported before the plug-in.

Add the imports to either

  • app.module.ts or
  • the chart component definition file (for example, my-chart.component.ts).

Place the imports after the import of the CIQ namespace (which must be included in charting applications); for example:

import { CIQ } from "chartiq/js/chartiq";
import "chartiq/js/advanced";
import "chartiq/plugins/timespanevent/timespanevent";

We'll complete these implementation steps in the context of an application in the Time Span Events Hello World Example for Angular tutorial.

CSS

Time span events require two style sheet files:

  • chartiq.css — Positions the sub-event pop-up displays and styles their background
  • timespanevent.css — Styles the sub-event markers and pop-up display text

Add chartiq.css to your Angular project with the following import:

@import "~chartiq/css/chartiq.css";

Add the import to either

  • the file that contains the style sheets that apply to the entire application or
  • the SCSS file associated with the component that creates the chart (for example, my-chart.component.scss).

Note: chartiq.css must follow stx-chart.css (the main style sheet for charts) in the CSS cascade.

The timespanevent.css file is added programmatically to your application's HTML document when CIQ.TimeSpanEventPanel is instantiated (see Application logic below).

angular.json

You can also add CSS files to the styles array of the build object in your angular.json file; for example:

"styles": [
    "./node_modules/chartiq/css/chartiq.css",
],

Application logic

Once the plug-in has been added to your application, you can display time span events with just a few lines of code.

In a service class or the class that declares your chart component, instantiate the Time Span Events panel; for example:

new CIQ["TimeSpanEventPanel"]({
    stx: stxx,
    showTooltip: true,
    infoPanel: {
        spanEvent: "main",
        durationEvent: "main",
        singleEvent: "main"
    }
});

Then, send data to the plug-in to populate the panel:

stxx["timeSpanEventPanel"].showTimeSpanEvent(OrderEvents);

We'll examine the application logic in detail in the Hello World Example for Angular tutorial.

Conclusion

Implementing the Time Span Events plug-in is easy. In the ChartIQ technical-analysis-chart.html template, uncomment a single line of code. In Angular, import the plug-in, a library source file, and a CSS file.


Next steps