There was a problem loading the comments.

ChartIQ Developer Guide

Support Portal  »  Knowledgebase  »  Viewing Article

This article describes how to integrate Autochartist into ChartIQ



To get up and running quickly, here is an
Angular Demo Application Source Code Download that uses the Autochartist Trading Opportunities API

Chart patterns and key levels are drawn onto a ChartIQ chart using the 
Autochartist NodeJS-based Pattern Drawing Library

Autochartist ChartIQ Demo
This project contains a simple demonstration of drawing Autochartist patterns using the ChartIQ library.
It depends on Angular v12ChartIQ v8.3 and Autochartist Trading Opportunities

Using the drawing library in your ChartIQ project
- Build/install 
– Install the ChartIQ library
  • Obtain a copy of the library, and extract the archive (.tgz file)
  • Copy the tarball (chartiq-x.x.x.tgz) to your project folder
Note: The folder must contain a package.json file.
Install the library from the tarball using npm, for example:
'npm install ./chartiq-x.x.x.tgz'

– Install the Autochartist Drawing library
  • Download the drawing library, and extract the archive (.zip file)
  • Copy the zip file ( to your project folder
Install the library using npm, for example:
'npm install ./'

Now install the rest of the dependencies with
'npm install' 
Now all the necessary node modules for the Angular project that have been specified in the package.json configuration file should be installed. 

- Run locally
To run locally build angular and run 'ng serve'. You can then access your frontend on : http://localhost:4200/to-chartiq/?broker_id=?&account_type=?&user=?&token=?
Please note that you need to pass in the correct values of your Autochartist broker parameters (broker_id, account_type, user, token). 
Please see more information about the security token here.

The steps required to implement in the application are as follows:
1. Fetch table data from the TO api
2. On select of table row, get drawing-data link from the symbol links and fetch the drawData:
        "rel": "drawing-data",
        "href": ""
3. Once drawData has been received, initialize the call to display the chart:
4. Create chart as normal, with the settings you want and attach your feed:
    The demo feed we are using: with the provided url params.
5. When loadChart function is called, the drawings library is added:
    this.ciq.loadChart(drawData.symbol, {
      periodicity: {
        period: 1,
        interval: drawData.interval,
        timeUnit: 'minute'
    }, function () {
      this.clearDrawings(true, true)
      this.append('draw', createDrawing)
      this.home({whitespace: 300})
      function createDrawing() {
        new ACDrawings.createDrawing(drawData, CIQ, this)

Share via

Related Articles

© Autochartist