Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Trading
Time Span Events
Term structures
ScriptIQ
Troubleshooting
Glossary
Reference
JSFiddles

Quick Start

Create a Chart User Interface

Chart user interfaces enable users to control and interact with charts. ChartIQ provides a large assorment of W3C-standard web components and custom tags that enable you to quickly create full-featured chart user interfaces with toolbars, menus, dialogs, titles, legends, and more.

In this tutorial

You will create a basic user interface for a chart.

Before you begin

This tutorial is a continuation of the Quick Start Connect a Chart to a Live Data Source tutorial. Please complete the data source tutorial before proceeding.

Web components

ChartIQ is a web component framework as well as a JavaScript library. The framework provides everything you need to create a chart user interface.

ChartIQ web components are custom HTML elements with built-in programming; for example, cq-menu and cq-menu-dropdown (which together create conventional drop-down menus). ChartIQ also includes custom semantic tags, which are non-standard HTML tags (type HTMLUnknownElement) that serve as presentation elements only; for example, cq-heading and cq-item.

ChartIQ web components and semantic tags begin with the prefix “cq-” and are styled with CSS classes whose names typically begin with “ciq-”; for example, ciq-menu and ciq-radio (which can be found in the chartiq.css file in the chartiq/css folder of your library).

Create the UI

Open helloworld.html (the revised version you created in the preceding tutorial) in your code editor.

First, we'll add the markup for the UI.

<cq-context>

Surround the <div> element that contains the chart with the following tags:

<cq-context></cq-context>

For example:

<cq-context>
    <div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>
</cq-context>

The cq-context element establishes an area of the markup (a context) for the chart and the UI web components associated with the chart. A web page can contain multiple charts, in which case multiple contexts are created. We'll create only one chart in helloworld.html, but a context is still needed for that chart.

Navigation bar

Next, let's create a navigation bar. Add the following <div> tag above the chart container <div>:

<div class="ciq-nav">
</div>

For example:

<cq-context>
    <div class="ciq-nav">
    </div>
    <div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>
</cq-context>

The div element sets up a navigation bar that will hold our UI elements.

The ciq-nav style is defined in the chartiq.css file (along with many other styles for the web components).

Include chartiq.css in helloworld.html by adding the the following link element:

<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />

Note: chartiq.css must follow stx-chart.css in the CSS cascade; so, add the link for chartiq.css after the link for stx-chart.css.

Menu

Now, we'll add a menu to the navigation bar.

Add the following markup inside the <div class="ciq-nav"></div> tags:

<cq-menu class="ciq-menu">
    <span>Chart Style</span>
    <cq-menu-dropdown>
        <cq-menu-container>
            <cq-item stxsetget="Layout.ChartType('candle')" class="ciq-active">Candle
                <span class="ciq-radio"><span></span></span>
            </cq-item>
            <cq-item stxsetget="Layout.ChartType('line')">Line
                <span class="ciq-radio"><span></span></span>
            </cq-item>
            <cq-item stxsetget="Layout.ChartType('step')">Step
                <span class="ciq-radio"><span></span></span>
            </cq-item>
            <cq-item stxsetget="Layout.ChartType('mountain')">Mountain
                <span class="ciq-radio"><span></span></span>
            </cq-item>
            <cq-item stxsetget="Layout.ChartType('baseline_delta')">Baseline
                <span class="ciq-radio"><span></span></span>
            </cq-item>
            <cq-item stxsetget="Layout.ChartType('histogram')">Histogram
                <span class="ciq-radio"><span></span></span>
            </cq-item>
        </cq-menu-container>
    </cq-menu-dropdown>
</cq-menu>

Let's look at the markup elements.

<cq-menu>

A ChartIQ web component that creates a menu.

<span>Chart Style</span>

A standard HTML element that provides the title of the menu.

<cq-menu-dropdown>

A ChartIQ web component that creates a drop-down menu.

<cq-menu-container>

A ChartIQ web component that contains the items that make up the menu.

<cq-item>

A ChartIQ semantic tag that creates a menu item. Each cq-item tag contains the text of the menu item (such as “Candle”) and a span element styled as a radio button by the ciq-radio CSS class (in chartiq.css).

The menu is a list of radio button items. The currently selected item is identified by class="ciq-active".

Each menu item has a stxsetget attribute, which is a ChartIQ custom event handler (like onclick). When a menu item is selected, the Layout.ChartType function for that element is called.

Activate the UI components

If you run helloworld.html at this point, the navigation bar and Chart Styles menu will appear above the chart, but the menu won't work. That's because your browser doesn't recognize the ChartIQ web components.

We have to activate the components with some JavaScript.

CIQ

To enable the UI, we need a version of the CIQ namespace that has enhanced, UI-specific functionality.

