There was a problem loading the comments.

ChartIQ Developer Guide

Support Portal  »  Knowledgebase  »  Viewing Article

  Print
This article describes how to integrate Autochartist into ChartIQ


d10cf62c8b07647f6779305613f5b43211bf5496c21170d3f358455c972eaac4a31616cd10df2b6a?t=1c67985df6ea381a0a4fe5d1e7b95a32



dbc4d5f1f4530dd6a481330ac6212d9167c5b32af8fa7ee788af2c43838f47aab74cd98e97e8fbbb?t=6a3382c3ccb2bb753cec92334bbf93f9



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
Overview
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 (drawing-lib-x.x.x.zip) to your project folder
Install the library using npm, for example:
'npm install ./drawing-lib-x.x.x.zip'

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": "https://component.autochartist.com/to/resources/results/detail/drawing-data/..."
    },
3. Once drawData has been received, initialize the call to display the chart:
    this.chartService.displayChart;
4. Create chart as normal, with the settings you want and attach your feed:
    The demo feed we are using: https://component.autochartist.com/to/resources/pricing/pricegraph 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.remove('draw')
      this.clearDrawings(true, true)
      this.append('draw', createDrawing)
      this.draw()
      this.home({whitespace: 300})
      function createDrawing() {
        new ACDrawings.createDrawing(drawData, CIQ, this)
      }

Share via

Related Articles

© Autochartist