ChartIQ Blog

Posted on by ChartIQ Engineering Team

ChartIQ’s Angle on Angular

AngularChartIQ’s new Angular component toolkit enables developers to easily build charting applications and full-featured chart user interfaces natively in the Angular framework. 

A complete charting solution can be created with just a single component: AdvancedChartComponent is the Angular equivalent of ChartIQ’s technical-analysis-chart.html advanced charting template.

With AdvancedChartComponent, developers can add feature-rich charting to their Angular applications, including ChartIQ add-ons and plug-ins, in a few simple steps.

See our chartiq-angular-app project on GitHub for an example implementation of AdvancedChartComponent. Let’s look at the key pieces.

 

HTML Template

AdvancedChartComponent takes advantage of our cross-platform, W3C-standard web components to create a complete chart user interface. The AdvancedChartComponent HTML template (advanced-chart.component.html) is a collection of ChartIQ's UI web components. Here’s a markup snippet that sets up a portion of the chart’s top navigation bar:

<cq-context #contextContainer [ngClass]="chartService.breakpoint$ | async">

    <div class="ciq-nav full-screen-hide">

        <cq-menu class="ciq-search">

            <cq-lookup cq-keystroke-claim cq-keystroke-default

                       cq-uppercase>

            </cq-lookup>

        </cq-menu>

        <!-- Enables the More button when in break-sm mode. -->

        <div class="sidenav-toggle ciq-toggles">

            <cq-toggle 

                class="ciq-sidenav" 

                cq-member="sidenav" 

                cq-toggles="sidenavOn,sidenavOff"

                cq-toggle-classes="active,"><span></span>

                <cq-tooltip>More</cq-tooltip>

            </cq-toggle>

        </div>

        <!-- Any entry in this div is shown in the side navigation bar in

             break-sm mode. -->

        <cq-side-nav cq-on="sidenavOn">

            <div class="icon-toggles ciq-toggles">

                <cq-toggle class="ciq-draw" cq-member="drawing">

                    <span></span>

                    <cq-tooltip>Draw</cq-tooltip>

                </cq-toggle>

                <cq-toggle class="ciq-CH" cq-member="crosshair">

                    <span></span>

                    <cq-tooltip>Crosshair</cq-tooltip>

                </cq-toggle>

                <cq-info-toggle></cq-info-toggle>

            </div>

        </cq-side-nav>

 

        <div class="ciq-menu-section">

            <div class="ciq-dropdowns">

                <cq-menu class="ciq-menu ciq-period">

                    <span>

                        <cq-clickable stxbind="Layout.periodicity">1D</cq-clickable>

                    </span>

                    <cq-menu-dropdown>

                        <cq-menu-container cq-name="menuPeriodicity">

                        </cq-menu-container>

                    </cq-menu-dropdown>

 </cq-menu>

ChartIQ web components begin with the prefix “cq-”; they’re styled with CSS class selectors that typically begin with “ciq-”.

The snippet contains a variety of components: menus (cq-menu), a text entry lookup control (cq-lookup), toggle buttons (cq-toggle), clickable items (cq-clickable), tooltips (cq-tooltip).

And that’s just the beginning; advanced-chart.component.html contains a full-featured user interface of web components.

You can customize the chart UI by adding, removing, or modifying components; that is, just by changing the markup. You can include your own custom Angular components, and you can extend the ChartIQ components with Angular.

 

Provider

A ChartService class (chart.service.ts) constructs the chart and user interface. The constructor creates an instance of the CIQ.UI.Chart class, which is defined in the ChartIQ library (CIQ and UI are JavaScript namespaces). The ChartService class wraps the methods of CIQ.UI.Chart to create the chart, user interface, and user interface context.

The createChartAndUI method also sets up the web component communication channels. ChartIQ’s web components are fully encapsulated; they communicate with the outside world through channels, using a publish/subscribe model.

You can configure a variety of chart features by modifying the configuration object passed to the ChartService methods. The default configuration is part of the ChartIQ library. 

Here’s the ChartService definition:

const { 

    Chart,

    observeProperty,

    BaseComponent: { // Borrow channel functions from BaseComponent

        prototype: { // to integrate them as ChartService methods.

            channelRead,

            channelWrite,

            channelSubscribe

        }

    },

} = CIQ.UI;

 