Revise the following line in helloworld.html:

import { CIQ } from "./js/chartiq.js";

to:

import { CIQ } from "./js/components.js";

CIQ now includes the UI namespace, which has all the functionality needed to manage the chart UI web components.

Component registration

Now we can make the ChartIQ web components known to the browser.

Add the following JavaScript statement to the script:

CIQ.UI.registerComponents();

Add the statement after the line that attaches the quote feed to the chart engine, for example:

stxx.attachQuoteFeed(quoteFeed, { refreshInterval: 1 });
CIQ.UI.registerComponents();

The registerComponents function uses the customElements.define function of the Web API to turn the ChartIQ web components into legitimate HTML elements.

Context object

Next, we'll create a context object and give it a reference to the chart engine. The web components in the context (our menu, for example) will then be able to control the chart.

Add the following after the statement that registers the components:

const uiContext = new CIQ.UI.Context(stxx, document.querySelector("cq-context"));

Layout object

We need a layout object to provide the Layout.ChartType event handler for our menu items (see Menu above). The layout object works only in the context specified by the constructor function parameter, so we'll give it a reference to our context object.

Add the following after the statement that creates the UI context:

new CIQ.UI.Layout(uiContext);

Bindings

Finally, we have to activate the stxsetget bindings of the menu items.

Add the following statement to make the UI interactive:

CIQ.UI.begin();

Add the statement after the line that instantiates CIQ.UI.Layout.

Completed file

Here's the completed version of helloworld.html:

<!doctype html>
<!--
This file provides an example of the most basic way to load a chart into an HTML page.
-->
<html>
<head>
<!-- Set the display for mobile devices. -->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

<!-- Reference the style sheets. -->
<link rel="stylesheet" type="text/css" href="css/stx-chart.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />
</head>

<body>

<!-- Create the chart container and user interface. -->
<cq-context>
    <div class="ciq-nav">
        <cq-menu class="ciq-menu">
            <span>Chart Style</span>
            <cq-menu-dropdown>
                <cq-menu-container>
                    <cq-item stxsetget="Layout.ChartType('candle')" class="ciq-active">Candle
                        <span class="ciq-radio"><span></span></span>
                    </cq-item>
                    <cq-item stxsetget="Layout.ChartType('line')">Line
                        <span class="ciq-radio"><span></span></span>
                    </cq-item>
                    <cq-item stxsetget="Layout.ChartType('step')">Step
                        <span class="ciq-radio"><span></span></span>
                    </cq-item>
                    <cq-item stxsetget="Layout.ChartType('mountain')">Mountain
                        <span class="ciq-radio"><span></span></span>
                    </cq-item>
                    <cq-item stxsetget="Layout.ChartType('baseline_delta')">Baseline
                        <span class="ciq-radio"><span></span></span>
                    </cq-item>
                    <cq-item stxsetget="Layout.ChartType('histogram')">Histogram
                        <span class="ciq-radio"><span></span></span>
                    </cq-item>
                </cq-menu-container>
            </cq-menu-dropdown>
        </cq-menu>
    </div>
    <div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>
</cq-context>

<!-- This inline script acts as the entry point, without creating a separate external file. -->
<script type="module" crossorigin="use-credentials">

// Reference a quote feed.
import quoteFeed from "./examples/feeds/sampleQuoteFeed.js";

// Reference functionality of the charting library.
import "./js/standard.js";
import { CIQ } from "./js/components.js";

// Instantiate a CIQ.ChartEngine object, the main object for creating charts.
let stxx = new CIQ.ChartEngine({
    container: document.querySelector(".chartContainer")
});

// Make real-time data available to the chart.
stxx.attachQuoteFeed(quoteFeed, { refreshInterval: 1 });

// Activate the UI.
CIQ.UI.registerComponents();
const uiContext = new CIQ.UI.Context(stxx, document.querySelector("cq-context"));
new CIQ.UI.Layout(uiContext);
CIQ.UI.begin();

// Display the chart.
stxx.loadChart("SPY", {
    periodicity: {
        period: 1,
        interval: 5,
        timeUnit: "minute"
    }
});

</script>

</body>
</html>

Load helloworld.html. The Chart Styles menu should enable you to change the way the chart displays the data.

Conclusion

The ChartIQ web component framework enables you to build full-featured user interfaces for your charts. Take a look at technical‑analysis‑chart.html (in the chartiq folder of your library) to see a great example.

But you can also create a UI in React, Angular, Vue, iOS, Android, Java — whatever framework or development tool you choose.

Next steps

This guide has provided a brief introduction to the ChartIQ library. But there's much more to discover. Explore our documentation site to access a variety of in-depth tutorials and the complete API documentation.

Let us know at support@chartiq.com if you have any questions.