Getting started
Chart interface
Web components
Chart internals
Data integration
Frameworks and bundlers
Mobile development
Time Span Events
Term structures

Library Directory Structure

As of version 7.2.0, the root directory structure of the CharitIQ library distribution archive (zip file) is as follows:

Package Folder

  • The chartiq folder contains the complete charting library.
  • The chartiq-x.x.x.tgz tarball contains the library archived in the TAR file format. The tarball enables you to install the library using npm (see Installing with npm).
  • The README.md file contains information about using the library.

Note: Distribution archives of releases prior to 7.2.0 only include the contents of the chartiq folder.

This tutorial describes the contents of the chartiq folder.

Table of contents

The js directory:

Files related to the core Library API

  • chartiq.js

    • File containing only minimal API calls necessary for rendering and managing the most basic chart features.
    • chartiq.js excludes features such as:
      • quoteFeed
      • drawings
      • studies
      • aggregated chart types (Kagi, Renko, P&F, etc)
      • equation charts
      • shading
      • advanced chart styles (histograms, heatmaps, scatterplots, HLC bars)
      • chart sharing,
      • internationalization
      • markers
      • spans and ranges
      • symbol lookup drivers
    • The above features are available as a bundle, see below standard.js and advanced.js.
    • An additional directory containing all feature functionality, in individual modular files, can also be provided upon request to allow your firm to create the perfect package for your needs by incrementally combining chartiq.js with any of the individual files.
  • standard.js

    • File contains most of the features provided by the library. Some features, such as drawings and studies, provide just some of the types we can provide.
    • File requires chartiq.js.
  • advanced.js

    • File is provided in full library package. Contains the remainder of the list of studies, drawings, chart types and renderers we have available.
    • File requires standard.js.
  • componentUI.js

  • components.js

    • This file contains all functions linked to the Web Components used in the sample templates.
  • addOns.js

    • This file contains the additional modules outlined in the API Reference.
  • deprecated.js

    • This file contains any functions which have been deprecated. Include this in your project if you need to upgrade and are using deprecated functionality.
  • defaultConfiguration.js

    • This file contains a default chart setup configuration. You may modify it by first loading it and then modifying its properties before passing it to the chart creation function.

  • thirdparty directory:

    A set of third party utilities required to support various features of the core library.

    • Required for mobile SDK only:
      • hammer.js
    • Required for chart sharing support only:
      • html2canvas.min.js
    • Required for web components support only:
      • custom-elements.min.js
    • Required for styling scrolling only:
      • perfect-scrollbar.esm.js
    • Optional support:
      • object-observe.js (for observing object properties)

  • extras directory:

    Specialized functionality seldom required on implementation

    • hlcbox.js
      • Including this file will allow you to support the CIQ.ChartEngine#HLCBox renderer.
    • requestLimiter.js
      • Including this file will allow you to limit the number of outbound requests to any specific domain. See file header for more details.

The examples directory:

Example interfaces and data used in the sample implementations. It is important all these items are reviewed and adjusted to meet requirements.

  • data

    • This folder contains sample static data objects to get you started until you have implemented your own quote feed or streaming mechanism.
  • feeds

    • This folder contains sample quotefeed, and symbol search implementations, including an interface to our quote feed simulator, so you can test your chart functionally without a real quote feed. All sample templates use this simulator by default. This file can be removed once you have developed your own quote feed interface.
  • markers

    • This folder contains a sample implementation of chart markers. You will need to create your own marker implementation to customize the way your markers look and behave, or remove the Events dropdown if present in your template.
  • markets

    • This folder contains a sample market and symbology implementation for a few select markets. You will want to create your own market implementation to define the markets you wish to support, and create a symbology translator to match your data provider.
  • templates

    • This folder contains a variety of HTML sample templates which can be moved to the root directory to use in your implementation. Each template will include a summary of its intended use on the header portion of the file itself. A very simple helloworld.html example template is included in the root directory all ready to get you started.
    • To use a template, copy it into the root directory of the library package.
  • translations

    • Contains a sample translation file. A translation file is required only if your implementation will be leveraging the translations facility within the library. See the Localization tutorial for all the details.

The mobile directory:

Required for mobile SDK support only

  • thirdparty (dir):

    • hammer.js
  • nativeSdkAccessibility.js

  • nativeSdkBridge.js

  • sample-template-native-sdk.html

    • Move this file into the root directory to use.

The modules directory:

If included, it contains node modules designed to run server side, such as the study calculator. It can be removed if not needed.

  • See StudyCalculator for installation instructions
  • Detailed examples are also included.

The plugins directory:

Any additional plugins you may have purchased with the library such as Active Trader, scriptIQ, and TFC.

The src directory:

Webpack bundling example of the charting library together with an advanced template. A webpack.config.js file is located at the root of the chartiq folder along with a package.json file.

  • Use as an example and adjust as needed for your particular needs, or remove if not using Webpack.

The css directory:

Files related to styling of both the UI and the chart canvas itself.
Individual scss components that compile into chartiq.css file are included here as well as a css map file.
More on CSS here.

  • stx-chart.css
    • Required for all chart implementations
  • chartiq.css
    • Required for sample HTML templates. Contains standard styling for webcomponents and addons, and themes.
  • normalize.css
    • This is an open source project that sets the baseline "empty page" style for all browsers to a reasonable default. Required for sample HTML templates.
  • page-defaults.css
    • Required for sample HTML templates.
  • font-awesome.css
  • img directory
  • chartiq.scss is the master scss file which imports all other scss files beginning with underscore. The resulting output file is chartiq.css.
  • stx-chart.css files is required for all charts.
  • chartiq.css is required for using webcomponents and addons.

Next steps