@Injectable()

export class ChartService {

    

    chart: any;

    stx: any; // An instance of CIQ.ChartEngine.

    uiContext: any; // An instance of CIQ.UI.Context.

    channelSubscribe: Function;

 

    breakpoint$ = new BehaviorSubject('');

    layout$ = new BehaviorSubject({});

 

    constructor() {

        this.chart = new Chart(); // Instantiate CIQ.UI.Chart.

    }

 

    // Creates an instance of the chart engine.

    createChart(container: HTMLElement, config = null) {

        this.stx = this.chart.createChart(container, config);

        return this.stx;

    }

 

    // Creates the chart, user interface, and user interface context. 

    createChartAndUI({ container, config }) {

        

        const uiContext = this.chart.createChartAndUI({ container, config });

 

        this.stx = uiContext.stx;

        this.uiContext = uiContext;

 

        const { channels } = config;

        this.channelSubscribe = channelSubscribe;

 

        // Translate breakpoint channel in RxJs stream.

        this.channelSubscribe(channels.breakpoint, 

            value => this.breakpoint$.next(value)

        );

 

        return uiContext;

    }

}

 

Style Sheets

The ChartIQ library includes CSS style sheets for the base chart and for add-ons and plug-ins. In chartiq-angular-app, the base styles are included in base-styles.scss:

@import '~chartiq/css/stx-chart.css'; // Chart API

@import '~chartiq/css/chartiq.css'; // Chart UI

 

The style sheet for AdvancedChartComponent, advanced-chart.component.scss, contains sample and plug-in styles:

@import '~chartiq/css/perfect-scrollbar.css';

 

// Base styles required by the library.

// If you are not including base-styles.css add these here.

// @import '~chartiq/css/stx-chart.css'; // Chart API

// @import '~chartiq/css/chartiq.css'; // Chart UI

 

// Event Markers

@import '~chartiq/examples/markers/markersSample.css';

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

@import '~chartiq/examples/markers/videoSample.css';

 

// Plug-ins

 

// CryptoIQ, L2 Heat Map, Market Depth

// @import '~chartiq/plugins/cryptoiq/cryptoiq.css';

 

// Recognia

// @import '~chartiq/plugins/recognia/ui.css';

 

// ScriptIQ

// @import '~chartiq/plugins/scriptiq/scriptiq-editor.css';

 

// Trade from Chart

// @import '~chartiq/plugins/tfc/tfc.css';

 

// Time Span Events

// @import '~chartiq/plugins/timespanevent/timespanevent.css';

 

// Trading Central

// @import '~chartiq/plugins/tradingcentral/ui.css';

 

// Visual Earnings

// @import '~chartiq/plugins/visualearnings/visualearnings.css';

 

Resources

The ChartIQ library includes a variety of optional plug-ins that add powerful capabilities to charts.

AdvancedChartComponent comes with all of the plug-ins built-in but not enabled. The plug-ins are imported in the component’s resources.ts file, but the import statements are commented out. 

So, adding new compelling features to your Angular chart application is easy: just uncomment the imports in the resources file.

For example, to enable the Trade From Chart (TFC) plug-in, uncomment the following line in resources.ts:

// import 'chartiq/plugins/tfc/tfc-loader';

You also need to uncomment any related CSS imports in advanced-chart.component.scss (see above). For example:

// @import '~chartiq/plugins/tfc/tfc.css';

Most plug-ins require enabling both the resource and the associated style sheet.

 

Multiple Angles

ChartIQ created the chartiq-angular-app project to give developers a complete charting solution that can be easily incorporated into Angular applications.

But you may not want to work with web components, or you just may want to take a different approach. In that case, we have an Angular seed project that can get you started with a subset of UI components — all developed in the Angular framework. Get in touch with our Angular experts at support@chartiq.com to find out more.

 

Coming Soon

We have some great new Angular capabilities coming in our next release of the ChartIQ library, including the following components:

  • Multi-Chart — Displays two advanced charts on screen simultaneously
  • Active Trader — Sets up a complex active trader desktop
  • Custom Chart — Incorporates Angular components and ChartIQ components to provide advanced functionality
  • Hello World — Creates a basic chart with no user interface

 

Watch chartiq-angular-app for updates.

 

ChartIQ Documentation Page