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.0.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. (We'll construct a data source in the Creating a Data Source tutorial.)

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.js";
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.js";
import "chartiq/plugins/timespanevent/timespanevent";

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

CSS

Time span events require two style sheet files:

  • chartiq.css — Positions and styles the sub-event pop-up displays
  • tradeAnalyticsSample.css — Sets the style of the sub-event markers

Add the following CSS imports to your Angular project:

@import "~chartiq/css/chartiq.css";
@import "~chartiq/examples/markers/tradeAnalyticsSample.css";

Add the imports 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: tradeAnalyticsSample.css must follow chartiq.css in the CSS cascade; both must follow stx-chart.css, which is the main style sheet for charts.

angular.json

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

"styles": [
    "./node_modules/chartiq/css/chartiq.css",
    "./node_modules/chartiq/examples/markers/tradeAnalyticsSample.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

In this tutorial, you learned how to implement the Time Span Events plug-in in the ChartIQ technical-analysis-chart.html template and in Angular charting applications.

Next Steps: