Integrating Autochartist Patterns into Tradingview JS charting library.
Supporting Articles
Before you get started
- Get a copy of the TradingView JS charting library.
- Get a copy of the TradingView JS UDF datafeed library.
- Get a copy of the Autochartist TradingView library(Compatibility Angular 10+).
- Get your Trading Opportunities authentication information.
Sample Angular 10+ project here (Does not contain the TradingView JS charting library or TradingView JS UDF datafeed library)
To get up and running as quickly as possible:
- copy your TradingView JS charting library to the (assets) folder.
- copy your TradingView JS UDF datafeed library to the (assets) folder.
- run the npm install command
- provide your Trading opportunities authentication Paramaters in src/app/trading-opportunities-table/trading-opportunities-table.component.ts line 101
These are all the steps needed to have the demo up and running, now you can run the ng serve command and access your application at localhost:4200(default port)
Autochartist TradingView library overview
This library provides two services, one to fetch trading opportunity data, which includes the drawing data to be used with the drawing service.
TradingOpportunitiesService
(* denotes mandatory field)
The trading opportunities service exposes a method to query the Autochartist Trading Opportunities JSON Api.
getTradingOpportunitiesDrawData(TOResultsRequest*) : Observable<TOResultsResponse>
TOResultsRequest is a mandatory parameter which consists of the following
*brokerId: number
*accountType: string
*user: string
*token: string
*expire: number
timeZone?: string
locale?: string
pageLimit?: number
group?: string
chartStyle?: string
width?: number
height?: number
For the purposes of this project, we will not go into detail about the Trading Opportunies JSON Api, more info about the api can be found here
TOResultsResponse will return a JSON object which contains the opportunity data, along with a hyperlink to the drawing data which is what we ultimately need
getAutochartistChartImage(Item*): Observable of image(blob)
getDrawingData(Item*): Observable of PatternDrawData
chartType: string;
interval: number;
length: number;
direction: string;
priceRange: PriceRange;
timeFrame: TimeFrame;
originalLines: any[];
lines: Line[];
forecast: Line[];
eventLine: Line;
arrow: Line[];
predictionRectangle: Line[];
timeZone: string;
symbol: string;
This object is to be used with the drawing service, it contains all the information necessary to draw an Autochartist pattern on the TradingView JS library
The line object consists of
x1: number;
x2: number;
y1: number;
y2: number;
name: string;
point1Name?: any;
point2Name?: any;
getDrawingDataLink(Item*): Observable of a string
DrawingService
The drawing service is responsible with drawing Autochartist patterns on the TradingView JS library
draw(PatternDrawData*, chartWidget*, PatternStyles)
The draw method is the main drawing method to be used.
It needs two parameters, the drawing data which the the TOservice can provide, and the TradingView widget object to be drawn on.
It also has an optional parameter of Style objects that can be used to override the default line colours and styles of the pattern
The method will set the symbol and timegranularity on the widget, and then draw the data on the chart.
The method consists of individual methods which can also be called seperately:
setChartPatternViewScale(PatternDrawData*, widget*): These methods act more as a developer aid, they do nothing special except calling the relevant TradingView widget methods.
setSymbol(PatternDrawData*, widget*): These methods act more as a developer aid, they do nothing special except calling the relevant TradingView widget methods.
drawEventLines(PatternDrawData*, widget*, PatternStylesOverride): Draws the specific part of the Autochartist Pattern on the TradingView widget provided, styles can be overriden.
drawArrows(PatternDrawData*, widget*, PatternStylesOverride): Draws the specific part of the Autochartist Pattern on the TradingView widget provided, styles can be overriden.
drawForecast(PatternDrawData*, widget*, PatternStylesOverride): Draws the specific part of the Autochartist Pattern on the TradingView widget provided, styles can be overriden.
drawPredictionArea(PatternDrawData*, widget*, PatternStylesOverride): Draws the specific part of the Autochartist Pattern on the TradingView widget provided, styles can be overriden.
drawPatternLines(PatternDrawData*, widget*, PatternStylesOverride): Draws the specific part of the Autochartist Pattern on the TradingView widget provided, styles can be overriden.
The styles for the pattern can be overriden with the following PatternStyles object:
*patternLinesStyle: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
*patternLinesBearishStyle?: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
*patternLinesBullishStyle?: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
*predictionAreaStyle: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
*forecastDefaultStyle: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
*arrowLinesStyle: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
*eventLinesStyle: This object comes from the TradingView JS library, it is the "options" parameter to create Shapes with, see below object fields(could become out of date)
predictionBullishColor?: string;
predictionBearishColor?: string;
arrowBullishColor?: string;
arrowBearishColor?: string;
options: object {shape, [text], [lock], [overrides]}
shape may be one of the identifiers
text is an optional argument. It's the text that will be included in the shape if it's supported. Additional field showLabel in overrides may be necessary.
lock shows whether a user will be able to remove/change/hide the shape or not.
disableSelection prevents selecting of the shape
disableSave prevents saving the shape on the chart
disableUndo prevents adding of the action to the undo stack
overrides is an object containing properties you'd like to set for your new shape.
zOrder can have the following values top, bottom. top places the line tool on top of all other chart objects while bottom places the line tool behind all other chart objects. If not specified the line tool is placed on top of all existing chart objects.
showInObjectsTree: Displays the shape in the Objects Tree dialog. The default value is true.
ownerStudyId: optional argument of EntityId type. It can be used to bind a line tool to a study. For instance, it can be used to create a shape on an additional pane.
