├── images ├── udf.png ├── icons.png ├── jsapi.png ├── tt_dom.png ├── tt_top.png ├── tt_bottom.png ├── tt_charts.png ├── tt_trading.png ├── tv_bar_mark.png ├── tt_orderdialog.png └── udf_or_jsapi.png ├── Marks-On-Bars.md ├── Price-Scale-Api.md ├── Delegate.md ├── Pane-Api.md ├── WatchedValue.md ├── Subscription.md ├── Time-Frames.md ├── Quotes.md ├── Localization.md ├── _Sidebar.md ├── Home.md ├── Trading-Primitives.md ├── Resolution.md ├── Package-Content.md ├── Running-Your-Charting-Library.md ├── Shape-Api.md ├── How-To-Connect-My-Data.md ├── Trading-Sessions.md ├── Study-Api.md ├── Customization-Overview.md ├── Trading-Terminal.md ├── Best-Practices.md ├── Studies-Overrides.md ├── Customization-Use-Cases.md ├── Saving-and-Loading-Charts.md ├── Broker-API.md ├── Breaking-Changes.md ├── Overrides.md ├── Trading-Host.md ├── Trading-Objects-and-Constants.md ├── Frequently-Asked-Questions.md ├── Account-Manager.md ├── Creating-Custom-Studies.md ├── Symbology.md ├── Featuresets.md ├── UDF.md ├── JS-Api.md ├── Widget-Constructor.md └── Widget-Methods.md /images/udf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/udf.png -------------------------------------------------------------------------------- /images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/icons.png -------------------------------------------------------------------------------- /images/jsapi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/jsapi.png -------------------------------------------------------------------------------- /images/tt_dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tt_dom.png -------------------------------------------------------------------------------- /images/tt_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tt_top.png -------------------------------------------------------------------------------- /images/tt_bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tt_bottom.png -------------------------------------------------------------------------------- /images/tt_charts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tt_charts.png -------------------------------------------------------------------------------- /images/tt_trading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tt_trading.png -------------------------------------------------------------------------------- /images/tv_bar_mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tv_bar_mark.png -------------------------------------------------------------------------------- /images/tt_orderdialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/tt_orderdialog.png -------------------------------------------------------------------------------- /images/udf_or_jsapi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serdimoa/charting/HEAD/images/udf_or_jsapi.png -------------------------------------------------------------------------------- /Marks-On-Bars.md: -------------------------------------------------------------------------------- 1 | The Charting Library supports the display of marks on the bars. Here is an example: 2 | 3 | ![images/tv_bar_mark.png](images/tv_bar_mark.png) 4 | 5 | Each mark can have a color, size, label and a pop-up message. Marks are requested from your back-end if it confirmed that it support them. Marks are designed to give you an ability to show a number of events attached to bars. Here are a few examples: 6 | 7 | * News 8 | * Some very specific bar configurations 9 | * Splits/Dividends 10 | * .. etc. 11 | -------------------------------------------------------------------------------- /Price-Scale-Api.md: -------------------------------------------------------------------------------- 1 | ## Price Scale API 2 | 3 | ### getMode() 4 | 5 | Returns current [mode](#pricescalemode) of the price scale. 6 | 7 | ### setMode(newMode) 8 | 9 | 1. `newMode` - new [mode](#pricescalemode) for the price scale 10 | 11 | Changes current mode of the price scale. 12 | 13 | ## Primitive Types 14 | 15 | ### PriceScaleMode 16 | 17 | Available modes price scale can operate in: 18 | 19 | * `0` - normal mode of the price scale 20 | * `1` - logarithmic mode of the price scale 21 | * `2` - percentage mode of the price scale 22 | -------------------------------------------------------------------------------- /Delegate.md: -------------------------------------------------------------------------------- 1 | Delegate is an object that is used in the [Account Manager](Account-Manager) to notify about events happening with orders, positions and other information displayed in the tables. 2 | 3 | ### subscribe(object, member) 4 | 5 | 1. `object` is an owner of `member`, and can be null for a function 6 | 1. `member` is a method of object 7 | 8 | Subscribes `object::member` to the event. 9 | 10 | ### unsubscribe(object, member) 11 | 12 | Unsubscribes `object::member` from the event. 13 | 14 | Use the same object and `member` that you used in the `subscribe` function to unsubscribe from the event. 15 | -------------------------------------------------------------------------------- /Pane-Api.md: -------------------------------------------------------------------------------- 1 | ## Pane API 2 | 3 | ### hasMainSeries() 4 | 5 | Returns `true` if the pane contains the main series. 6 | 7 | ### getLeftPriceScale() 8 | 9 | Returns an instance of the [PriceScaleApi](Price-Scale-Api) that allows you to interact with left price scale. 10 | 11 | ### getRightPriceScale() 12 | 13 | Returns an instance of the [PriceScaleApi](Price-Scale-Api) that allows you to interact with right price scale. 14 | 15 | ### getMainSourcePriceScale() 16 | 17 | Returns: 18 | 19 | * an instance of the [PriceScaleApi](Price-Scale-Api) that allows you to interact with the price scale of the main source 20 | * `null` if the main source is not attached to any price scale (it is in 'No Scale' mode) 21 | -------------------------------------------------------------------------------- /WatchedValue.md: -------------------------------------------------------------------------------- 1 | WatchedValue object is returned by some methods of the [Trading Terminal](Trading-Terminal). Using this object you can get/set some value and be notified when the value is changed. 2 | 3 | ### value() 4 | 5 | Returns current value. 6 | 7 | ### setValue(value) 8 | 9 | Sets new value. 10 | 11 | ### subscribe(callback, options) 12 | 13 | 1. `callback` is a function to be called when the value is changed 14 | 1. `options` is an object with the following properties: 15 | 1. `once` - if it is set to true then the callback will be executed only once 16 | 1. `callWithLast` - if it is set to true then the callback will be executed with the previous value (if available) 17 | 18 | ### unsubscribe(callback) 19 | 20 | Use the same function that you used in the `subscribe` function to unsubscribe from the updates. 21 | -------------------------------------------------------------------------------- /Subscription.md: -------------------------------------------------------------------------------- 1 | Subscription object is returned by [Chart Methods](Chart-Methods). This object allows you to subscribe and unsubscribe to a chart event. It has two methods: 2 | 3 | ### subscribe(object, method, singleshot) 4 | 5 | 1. `object` is a context to be used as `this` pointer for the `method` function. Use `null` if you don't need the context. 6 | 1. `method` is a function to be called when the event happens. 7 | 1. `singleshot` is an optional argument. Set it to `true` if you wish to be unsubscribed automatically when the event happens for the first time. 8 | 9 | ### unsubscribe(object, method) 10 | 11 | Use the same `object` and `method` that you used in the `subscribe` function to unsubscribe from the event. 12 | 13 | ### unsubscribeAll(object) 14 | 15 | Use the same `object` that you used in `subscribe` function to unsubscribe `object` from all events. 16 | -------------------------------------------------------------------------------- /Time-Frames.md: -------------------------------------------------------------------------------- 1 | You can see the toolbar at the bottom of the chart. Each of those buttons on the left side switches the chart time frame. Switching time frame means: 2 | 3 | 1. Switch the chart resolution 4 | 1. Force the bars to scale horizontally in order to cover the entire requested date/time range. 5 | 6 | I.e., clicking `1Y` will make the chart switch the resolution to `1D` and scale it accordingly to display daily bars for the entire year. Each time frame has its own chart resolution. Here it the list of default time frames: 7 | 8 | Time Frame|Chart Resolution 9 | ---|--- 10 | 5Y|W 11 | 1Y|D 12 | 6M|120 13 | 3M|60 14 | 1M|30 15 | 5D|5 16 | 1D|1 17 | 18 | You can customize default time frames using the [time_frames](Widget-Constructor#time_frames) argument of the widget constructor. 19 | 20 | **Remark**: Time frames that require resolutions which are not available for a particular symbol will be hidden. 21 | -------------------------------------------------------------------------------- /Quotes.md: -------------------------------------------------------------------------------- 1 | Quote is a short set of data that describes the current price. Charting Library supports watchlists (in **Trading Terminal** configuration) and uses quotes to display symbol information. 2 | 3 | Charting Library uses the same data structures for quotes in both [JS API](JS Api) and [UDF](UDF). Here is the description of response object: 4 | 5 | # Symbol Quote Data 6 | 7 | * `s`: Status code for symbol. Expected values: `ok` | `error` 8 | * `n`: Symbol name. This value must be **exactly the same** as in the request 9 | * `v`: object, symbol quote itself 10 | * `ch`: price change (usually counts as an open price on a particular day) 11 | * `chp`: price change percentage 12 | * `short_name`: short name of the symbol 13 | * `exchange`: the exchange name 14 | * `description`: short description of the symbol 15 | * `lp`: last traded price 16 | * `ask`: ask price 17 | * `bid`: bid price 18 | * `spread`: spread 19 | * `open_price`: today's open 20 | * `high_price`: today's high 21 | * `low_price`: today's low 22 | * `prev_close_price`: yesterday's close 23 | * `volume`: today's volume 24 | -------------------------------------------------------------------------------- /Localization.md: -------------------------------------------------------------------------------- 1 | The Charting Library supports localization. It has been translated to a number of languages already. All you have to do to change your Charting Library language is to specify `locale` parameter when creating the Library widget. 2 | 3 | Our translations are crowd-sourced so everyone can participate. Visit [our page on WebTranslateIt](https://webtranslateit.com/en/projects/11203-TradingView) to participate. 4 | 5 | Supported languages: 6 | 7 | Language | `locale` argument value 8 | ---|--- 9 | Arabic|ar 10 | Chinese (Taiwan)|zh_TW 11 | Chinese|zh 12 | Czech|cs 13 | Danish (Denmark)|da_DK 14 | Dutch (Netherlands)|nl_NL 15 | English|en 16 | Estonian (Estonia)|et_EE 17 | French|fr 18 | German (Germany)|de 19 | Greek|el 20 | Hebrew (Israel)|he_IL 21 | Hungarian (Hungary)|hu_HU 22 | Indonesian (Indonesia)|id_ID 23 | Italian|it 24 | Japanese|ja 25 | Korean|ko 26 | Malay (Malaysia)|ms_MY 27 | Norwegian Bokmål|no 28 | Persian (Iran)|fa 29 | Polish|pl 30 | Portuguese|pt 31 | Romanian|ro 32 | Russian|ru 33 | Slovak (Slovakia)|sk_SK 34 | Spanish|es 35 | Swedish|sv 36 | Thai (Thailand)|th 37 | Turkish|tr 38 | Vietnamese|vi 39 | -------------------------------------------------------------------------------- /_Sidebar.md: -------------------------------------------------------------------------------- 1 | # Wiki Content 2 | 3 | 1. [What is Charting Library](Home) 4 | 1. Getting Started 5 | 1. [Package Content](Package-Content) 6 | 1. [Running Your Charting Library](Running-Your-Charting-Library) 7 | 1. [Best Practices](Best-Practices) 8 | 1. [Frequently Asked Questions](Frequently-Asked-Questions) 9 | 1. Data Binding 10 | 1. [How To Connect My Data](How-To-Connect-My-Data) 11 | 1. [JS API](JS-Api) 12 | 1. [UDF](UDF) 13 | 1. [Symbology](Symbology) 14 | 1. [Trading Sessions](Trading-Sessions) 15 | 1. [Quotes](Quotes) 16 | 1. Chart Customization 17 | 1. [Customization Overview](Customization-Overview) 18 | 1. Client-Side Customization 19 | 1. [Widget Constructor](Widget-Constructor) 20 | 1. [Widget Methods](Widget-Methods) 21 | 1. [Chart Methods](Chart-Methods) 22 | 1. [Featuresets](Featuresets) 23 | 1. [Server-Side Customization](Customization-Overview#customization-done-through-data-stream) 24 | 1. [Customization Use Cases](Customization-Use-Cases) 25 | 1. Trading Terminal 26 | 1. [Brief Intro](Trading-Terminal) 27 | 1. [Broker API](Broker-API) 28 | 1. [Trading Host](Trading-Host) 29 | 1. [Account Manager](Account-Manager) 30 | 1. [Trading Objects and Constants](Trading-Objects-and-Constants) 31 | 1. [Saving/Loading Charts](Saving-and-Loading-Charts) 32 | 1. [Creating Custom Studies](Creating-Custom-Studies) 33 | 1. [Breaking changes in versions](Breaking-Changes) 34 | -------------------------------------------------------------------------------- /Home.md: -------------------------------------------------------------------------------- 1 | ### Charting Library 2 | 3 | Charting library is a standalone solution that you download, host on your servers, connect your own data & use in your site/app for free. 4 | 5 | | What to do | What you'll get after | 6 | |---|---| 7 | |1. `git clone` your [copy of Charting Library](Package-Content) and then [run it](Running-Your-Charting-Library)|A working example of our chart running on your host| 8 | |2. Plug your data into Charting Library using [one of our APIs](How-To-Connect-My-Data). You can see some examples [here](How-To-Connect-My-Data#examples)|The complete and working charting tool with your own data| 9 | 10 | If you want to customize your charts, then you may go further. 11 | 12 | * Read Charting Library [Customization Overview](Customization-Overview) and [Customization Use Cases](Customization-Use-Cases) 13 | * [Creating Custom Studies](Creating-Custom-Studies) 14 | 15 | ### Examples 16 | 17 | We’ve got a [public GitHub repository](https://github.com/tradingview/charting-library-examples) that includes examples of Charting Library integration. The examples illustrate how it can be integrated with different Web Frameworks. 18 | 19 | ### Trading Terminal 20 | 21 | :chart: Trading Terminal is a ready-to-use product for those who want to have a great charting solution along with the ability to trade right from the chart. [Read more](Trading-Terminal). 22 | 23 | ### Best Practices 24 | 25 | Reading [this article](Best-Practices) will prevent you from making the most common mistakes and will **save your time**. 26 | -------------------------------------------------------------------------------- /Trading-Primitives.md: -------------------------------------------------------------------------------- 1 | Trading Primitives is a low-level mechanism that is designed to give you the most detailed control over trading primitives behavior. 2 | 3 | ## Generic data 4 | 5 | ### Properties 6 | 7 | You can use special value `inherit` for some properties of the Trading Primitives. This will make the Library use its default value for this property. 8 | 9 | You can enable the `trading_options` feature to show Trading GUI controls in the chart properties window. 10 | 11 | You can’t control the visibility of a specific object. Properties of positions, orders and executions can be changed in the Trading tab of the Chart Properties window. 12 | 13 | ### Colors and Fonts 14 | 15 | You can use following string formats for setting the colors: 16 | 17 | 1. `#RGB` 18 | 1. `#RRGGBB` 19 | 1. `rgb(red, green, blue)` 20 | 1. `rgba(red, green, blue, alpha)` 21 | 22 | You can use the following string format for setting the fonts: ` pt `. 23 | 24 | ### Line Styles 25 | 26 | The following line styles are supported: 27 | 28 | Style|Value 29 | ---|--- 30 | Solid|0 31 | Dotted|1 32 | Dashed|2 33 | 34 | ### Callbacks 35 | 36 | 1. You can use `this` keyword to access an API-object from within the callback function 37 | 1. You can pass two arguments to callback registration function - in this case first argument is an object which will be passed as first argument to callback function. 38 | 1. If callback isn’t set, then respective button will be hidden (affects `onReverse`, `onClose` and `onCancel` callbacks). 39 | -------------------------------------------------------------------------------- /Resolution.md: -------------------------------------------------------------------------------- 1 | Resolution or time interval is a time period of one bar. The Charting Library supports intraday resolutions (seconds, minutes, hours) and DWM resolutions (daily, weekly, monthly). 2 | Charting Library API has lots of methods that accept and return resolutions. 3 | 4 | ## Intraday 5 | 6 | ### Seconds 7 | 8 | Format: `xS`, where `x` is a number of seconds. 9 | 10 | Example: `1S` - one second, `2S` - two seconds, `100S` - one hundred seconds. 11 | 12 | ### Minutes 13 | 14 | Format: `x`, where `x` is a number of minutes. 15 | 16 | Example: `1` - one minute, `2` - two minutes, `100` - one hundred minutes. 17 | 18 | ### Hours 19 | 20 | **Important:** while user interface allows a user to enter a number of hours as `xh` or `xH`, it is never passed to the API. Hours are always set using minutes in the Charting Library API. 21 | 22 | Example: `60` - one hour, `120` - two hours, `240` - four hours. 23 | 24 | ## DWM 25 | 26 | ### Days 27 | 28 | Format: `xD`, where `x` is a number of days. 29 | 30 | Example: `1D` - one day, `2D` - two days, `100D` - one hundred days. 31 | 32 | ### Weeks 33 | 34 | Format: `xW`, where `x` is a number of weeks. 35 | 36 | Example: `1W` - one week, `2W` - two weeks, `100W` - one hundred weeks. 37 | 38 | ### Months 39 | 40 | Format: `xM`, where `x` is a number of months. 41 | 42 | Example: `1M` - one month, `2M` - two months, `100M` - one hundred months. 43 | 44 | ### Years 45 | 46 | Years are set using months. 47 | 48 | Example: `12M` - one year, `24M` - two year, `48M` - four years. 49 | 50 | ## See also 51 | 52 | * [How to set a list of available resolutions on a chart](JS-Api#supported_resolutions) 53 | * [How to set a list of resolutions supported by the financial instrument](Symbology#supported_resolutions) 54 | * [Set initial resolution on a chart](Widget-Constructor#symbol-interval) 55 | * [Get current chart resolution](Chart-Methods#resolution) 56 | * [Change resolution on a chart](Chart-Methods#setresolutionresolution-callback) 57 | -------------------------------------------------------------------------------- /Package-Content.md: -------------------------------------------------------------------------------- 1 | The Charting Library package is available on GitHub. You may check out the latest stable version (`master` branch) or the most recent beta version (`unstable` branch). Please get in touch with us to get access to this repository. 2 | 3 | You can check the Charting Library version by entering the `TradingView.version()` command in a browser console. 4 | 5 | ### Package content 6 | 7 | 8 | 9 | ``` 10 | +/charting_library 11 | + /static 12 | - charting_library.min.js 13 | - charting_library.min.d.ts 14 | - datafeed-api.d.ts 15 | + /datafeeds 16 | + /udf 17 | - index.html 18 | - mobile_black.html 19 | - mobile_white.html 20 | - test.html 21 | ``` 22 | 23 | * `/charting_library` contains all the Charting Library files. 24 | * `/charting_library/charting_library.min.js` contains an external Charting Library widget interface. This file is not supposed to be edited. 25 | * `/charting_library/charting_library.min.d.ts` contains TypeScript definitions for the widget interface. 26 | * `/charting_library/datafeed-api.d.ts` contains TypeScript definitions for the data feed interface. 27 | * `/charting_library/datafeeds/udf/` contains [UDF-compatible](UDF) datafeed wrapper (implements [JS API](JS-Api) to connect to Charting Library and UDF to connect to datafeed). Sample datafeed wrapper implements pulse real-time emulation. You are free to edit its code. 28 | * `/charting_library/static` folder stores Charting Library internal content and is not intended for other purposes. 29 | * `/index.html` is an example of using Charting Library widget on your web page. 30 | * `/test.html` is an example of using different Charting Library customization features. 31 | * `/mobile*.html` are also examples of Widget customization. 32 | 33 | All internal JS and CSS codes of the Charting Library are inlined and minified to reduce the page load time. Files that are expected to be edited by you were not minified. 34 | -------------------------------------------------------------------------------- /Running-Your-Charting-Library.md: -------------------------------------------------------------------------------- 1 | The Charting Library works out of the box, but you have to set up your HTTP server to bind Library’s folder to a certain domain name. 2 | 3 | # Let’s start the Charting Library on your local computer 4 | 5 | ## 1. Clone this repository 6 | 7 | [Cloning a repository](https://help.github.com/articles/cloning-a-repository/) 8 | 9 | ## 2. Start an HTTP server 10 | 11 | You may set up any HTTP server to listen to any of your host’s free ports and refer to the folder containing the Charting Library. Below you will find instructions on how to start several most common HTTP servers. 12 | 13 | ### Python 2.x 14 | 15 | If you have Python installed on your computer then you can use it to start an HTTP server in a quick manner. 16 | 17 | Execute the following command in the Charting Library folder: 18 | 19 | `python -m SimpleHTTPServer 9090` 20 | 21 | ### Python 3.x 22 | 23 | `python -m http.server 9090` 24 | 25 | ### NodeJS 26 | 27 | First install `http-server`: 28 | 29 | `npm install http-server -g` 30 | 31 | Start `http-server` using the following command in the Charting Library folder: 32 | 33 | `http-server -p 9090` 34 | 35 | ### NGINX 36 | 37 | - Install NGINX 38 | - Open the config file `nginx.conf` and write the following text in the `http` section of the file: 39 | 40 | ```javascript 41 | server { 42 | listen 9090; 43 | server_name localhost; 44 | 45 | location / { 46 | root ABSOLUTE_PATH_TO_THE_CHARTING_LIBRARY; 47 | } 48 | } 49 | ``` 50 | 51 | - Replace `ABSOLUTE_PATH_TO_THE_CHARTING_LIBRARY` with the absolute path to the charting library folder. 52 | - Run `nginx` 53 | 54 | ## 3. Open the Charting Library in your browser 55 | 56 | Once you are done running the HTTP server, you will have your Charting Library ready. 57 | 58 | Open `http://127.0.0.1:9090` in your browser. 59 | 60 | # Online Example 61 | 62 | You may see the working example of Charting Library [here](http://demo_chart.tradingview.com). This example is based on our [sample data feed.](http://demo_feed.tradingview.com) 63 | 64 | **IMPORTANT**: This datafeed is just a sample. It contains a dozen of symbols (from Quandl) and provides DWM only. It does however support quotes. Please use it for testing purposes only. 65 | -------------------------------------------------------------------------------- /Shape-Api.md: -------------------------------------------------------------------------------- 1 | ## Shape API 2 | 3 | ### isSelectionEnabled() 4 | 5 | Returns `true` if the shape cannot be selected by a user. 6 | 7 | ### setSelectionEnabled(enable) 8 | 9 | 1. `enable` - `true` or `false` 10 | 11 | Enables or disables shape selection (see `disableSelection` option of `createMultipointShape`). 12 | 13 | ### isSavingEnabled() 14 | 15 | Returns `true` if the shape is not saved on the chart. 16 | 17 | ### setSavingEnabled(enable) 18 | 19 | 1. `enable` - `true` or `false` 20 | 21 | Enables or disables saving of the shape in the chart layout (see `disableSave` option of `createMultipointShape`). 22 | 23 | ### isShowInObjectsTreeEnabled() 24 | 25 | Returns `true` if the shape is displayed in the Objects Tree dialog. 26 | 27 | ### setShowInObjectsTreeEnabled(enabled) 28 | 29 | 1. `enabled` - `true` or `false` 30 | 31 | Enables or disables displaying of the shape in the Objects Tree dialog. 32 | 33 | ### isUserEditEnabled() 34 | 35 | Returns `true` if a user can remove/change/hide the shape. 36 | 37 | ### setUserEditEnabled(enabled) 38 | 39 | 1. `enabled` - `true` or `false` 40 | 41 | Enables or disables removing/changing/hiding of the shape by a user 42 | 43 | ### bringToFront() 44 | 45 | Places the line tool on top of all other chart objects. 46 | 47 | ### sendToBack() 48 | 49 | Places the line tool behind all other chart objects. 50 | 51 | ### getProperties() 52 | 53 | Gets all the properties of the shape. 54 | 55 | ### setProperties(properties) 56 | 57 | 1. `properties` - an object with new properties. It should have the same structure as an object from [getProperties](#getproperties). 58 | It can only include the properties that you want to override. 59 | 60 | Sets the properties of the shape. 61 | 62 | ### getPoints() 63 | 64 | Returns the points of the shape - an array of the [PricedPoint](#pricedpoint) objects. 65 | 66 | ### setPoints(points) 67 | 68 | 1. `points` - an array with the new points for the shape. The format of each shape is the same as `points` argument from [createMultipointShape](Chart-Methods#createmultipointshapepoints-options) method. 69 | 70 | Set the new points of the shape. 71 | 72 | ## Primitive Types 73 | 74 | ### PricedPoint 75 | 76 | An object with the following keys: 77 | 78 | * `price` - price value of the point 79 | * `time` - time of the point 80 | -------------------------------------------------------------------------------- /How-To-Connect-My-Data.md: -------------------------------------------------------------------------------- 1 | **The Charting Library does NOT include market data.** You must provide your own data in the required format. Quandl historical data is used as a sample. The charts can receive data in two ways: 2 | 3 | 1. Update in real-time with a PUSH type connection, for example through WebSocket. 4 | This way your charts will auto update with new prices when they arrive. 5 | To achieve this, you have to use the [JavaScript API](JS-Api) and have your own transport method ready. 6 | 7 | 1. Update on a PULL/pulse/refresh basis (like most web-based charts today), 8 | where the chart data is updating every X number of seconds (the chart client will ask the server emulating PUSH updates), 9 | or only get reloaded manually by the user. For this, use the [UDF protocol](UDF) and write your own datafeed wrapper. 10 | 11 | ### JavaScript API or UDF 12 | 13 | ![images/udf_or_jsapi.png](images/udf_or_jsapi.png) 14 | 15 | ## UDF scheme 16 | 17 | ![images/udf.png](images/udf.png) 18 | 19 | ## JSAPI scheme 20 | 21 | ![images/jsapi.png](images/jsapi.png) 22 | 23 | The pictures above illustrate the difference between UDF and JSAPI. Mandatory Charting Library parts are colored blue. Red parts (default data transport) are included in default package (having non-minimized source code) and may be replaced. You may see the default data transport implements JS API to interact with the chart. Also, default transport implements UDF protocol to communicate with a server. 24 | 25 | 1. **If you already have a data transport ready** (websocket streaming, pulling, or any other transport), 26 | or if you don’t but need streaming data - use our [JavaScript API](JS-Api), which is extremely compact and simple to implement. 27 | You will have to create a small **client-side data adapter** between your data transport and our charts using JavaScript. 28 | 29 | 1. **If you don’t have any transports** and do not need streaming data (e.g., data pulsing is all you need), 30 | then you will have to create (or use) at least a thin server-side datafeed wrapper. 31 | You may use any language and technology for this purpose: it’s just necessary for your wrapper to support our data exchange protocol (we call it [UDF](UDF)) to be able to feed your Charting Library with data. 32 | You will have to create a small **server-side data adapter** between your back-end and our charts using your favorite language. 33 | 34 | ### Examples 35 | 36 | A sample implementation of **UDF-compatible** (case #2 described below) server-side wrapper is available [on github](https://github.com/tradingview/yahoo_datafeed). It uses Quandl data. 37 | 38 | A sample of **JS API** implementation (and UDF client-side at the same time) is a part of Charting Library package (see `/datafeeds/udf/` folder). 39 | -------------------------------------------------------------------------------- /Trading-Sessions.md: -------------------------------------------------------------------------------- 1 | Trading session of a particular symbol is passed to the Charting Library in the `session` field of the symbol information. 2 | Session time format is `HHMM-HHMM` in the Charting Library. 3 | E.g., A session that starts at 9:30am and ends at 4:00 pm should look like `0930-1600`. 4 | There is a special case for symbols traded 24/7 (e.g., Bitcoin and other cryptocurrencies): the session string should be `24x7`. 5 | 6 | Session time is expected to be in **exchange time zone**. 7 | 8 | If session start time is greater than end time (ie, `1700-0900`), this session will be treated as an overnight one. 9 | 10 | Overnight session always starts on the previous day: e.g., if the symbol is traded Monday-Friday `1700-0900`, then the first session of the week will be treated as if it started at 17:00 of the previous week and ended at 09:00 on Monday of this week. 11 | 12 | There may be more than one session in a trading day. If that's the case, you should pass all of them as sessions separated with comma. 13 | E.g., assuming you have 2 trading sessions within a single day - 9:30 to 14:00 and then from 14:30 to 17:00, the day session string should be `0930-1400,1430-1700`. 14 | 15 | Also, there may be a situation when trading hours differ from day to day. 16 | You can use the `:` specifier to assign the day the session should be applied to. 17 | E.g., if the symbol is traded between 0900-1630 every day except for Monday (on Mondays, the trading session starts at 0900 and ends at 1400),then the session string should be `0900-1630|0900-1400:2`. 18 | 19 | Let's see this string in details. 20 | 21 | Fragment | Meaning 22 | ---------|-------- 23 | 0900-1630|A session 0900-1630. This session will be assigned by default to all non-weekend days because it's not followed by the `:` specifier. 24 | ||Sessions separator. This character divides different sessions. 25 | 0900-1400|A session 0900-1400. It's the session for a day #2 (see below) 26 | :|Day specifier. This character follows the session hours and is followed by the day number. 27 | 2|The day number for the session above (0900-1400) 28 | 29 | **Day numbers** are `1` for **Sunday** and `7` for **Saturday** (`2` - Monday, `3` - Tuesday, etc.). 30 | 31 | You can specify more than 1 day for a single session. 32 | E.g., in `0900-1630|0900-1400:23` `0900-1400` sessions will be assigned to days `2` and `3` (Monday, Tuesday). 33 | 34 | **version: 1.1**: 35 | 36 | You can specify the first trading day of the week using semicolon. Examples: 37 | 38 | - `1;0900-1630|0900-1400:2` - first day of the week is Sunday 39 | - `0900-1630|0900-1400:2;6` - first day of the week is Saturday 40 | - `0900-1630|0900-1400:2` - first day of the week is Monday (default value) 41 | 42 | **Use this parser to check your session string**: 43 | -------------------------------------------------------------------------------- /Study-Api.md: -------------------------------------------------------------------------------- 1 | ## Study API 2 | 3 | ### isUserEditEnabled() 4 | 5 | Returns `true` if a user is able to remove/change/hide the study. 6 | 7 | ### setUserEditEnabled(enabled) 8 | 9 | 1. `enabled` - `true` or `false` 10 | 11 | Enables or disables removing/changing/hiding a study by the user. 12 | 13 | ### getInputsInfo() 14 | 15 | Returns the information about all the inputs - an array of [StudyInputInfo](#studyinputinfo) objects. 16 | 17 | ### getInputValues() 18 | 19 | Returns values of study inputs - an array of [StudyInputValueItem](#studyinputvalueitem) objects. 20 | 21 | ### setInputValues(inputs) 22 | 23 | 1. `inputs` should be an array of [StudyInputValueItem](#studyinputvalueitem) objects. 24 | 25 | Sets input values for a study. It may contain only some of the inputs that you wish to change. 26 | 27 | ### mergeUp() 28 | 29 | Merges the study up (if possible). 30 | 31 | ### mergeDown() 32 | 33 | Merges the study down (if possible). 34 | 35 | ### unmergeUp() 36 | 37 | Unmerges the study up (if possible). 38 | 39 | ### unmergeDown() 40 | 41 | Unmerges the study down (if possible). 42 | 43 | ### changePriceScale(priceScale) 44 | 45 | 1. `priceScale` should be a string with one of the following values: 46 | * `left` - attach the study to the left price scale 47 | * `right` - attach the study to the right price scale 48 | * `no-scale` - do not attach the study to any price scale. The study will be added in 'No Scale' mode 49 | * `as-series` - attach the study to the price scale where the main series is attached (it is only applicable if the study and the main series are located on the same pane) 50 | 51 | Changes the price scale of the study 52 | 53 | ### isVisible() 54 | 55 | Returns `true` if the study is visible. 56 | 57 | ### setVisible(value) 58 | 59 | 1. `value` - `true` or `false` 60 | 61 | Shows/hides the study. 62 | 63 | ### bringToFront() 64 | 65 | Places the study on top of all other chart objects. 66 | 67 | ### sendToBack() 68 | 69 | Places the study behind all other chart objects. 70 | 71 | ### applyOverrides(overrides) 72 | 73 | 1. `overrides` - new [overrides](Studies-Overrides) for the study 74 | 75 | Applies `overrides` to the study. 76 | 77 | Note: `overrides` object keys don’t need to start with the study name. The key is applied to a particular study. 78 | For example, you should use `style` instead of `Overlay.style` to override the current style of the Overlay study. 79 | 80 | ## Primitive types 81 | 82 | ### StudyInputInfo 83 | 84 | An object with the following keys: 85 | 86 | * `id` - input ID of the study 87 | * `name` - name of the input 88 | * `type` - type of the input 89 | * `localizedName` - name of the input translated to the current language 90 | 91 | ### StudyInputValueItem 92 | 93 | An object with the following keys: 94 | 95 | * `id` - input ID of the study 96 | * `value` - value of the input 97 | -------------------------------------------------------------------------------- /Customization-Overview.md: -------------------------------------------------------------------------------- 1 | Customization is a broad concept which is why we included several articles about it. 2 | 3 | ## Customization done through data stream 4 | 5 | These are mostly data-related customizations. They are done using a datafeed configuration response. 6 | 7 | Here is an example of a configuration response. 8 | 9 | ```javascript 10 | { 11 | supports_search: true, 12 | supports_marks: true, 13 | exchanges: [ 14 | {value: "", name: "All Exchanges", desc: ""}, 15 | {value: "XETRA", name: "XETRA", desc: "XETRA"}, 16 | {value: "NSE", name: "NSE", desc: "NSE"} 17 | ], 18 | symbolsTypes: [ 19 | {name: "All types", value: ""}, 20 | {name: "Stock", value: "stock"}, 21 | {name: "Index", value: "index"} 22 | ], 23 | supportedResolutions: [ "1", "15", "30", "60", "1D", "2D", "3D", "1W", "3W", "1M", '6M' ] 24 | } 25 | ``` 26 | 27 | You can find the detailed descriptions of these parameters on the [JS API page](JS-Api#onreadycallback). 28 | 29 | ## Customizations that are done on the client-side 30 | 31 | These customizations affect most of the UI/UX. They are done using chart widget constructor arguments. 32 | 33 | Here is an example of a widget constructor call. 34 | 35 | ```javascript 36 | var widget = new TradingView.widget({ 37 | fullscreen: true, 38 | symbol: 'AA', 39 | interval: 'D', 40 | toolbar_bg: '#f4f7f9', 41 | allow_symbol_change: true, 42 | container_id: "tv_chart_container", 43 | datafeed: new Datafeeds.UDFCompatibleDatafeed("http://demo_feed.tradingview.com"), 44 | library_path: "charting_library/", 45 | locale: "en", 46 | drawings_access: { type: 'black', tools: [ { name: "Trend Line" } ] }, 47 | disabled_features: ["use_localstorage_for_settings", "volume_force_overlay"], 48 | enabled_features: ["move_logo_to_main_pane"], 49 | overrides: { 50 | "mainSeriesProperties.style": 0, 51 | "symbolWatermarkProperties.color" : "#944", 52 | "volumePaneSize": "tiny" 53 | }, 54 | studies_overrides: { 55 | "bollinger bands.median.color": "#33FF88", 56 | "bollinger bands.upper.linewidth": 7 57 | }, 58 | debug: true, 59 | time_frames: [ 60 | { text: "50y", resolution: "6M" }, 61 | { text: "1d", resolution: "5" }, 62 | ], 63 | charts_storage_url: 'http://saveload.tradingview.com', 64 | client_id: 'tradingview.com', 65 | user_id: 'public_user', 66 | favorites: { 67 | intervals: ["1D", "3D", "3W", "1W", "1M"], 68 | chartTypes: ["Area", "Line"] 69 | } 70 | }); 71 | ``` 72 | 73 | More details are available in the [Widget Constructor Arguments article](Widget-Constructor). 74 | 75 | ## See Also 76 | 77 | * [Widget's Constructor Arguments](Widget-Constructor) 78 | * [Widget's Methods](Widget-Methods) 79 | * [Customization Use Cases](Customization-Use-Cases) 80 | -------------------------------------------------------------------------------- /Trading-Terminal.md: -------------------------------------------------------------------------------- 1 | :chart: All content on this page applies to Trading Terminal only. 2 | 3 | Trading Terminal is a ready-to-use product for those who want to have a great charting solution along with the ability to trade right from the chart. 4 | 5 | This product is based on a Charting Library and includes all of its functionality, but also contains a bunch of additional features. 6 | 7 | Trading Terminal repository is [here](https://github.com/tradingview/trading_platform). 8 | 9 | ## Trading Terminal Features 10 | 11 | ### Trading Capabilities 12 | 13 | You can trade right from the chart, and all you have to do to make this work is to implement your [Broker API](Broker-API) and plug it into the chart widget. 14 | 15 | ![images/tt_trading.png](images/tt_trading.png) 16 | 17 | ### Advanced Order Dialog 18 | 19 | Fully customizable order dialog allows to place Market/Limit/Stop/Stop Limit orders, enter Stop Loss and Take Profit prices, 20 | choose expiration and calculate risks. 21 | 22 | ![images/tt_orderdialog.png](images/tt_orderdialog.png) 23 | 24 | ### Account Manager 25 | 26 | You can display orders/positions and account information in an interactive table at the bottom. 27 | 28 | **Read more about this feature:** 29 | 30 | * [How to enable Account Manager](Account-Manager) 31 | 32 | ### DOM Widget 33 | 34 | You can display orders/positions and Level 2 data in an interactive DOM widget. 35 | 36 | ![images/tt_dom.png](images/tt_dom.png) 37 | 38 | ### Sidebar Quotes (Symbol Details & Watchlist) 39 | 40 | In the Trading Terminal, you can have the functionality of the Watchlist and Details widget (see the snapshot below). 41 | 42 | ![images/tt_top.png](images/tt_top.png) 43 | 44 | **Read more about this feature:** 45 | 46 | * [How to enable sidebar quotes](Widget-Constructor#widgetbar) 47 | * How to provide the data for quotes: depends on the type of data integration that you use - [JS API](JS-Api#trading-terminal-specific) or [UDF](UDF#quotes) 48 | 49 | ### Sidebar Market News Feed 50 | 51 | You can have the news feed right in the sidebar of the chart. We are quite flexible in supporting various news feeds and you can have different feeds for different kinds of symbols as per the example below. 52 | 53 | ![images/tt_bottom.png](images/tt_bottom.png) 54 | 55 | **Read more about this feature:** 56 | 57 | * [Enabling sidebar news](Widget-Constructor#widgetbar) 58 | * [Setting up different news feeds](Widget-Constructor#rss_news_feed) 59 | 60 | ### Multiple charts layout 61 | 62 | You can have multiple charts inside of a single widget. This gives your user the ability to use a wide range of strategies, as well as the ability to have a broad view of the market. You don't have to do anything to enable or tweak it: it works out-of-the-box. 63 | 64 | ![images/tt_charts.png](images/tt_charts.png) 65 | 66 | ### Japanese chart types: Kagi, Renko, Point & Figure, Line Break 67 | 68 | These types of charts will be available out-of-the-box, just like Heikin-Ashi is available in the Charting Library. 69 | 70 | 71 | 72 | ### Volume Profile :clock4: 73 | 74 | This study will require some server-side support. We'll provide more details when it's ready. 75 | 76 | ### Drawing Tools Templates :clock4: 77 | 78 | This functionality will require the support from your backend. We'll update our open-source data backend to support this feature also, so consider using it to minimize the efforts from your side. 79 | 80 | 81 | 82 | ## How To Work With The Docs 83 | 84 | Since Trading Terminal is based on the Charting Library, we decided to merge the documentation into a single Wiki. 85 | All the docs are stored in one place. 86 | 87 | Note that the specific features that are available in the Trading Terminal only are marked with this green sign :chart:. 88 | 89 | ## See Also 90 | 91 | * [How to connect your trading back-end to the Trading Terminal](Broker-API) 92 | * [Widget methods specific for Trading Terminal](Widget-Methods#chart-trading-terminal-only) 93 | * [Widget constructor parameters specific for Trading Terminal](Widget-Constructor#trading-terminal-only) 94 | -------------------------------------------------------------------------------- /Best-Practices.md: -------------------------------------------------------------------------------- 1 | ## Creating the best user experience 2 | 3 | We love our charts. We want them to be the best, the most beautiful, the most responsive and the most powerful charts in the whole HTML5 world. We are working hard to reach these goals. 4 | 5 | We know all about our charts and about creating the best user experience using them and we'd be glad to share our knowledge with you. This document describes several best practices for integrating the Charting Library into your website/application. The main point is to always think about your users and their experience. 6 | 7 | ### 1. Understand what Charting Library IS and what it ISN’T 8 | 9 | Charting Library is a charting component that is able to show prices, charts & technical analysis tools. Our Library does the chart magic, and nothing more. If you want some additional functionality (like chats, special symbols list, hottest deals, ads, etc) the best approach is to implement them outside of the chart. However, if you want to link your outside functionality with the library, you can use the library’s API to link them. 10 | 11 | ### 2. Return exactly as many bars as the Library requests 12 | 13 | Library will ask your backend for data and provide the required data range bounds with each request. Respect these bounds and return data filling this range as fully as possible. Do not return more bars. Do not return bars out of the requested range. If you want to extend the default data range requested by the Library, use our JS API (see calculateHistoryDepth). 14 | 15 | ### 3. Return exactly as many marks as the Library requests 16 | 17 | The same as for the bars above. Send only marks matching the requested range. 18 | 19 | ### 4. Do not override calculateHistoryDepth() to get more than 2 screens of data 20 | 21 | Charting Library avoids loading content which the user didn’t ask for. Loading more bars into the chart means loading the CPU and memory with more operations than necessary. This means responsiveness of the whole solution decreases. 22 | 23 | ### 5. Do not make your chart look messy 24 | 25 | Users like beautiful charts. So do we. Please remember to keep your chart looking good when customizing size or style. Avoid embedding custom controls that look alien to the entire chart's style. 26 | 27 | ### 6. Avoid making very small charts 28 | 29 | The smallest meaningful size that the Library supports is 600x600px. Avoid making charts smaller because it looks like a mess. Use the `mobile` preset, or hide some toolbars if you need charts smaller than mentioned above. 30 | 31 | ### 7. Use the appropriate language 32 | 33 | The Charting Library is translated into dozens of languages. Use the one that fits your users' needs. 34 | 35 | ### 8. If you are experiencing issues 36 | 37 | We are always eager to help you. But, unfortunately, we are really busy guys, so we don’t have much time. Please help us spend our time effectively and always update your Library's build to the latest `unstable` version to check if the issue still happens. Contact us if it does. 38 | 39 | Also, check the data you are passing to the Charting Library and make sure it matches our requirements as described in the documentation. Pay special attention to SymbolInfo content because it's the most common place to make an error (according to our statistics). 40 | 41 | You can watch the output of our [demo data service](https://demo_feed.tradingview.com/quotes?symbols=AAPL) and compare it to yours to ensure your backend behaves like it should. 42 | 43 | Always use `debug: true` in the Widget constructor options during the development and always remove it in the production to make the code work faster. 44 | 45 | ### 9. Read the docs 46 | 47 | We spent a lot of time creating those docs for you to make your life easier. Please give it a try. 48 | 49 | ### 10. Choose an appropriate data transport for your solution 50 | 51 | Pay attention to differences between JS API and UDF, and choose the API that fits your needs best. 52 | Do not use UDF if you need really fast data updates or data streaming. 53 | Do not use UDF with data grouping (see `supports_group_request`) if your backend has more than a dozen symbols. 54 | 55 | ### 11. Do not try to sniff our code and use undocumented features 56 | 57 | All features not mentioned in our documentation are subjects to change without any warnings and backward compatibility. Also, altering the source code is strictly prohibited by the legal agreement you signed. 58 | 59 | ### 12. Do not use our demo datafeed on your production website 60 | 61 | This datafeed is just a demo and is not intended for real usage. It may be unstable and can't bear significant load. 62 | 63 | ### 13. Use the API for customization. Avoid editing CSS 64 | 65 | We do not guarantee CSS selectors' backward compatibility. 66 | 67 | ### 14. Set up your server to gzip files when sending to client 68 | 69 | This is the common best practice for static HTML content. Gzipping the Library's HTML file will decrease your users' waiting time. 70 | 71 | ### 15. Set minimum expiration time for charting_library.min.js 72 | 73 | All files in the Charting Library contain hash in their names, except for `charting_library.min.js` that you add to your HTML files. 74 | When you update the Charting Library to a newer version all file names are changed as well. 75 | If a browser loads `charting_library.min.js` from the cache, then all the links in this file are going to be broken. 76 | The expiration time for this file should be set to the minimum in order to make sure that it’s not cached by the browser. 77 | -------------------------------------------------------------------------------- /Studies-Overrides.md: -------------------------------------------------------------------------------- 1 | You can set the default style along with the input values for newly created indicators using the `studies_overrides` parameter. 2 | Its value is expected to be an object where key is a path to a property that is going to be changed while value is the new value for it. 3 | 4 | Example: 5 | 6 | ```javascript 7 | studies_overrides: { 8 | "volume.volume.color.0": "#00FFFF", 9 | "volume.volume.color.1": "#0000FF", 10 | "volume.volume.transparency": 70, 11 | "volume.volume ma.color": "#FF0000", 12 | "volume.volume ma.transparency": 30, 13 | "volume.volume ma.linewidth": 5, 14 | "volume.show ma": true, 15 | "bollinger bands.median.color": "#33FF88", 16 | "bollinger bands.upper.linewidth": 7 17 | } 18 | ``` 19 | 20 | In the example above, all created Bollinger Bands will have upper line width set to 7 (unless you create it through an API and specify a different value). 21 | 22 | ## Setting the study name 23 | 24 | You should use the names of the studies in the Insert Study dialog as they are but using lower case letters. 25 | 26 | If you wish to override default EMA's length, try using `moving average exponential.length`. 27 | 28 | The same logic applies to input names: use names as you see them in the Study Properties dialog (use lower case letters). 29 | 30 | Example: `stochastic.smooth d`. 31 | 32 | ### Compare 33 | 34 | You can customize new series that are added via `Compare`. 35 | 36 | Use `compare.plot` to customize the line and `compare.source` to change the price source: 37 | 38 | ```javascript 39 | "compare.plot.color": "#000000", 40 | "compare.source": "high" 41 | ``` 42 | 43 | ### Overlay 44 | 45 | Starting from V 1.12 you may use the following properties to customize `Overlay`: 46 | 47 | ```javascript 48 | Overlay.style: (bars = 0, candles = 1, line = 2, area = 3, heiken ashi = 8, hollow candles = 9) 49 | Overlay.showPriceLine: boolean 50 | 51 | Overlay.candleStyle.upColor: color 52 | Overlay.candleStyle.downColor: color 53 | Overlay.candleStyle.drawWick: boolean 54 | Overlay.candleStyle.drawBorder: boolean 55 | Overlay.candleStyle.borderColor: color 56 | Overlay.candleStyle.borderUpColor: color 57 | Overlay.candleStyle.borderDownColor: color 58 | Overlay.candleStyle.wickColor: color 59 | Overlay.candleStyle.barColorsOnPrevClose: boolean 60 | 61 | Overlay.hollowCandleStyle.upColor: color 62 | Overlay.hollowCandleStyle.downColor: color 63 | Overlay.hollowCandleStyle.drawWick: boolean 64 | Overlay.hollowCandleStyle.drawBorder: boolean 65 | Overlay.hollowCandleStyle.borderColor: color 66 | Overlay.hollowCandleStyle.borderUpColor: color 67 | Overlay.hollowCandleStyle.borderDownColor: color 68 | Overlay.hollowCandleStyle.wickColor: color 69 | Overlay.hollowCandleStyle.barColorsOnPrevClose: boolean 70 | 71 | Overlay.barStyle.upColor: color 72 | Overlay.barStyle.downColor: color 73 | Overlay.barStyle.barColorsOnPrevClose: boolean 74 | Overlay.barStyle.dontDrawOpen: boolean 75 | 76 | Overlay.lineStyle.color: color 77 | Overlay.lineStyle.linewidth: integer 78 | Overlay.lineStyle.priceSource: open/high/low/close 79 | Overlay.lineStyle.styleType: (bars = 0, candles = 1, line = 2, area = 3, heiken ashi = 8, hollow candles = 9) 80 | 81 | Overlay.areaStyle.color1: color 82 | Overlay.areaStyle.color2: color 83 | Overlay.areaStyle.linecolor: color 84 | Overlay.areaStyle.linestyle: (solid = 0; dotted = 1; dashed = 2; large dashed = 3) 85 | Overlay.areaStyle.linewidth: integer 86 | Overlay.areaStyle.priceSource: open/high/low/close 87 | ``` 88 | 89 | ## Syntax 90 | 91 | Property path is a set of lower case identifiers split with a dot (`.`). Path formats are described below. 92 | 93 | **Remark**: You can get an error if a plot/band/area/input name is the same . 94 | In this case you can specify an exact destination that you want to change by adding `:plot`, `:band`, `:area` or `:input` to the path. (e.g. `short:plot.color`) 95 | 96 | ### Study input 97 | 98 | Format: `indicator_name.input_name` 99 | 100 | * **indicator_name**: use the name as you see it in the `Indicators` dialog. 101 | * **input_name**: use the name as you see it in the indicator's properties dialog (for example, `show ma`) 102 | 103 | Examples: `volume.show ma`, `bollinger bands.length` 104 | 105 | ### Plot property 106 | 107 | Format: `indicator_name.plot_name.property_name` 108 | 109 | * **indicator_name**: < ... > 110 | * **plot_name**: as you see it in the indicator's properties dialog (for example, `Volume` or `Plot`) 111 | * **property_name**: one of the following: 112 | * **transparency** 113 | * **linewidth** 114 | * **plottype**. Supported plot types are: 115 | * `line` 116 | * `histogram` 117 | * `cross` 118 | * `area` 119 | * `columns` 120 | * `circles` 121 | * `line_with_breaks` 122 | * `area_with_breaks` 123 | 124 | Examples: `volume.volume.transparency`, `bollinger bands.median.linewidth` 125 | 126 | ### Plot colors 127 | 128 | Format: `indicator_name.plot_name.color<.color_index>` 129 | 130 | * **indicator_name**: < ... > 131 | * **plot_name**: < ... > 132 | * **color**. It's just a keyword. 133 | * **color_index** (optional): color index (if any). It's just an ordinal number of a color for this plot. 134 | I.e., to replace the color that is green by default for Volume, one should use `color_index = 1`. 135 | 136 | **Remark 1**: `color.0` is a synonym of `color`. Paths such as `volume.volume.color.0` and `volume.volume.color` are treated the same. 137 | 138 | **Remark 2**: The customization of area fill color and transparency is not supported currently. 139 | 140 | **Limitations**: 141 | 142 | * Only `#RRGGBB` format is supported for colors. Do not use a short format `#RGB`. 143 | * Transparency varies and the range is [0..100]. 100 means plot is fully opaque. 144 | * Thickness is an integer. 145 | 146 | ### Default precision 147 | 148 | You can change the default precision of studies using the `name.precision` format starting from V 1.6. 149 | 150 | Example: `"average true range.precision": 8` 151 | -------------------------------------------------------------------------------- /Customization-Use-Cases.md: -------------------------------------------------------------------------------- 1 | Charting Library allows you to customize the appearance, the way it displays data, default properties and lots of other parameters. 2 | 3 | There are client-side and server-side customizations. Some of them are made through the constructor, others are made using widget/chart methods. 4 | 5 | We've gathered the most used customizations along with the links to their descriptions for your convenience. 6 | 7 | #### Default instrument and resolution 8 | 9 | Change the default symbol (instrument) and resolution (time interval). 10 | 11 | Minimum supported resolution is 1 second. 12 | 13 | [documentation](Widget-Constructor#symbol-interval) 14 | 15 | #### Default visible range (timeframe) 16 | 17 | Change time range of bars for the default resolution 18 | 19 | [documentation](Widget-Constructor#timeframe) 20 | 21 | #### Default visible range for resolutions 22 | 23 | Change time range of bars when the resolution is changed by the user. A sample is available here: 24 | 25 | [documentation](Chart-Methods#onintervalchanged) 26 | 27 | #### Initial timezone 28 | 29 | You can set the default timezone. It can be changed by the user in the menu. 30 | 31 | [documentation](Widget-Constructor#timezone) 32 | 33 | #### Chart size 34 | 35 | You can add the chart as a web page element or use a fullscreen mode. 36 | 37 | [Width and Height](Widget-Constructor#width-height) 38 | 39 | [Fullscreen](Widget-Constructor#fullscreen) 40 | 41 | [Autosize](Widget-Constructor#autosize) 42 | 43 | #### Chart colors 44 | 45 | Customize the colors of the chart so that it matches your site design. 46 | 47 | 1. Toolbar color - [documentation](Widget-Constructor#toolbar_bg) 48 | 1. Chart color - [documentation](Widget-Constructor#overrides) 49 | 50 | #### Indicators 51 | 52 | 1. Limit the amount of indicators per chart layout - [documentation](Widget-Constructor#study_count_limit) 53 | 1. Limit the number of indicators that can be displayed and added - [documentation](Widget-Constructor#studies_access) 54 | 1. Add your own indicators that are calculated on the server - [documentation](Creating-Custom-Studies) 55 | 1. Change the default properties of indicators - [documentation](Widget-Constructor#studies_overrides) 56 | 1. Change the default properties on the fly - [documentation](Widget-Methods#applystudiesoverridesoverrides) 57 | 58 | #### Drawings 59 | 60 | 1. Limit the number of drawings that can be displayed and added - [documentation](Widget-Constructor#drawings_access) 61 | 1. Change the default properties of drawings - [documentation](Widget-Constructor#overrides) 62 | 1. Change the default properties on the fly - [documentation](Widget-Methods#applyoverridesoverrides) 63 | 64 | #### Language 65 | 66 | More than 20 translated versions of the Charting Library are available to you. 67 | 68 | [documentation](Widget-Constructor#locale) 69 | 70 | Note that you select the language when creating the chart. You'd have to recreate the chart if you wish to change the language. 71 | 72 | #### Formatting numbers, dates 73 | 74 | 1. Change the decimal sign of numbers - [documentation](Widget-Constructor#numeric_formatting) 75 | 1. Set custom formatters for time and data - [documentation](Widget-Constructor#customformatters) 76 | 1. Prices are formatted according to the symbol information - [documentation](Symbology#minmov-pricescale-minmove2-fractional) 77 | 78 | #### Default properties of a chart 79 | 80 | You can change any available properties in the properties dialog. 81 | 82 | 1. Initially - [documentation](Widget-Constructor#overrides) 83 | 1. On the fly - [documentation](Widget-Methods#applyoverridesoverrides) 84 | 85 | #### Server for snapshots 86 | 87 | TradingView allows you to save snapshots to its servers. You can change this if you wish. 88 | 89 | [documentation](Widget-Constructor#snapshot_url) 90 | 91 | #### Show/hide chart elements 92 | 93 | Certain chart elements (toolbars, buttons, other controls) can be hidden if you don't need them. 94 | 95 | 1. Most of the chart elements can be shown/hidden by using [Featuresets](Featuresets) 96 | 1. You can add your own CSS - [documentation](Widget-Constructor#custom_css_url) 97 | 98 | #### Timeframes at the bottom of the chart 99 | 100 | Timeframe is a time period of bars. It's a preferred resolution to display the period. The list can be customized. 101 | 102 | [documentation](Widget-Constructor#time_frames) 103 | 104 | #### Initial list of favorite intervals / chart styles 105 | 106 | You can select the intervals and chart styles that will be shown in the top toolbar by default. A user can change it if `items_favoriting` is enabled in the [Featuresets](Featuresets). 107 | 108 | [documentation](Widget-Constructor#favorites) 109 | 110 | #### Resolutions that are displayed in the menu 111 | 112 | 1. The complete list of resolutions is provided in the configuration of the datafeed - [documentation](JS-Api#supported_resolutions) 113 | 1. Resolutions are enabled or disabled in the list basing on the symbol information - [documentation](Symbology#supported_resolutions) 114 | 1. Initial list of favorite resolutions can be adjusted - [documentation](Widget-Constructor#favorites) 115 | 116 | #### Volume indicator 117 | 118 | Volume is added by default if the financial instrument supports it ([documentation](Symbology#has_no_volume)). 119 | This behavior can be disabled using [documentation](Featuresets). 120 | 121 | #### Context menu 122 | 123 | You can add new elements to the context menu or hide the existing items. 124 | 125 | [documentation](Widget-Methods#oncontextmenucallback) 126 | 127 | #### Custom buttons on the toolbar 128 | 129 | You can add your own buttons to the top toolbar. 130 | 131 | [documentation](Widget-Methods#createbuttonoptions) 132 | 133 | #### :chart: Watchlist 134 | 135 | You can select the default symbols for the watchlist and set them to read-only if needed. 136 | 137 | [documentation](Widget-Constructor#widgetbar) 138 | 139 | #### :chart: News feed 140 | 141 | You can attach to any RSS feed and even select the feed depending on the type of the financial instrument. 142 | 143 | [documentation](Widget-Constructor#rss_news_feed) 144 | -------------------------------------------------------------------------------- /Saving-and-Loading-Charts.md: -------------------------------------------------------------------------------- 1 | The Charting Library supports saving/loading charts and study templates using 2 levels of API: 2 | 3 | 1. **Low-Level**: save/load functionality is enabled by widget's `save()` / `load()` [methods](Widget-Methods#savecallback) and `createStudyTemplate()` / `applyStudyTemplate()` [methods](Chart-Methods#createstudytemplateoptions). 4 | One should take of the storage on the server. 5 | You are able to save the JSONs where you wish. For example, you may embed them to your saved pages or user's working area etc. 6 | 7 | 1. **High-Level**: Charting Library is able to save / load charts and study templates from the storage that you'll point it to. 8 | We created a tiny storage sample with Python and PostgreSQL that can be found in [our GitHub](https://github.com/tradingview/saveload_backend). 9 | You can use it and run on your own server so that you'll be able to have control over all your users' saved data. 10 | 11 | ## Using High-Level Save/Load 12 | 13 | Here are a few steps for those who want to have their own chart storage: 14 | 15 | 1. Clone our repository to your host 16 | 1. Run the data service or use our demo service. Here is a short to-do list for anyone who is not familiar with Django. 17 | 1. Install Python 3.x and Pip. 18 | 1. Install PostgreSQL or some other Django-friendly database engine. 19 | 1. Go to you chart storage folder and run `pip install -r requirements.txt` 20 | 1. Go to charting_library_charts folder and set up your database connection in settings.py (see `DATABASES` @ line #12). Please remember to create the appropriate database in your PostgreSQL. 21 | 1. Run `python manage.py migrate` . This will create the database schema without any data. 22 | 1. Run `python manage.py runserver` to run a TEST instance of your database. Don't use the command above in production environment. Use some other program (i.e., Gunicorn). 23 | 1. Set up your Charting Library page: set `charts_storage_url = url-of-your-charts-storage`, also set `client_id` and `user_id` (see details below) in the widget constructor. 24 | 1. Enjoy! 25 | 26 | **Remark**: Manual database filling/editing is not the intended usage. Please avoid doing this as you you may hurt the Django infrastructure. 27 | 28 | ## Developing your own backend 29 | 30 | * Charting Library sends HTTP/HTTPS commands to `charts_storage_url/charts_storage_api_version/charts?client=client_id&user=user_id`. `charts_storage_url`, `charts_storage_api_version`, `client_id` and `user_id` are the arguments of the [widget constructor](Widget-Constructor). 31 | * You should implement the processing of 4 requests: save chart / load chart / delete chart / list charts. 32 | 33 | ### LIST CHARTS 34 | 35 | GET REQUEST: `charts_storage_url/charts_storage_api_version/charts?client=client_id&user=user_id` 36 | 37 | RESPONSE: JSON Object 38 | 39 | 1. `status`: `ok` or `error` 40 | 1. `data`: Array of Objects 41 | 1. `timestamp`: UNIX time when the chart was saved (example, `144908432`1) 42 | 1. `symbol`: base symbol of the chart (example, `AA`) 43 | 1. `resolution`: resolution of the chart (example, `D`) 44 | 1. `id`: unique integer identifier of the chart (example, `9163`) 45 | 1. `name`: chart name (example, `Test`) 46 | 47 | ### SAVE CHART 48 | 49 | POST REQUEST: `charts_storage_url/charts_storage_api_version/charts?client=client_id&user=user_id` 50 | 51 | 1. `name`: name of the chart 52 | 1. `content`: content of the chart 53 | 1. `symbol`: chart symbol (example, `AA`) 54 | 1. `resolution`: chart resolution (example, `D`) 55 | 56 | RESPONSE: JSON Object 57 | 58 | 1. `status`: `ok` or `error` 59 | 1. `id`: unique integer identifier of the chart (example, `9163`) 60 | 61 | ### SAVE AS CHART 62 | 63 | POST REQUEST: `charts_storage_url/charts_storage_api_version/charts?client=client_id&user=user_id&chart=chart_id` 64 | 65 | 1. `name`: name of the chart 66 | 1. `content`: content of the chart 67 | 1. `symbol`: chart symbol (example, `AA`) 68 | 1. `resolution`: chart resolution (example, `D`) 69 | 70 | RESPONSE: JSON Object 71 | 72 | 1. `status`: `ok` or `error` 73 | 74 | ### LOAD CHART 75 | 76 | GET REQUEST: `charts_storage_url/charts_storage_api_version/charts?client=client_id&user=user_id&chart=chart_id` 77 | 78 | RESPONSE: JSON Object 79 | 80 | 1. `status`: `ok` or `error` 81 | 1. `data`: Object 82 | 1. `content`: saved content of the chart 83 | 1. `timestamp`: UNIX time when the chart was saved (example, `1449084321`) 84 | 1. `id`: unique integer identifier of the chart (example, `9163`) 85 | 1. `name`: name of the chart 86 | 87 | ### DELETE CHART 88 | 89 | DELETE REQUEST: `charts_storage_url/charts_storage_api_version/charts?client=client_id&user=user_id&chart=chart_id` 90 | 91 | RESPONSE: JSON Object 92 | 93 | 1. `status`: `ok` or `error` 94 | 95 | ## Using Demo Charts and Study Templates Storage 96 | 97 | We're running a demo chart storage service to let you save/load charts as soon as you build your Charting Library. 98 | Here is the link . Note that it's provided as-is since it's a demo. 99 | 100 | We do not guarantee its stability. Also, note that we delete the data in the storage on a regular basis. 101 | 102 | ## Managing Access to Saved Charts 103 | 104 | You are responsible for the charts that your users are able to see and load. 105 | A user can see/load charts that have the same `client_id` and `user_id` that the user has. 106 | `client_id` is an identifier of user's group. 107 | The intended use is when you have a few groups of users or when you have a few sites that use the same chart storage. 108 | So the common practice is to set `client_id = your-site's-URL`. It's up to you to decide. 109 | 110 | `user_id` is a unique identifier of a user. Users ID belongs to a particular `client_id` group. 111 | You can either set it for each user individually (private storage for each user) or set it for all users or user groups (public storage). 112 | 113 | Here are a few examples: 114 | 115 | `client_id`|`user_id`|Effect 116 | ---|---|--- 117 | Your site URL or other link|Unique user ID|Each user has a private chart storage that other users can't see. 118 | Your site URL or other link|The same value for all users|Each user can see and load any saved chart. 119 | Your site URL or other link|Unique user ID for registered users along with a separate setting for anonymous users|Each registered user has a private chart storage that other users can't see. All anonymous users share a single storage. 120 | -------------------------------------------------------------------------------- /Broker-API.md: -------------------------------------------------------------------------------- 1 | :chart: All content on this page is related to [Trading Terminal](Trading-Terminal) only. 2 | 3 | Broker API is a key component that enables live trading. Its main purpose is to connect our charts with your trading logic. In terms of `JS`, it is an `object` which is expected to expose the specific interface. Here is a list of API's **methods** that Terminal is expected to have. 4 | 5 | ## Required Methods 6 | 7 | ### constructor(host) 8 | 9 | The constructor of the Broker API usually takes [Trading Host](Trading-Host). 10 | 11 | ### positions : Promise 12 | 13 | This method is called by the Trading Terminal to request [positions](Trading-Objects-and-Constants#position). 14 | 15 | ### orders : Promise 16 | 17 | This method is called by the Trading Terminal to request [orders](Trading-Objects-and-Constants#order). 18 | 19 | ### executions(symbol) : Promise 20 | 21 | This method is called by the Trading Terminal to request [executions](Trading-Objects-and-Constants#execution). 22 | 23 | ### trades : Promise 24 | 25 | This method is called by the Trading Terminal to request [trades](Trading-Objects-and-Constants#trade) (individual positions). 26 | 27 | ### chartContextMenuActions(e) 28 | 29 | - `e` is a context object passed by a browser 30 | 31 | Chart can have a sub-menu `Trading` in the context menu. It returns the list of items in a sub-menu. The format is the same as in `buttonDropdownItems`. 32 | 33 | ### connectionStatus() 34 | 35 | You don't need to return values other than `1` typically since the broker is already connected when you create the widget. You can use it if you want to display a spinner in the bottom panel while the data is being loaded. 36 | Possible return values are: 37 | 38 | ```javascript 39 | ConnectionStatus.Connected = 1 40 | ConnectionStatus.Connecting = 2 41 | ConnectionStatus.Disconnected = 3 42 | ConnectionStatus.Error = 4 43 | ``` 44 | 45 | ### isTradable(symbol) 46 | 47 | This function is required for the Floating Trading Panel. The ability to trade via the panel depends on the result of this function: `true` or `false`. You don't need to implement this method if all symbols can be traded. 48 | 49 | ### accountManagerInfo() 50 | 51 | This function should return the information that will be used to build an account manager. 52 | See [Account Manager](Account-Manager) for more information. 53 | 54 | ### showOrderDialog([order](Trading-Objects-and-Constants#order)) 55 | 56 | This function is requested by the chart when a user creates or modifies an order. 57 | 58 | You have the ability to use your own dialog and manage it as you see fit. 59 | 60 | ### placeOrder([order](Trading-Objects-and-Constants#order), silently) 61 | 62 | Method is requested when a user wants to place an order. Order is pre-filled with partial or complete information. 63 | 64 | If `silently` is `true` no order dialog should be shown. 65 | 66 | ### modifyOrder([order](Trading-Objects-and-Constants#order), silently, focus) 67 | 68 | 1. `order` is an order object to modify 69 | 1. `silently` - if it is `true` no order dialog should be shown 70 | 1. `focus` - [OrderTicketFocusControl constants](Trading-Objects-and-Constants#orderticketfocuscontrol). It can be already initialized by the chart. 71 | 72 | Method is requested when a user wants to modify an existing order. 73 | 74 | ### cancelOrder(orderId, silently) 75 | 76 | This method is requested to cancel a single order with a given `id`. 77 | 78 | If `silently` is `true` no dialogs should be shown. 79 | 80 | ### cancelOrders(symbol, side, ordersIds, silently) 81 | 82 | 1. `symbol` - symbol string 83 | 1. `side`: [Side constant](Trading-Objects-and-Constants#side) or `undefined` 84 | 1. `ordersIds` - ids already collected by `symbol` and `side` 85 | 86 | If `silently` is `true` no dialogs should be shown. 87 | 88 | This method is requested to cancel multiple orders for a `symbol` and `side`. 89 | 90 | ### editPositionBrackets(positionId, focus) 91 | 92 | 1. `positionId` is an ID of an existing position to be modified 93 | 1. `focus` - [Focus constant](Trading-Objects-and-Constants#orderticketfocuscontrol). 94 | 95 | This method is requested if `supportPositionBrackets` configuration flag is on. It shows a dialog that enables take profit and stop loss editing. 96 | 97 | ### closePosition(positionId, silently) 98 | 99 | This method is requested if `supportClosePosition` configuration flag is on. It allows to close the position by id. 100 | If `silently` is `true` no dialogs should be shown. 101 | 102 | ### reversePosition(positionId, silently) 103 | 104 | This method is requested if `supportReversePosition` configuration flag is on. It allows to reverse the position by id. 105 | If `silently` is `true` no dialogs should be shown. 106 | 107 | ### editTradeBrackets(tradeId, focus) 108 | 109 | 1. `tradeId` is ID of existing trade to be modified 110 | 1. `focus` - [Focus constant](Trading-Objects-and-Constants#orderticketfocuscontrol). 111 | 112 | This method is requested if `supportTradeBrackets` configuration flag is on. It displays a dialog that enables take profit and stop loss editing. 113 | 114 | ### closeTrade(tradeId, silently) 115 | 116 | This method is requested if `supportCloseTrade` configuration flag is on. It allows to close the trade by id. 117 | 118 | If `silently` is `true` no dialogs should be shown. 119 | 120 | ### symbolInfo(symbol) : Deferred (or Promise) 121 | 122 | 1. `symbol` - symbol string 123 | 124 | This method is requested by the internal Order Dialog, DOM panel and floating trading panel to get symbol information. 125 | 126 | The result is an object with the following data: 127 | 128 | - `qty` - object with fields `min`, `max` and `step` that specifies Quantity, field step and boundaries. 129 | - `pipSize` - size of 1 pip (e.g., 0.0001 for EURUSD) 130 | - `pipValue` - values of 1 pip in account currency (e.g., 1 for EURUSD for an account in USD) 131 | - `minTick` - minimal price change (e.g., 0.00001 for EURUSD). Used for price fields. 132 | - `description` - a description to be displayed in the dialog 133 | - `type` - instrument type, only `forex` matters - it enables negative pips. You can check that in the order dialog 134 | - `domVolumePrecision` - number of decimal places of DOM asks/bids volume (optional, 0 by default) 135 | 136 | ### accountInfo() : Deferred (or Promise) 137 | 138 | This method is requested by the internal Order Dialog to get the account information. 139 | It should return only one field for now: 140 | 141 | 1. currencySign: string - which is a sign of account currency 142 | 143 | Once this method is called the broker should stop providing profit/loss. 144 | 145 | ### subscribeEquity() 146 | 147 | The method should be implemented if you use a standard order dialog and support stop loss. 148 | 149 | Once this method is called the broker should provide equity updates via [equityUpdate](Trading-Host#equityupdateequity) method. 150 | 151 | ### unsubscribeEquity() 152 | 153 | The method should be implemented if you use a standard order dialog and support stop loss. 154 | 155 | Once this method is called the broker should stop providing equity updates. 156 | 157 | ## See Also 158 | 159 | - [How to connect](Widget-Constructor#brokerfactory) your trading controller to the chart 160 | - [Trading Host](Trading-Host) 161 | -------------------------------------------------------------------------------- /Breaking-Changes.md: -------------------------------------------------------------------------------- 1 | We do our best to make every next version fully compatible with the previous one, but sometimes big changes requires you to make minor changes in your code when upgrading to a new version. 2 | 3 | _Note: you can check the Charting Library version by executing `TradingView.version()` in a browser console._ 4 | 5 | Here is the list of breaking changes: 6 | 7 | 8 | 9 | ## Version 1.14 10 | 11 | - [createButton](Widget-Methods#createButtonoptions) returns `HTMLElement` instead of `JQuery`. 12 | - [createButton](Widget-Methods#createButtonoptions) must be used after [headerReady()](Widget-Methods#headerready) `Promise` is resolved. 13 | 14 | **TypeScript type definitions** 15 | 16 | - `StudyInputValueType` type is renamed to `StudyInputValue`. 17 | 18 | **Featureset** 19 | 20 | - Starting from this version you are no longer able to use the `keep_left_toolbar_visible_on_small_screens` featureset. This featureset is removed and the left toolbar visibility no longer depends on the screen size. 21 | 22 | ## Version 1.13 23 | 24 | - Action `takeScreenshot` from [executeActionById](Chart-Methods#executeactionbyidactionid) method is removed. Use [takeScreenshot](Widget-Methods#takescreenshot) method instead. 25 | - Action `lockDrawingsAction` from [executeActionById](Chart-Methods#executeactionbyidactionid) and [getCheckableActionState](Chart-Methods#getcheckableactionstateactionid) methods is removed. Use [lockAllDrawingTools](Widget-Methods#lockalldrawingtools) instead. 26 | - Action `hideAllDrawingsAction` from [executeActionById](Chart-Methods#executeactionbyidactionid) and [getCheckableActionState](Chart-Methods#getcheckableactionstateactionid) methods is removed. Use [hideAllDrawingTools](Widget-Methods#hidealldrawingtools) instead. 27 | - Featureset `caption_buttons_text_if_possible` is enabled by default. 28 | - Fixed an [issue](https://github.com/tradingview/charting_library/issues/2652) that was causing bars to shift. Time-shifted bars used to appear when daily bars had a negative exchange timezone offset along with a 24x7 session. If you have a workaround for this issue, please remove it before updating to this version. 29 | 30 | ## Version 1.12 31 | 32 | **Charting Library** 33 | 34 | - `charting_library/charting_library.min.js` is now [UMD](https://github.com/umdjs/umd) module. 35 | 36 | If you only inline this script into HTML then nothing has changed for you. 37 | If you import it as a module you should import `widget`, `version` and `onready` functions directly from it. 38 | 39 | - `searchSymbolsByName` is removed from `JS-API`, use `searchSymbols` instead. 40 | 41 | Study overrides: 42 | 43 | - Overrides for `Overlay` should be applied only via `studies_overrides` (and `applyStudiesOverrides` in runtime). In the previous versions you had to use `overrides` and `applyOverrides`). See [Studies-Overrides](Studies-Overrides) page. 44 | - Starting from this version you are no longer able to override `showStudyArguments` and `showLastValue` using `options` keyword. 45 | 46 | **Trading Terminal** 47 | 48 | - `hasHistory` flag is removed. Use `historyColumns` to display History in the Account Manager. 49 | 50 | The following items are still supported in the Trading Terminal, but will be deprecated in future versions: 51 | 52 | - `subscribePL` and `unsubscribePL`. The broker should call `plUpdate` method of the Host every time the profit is changed. 53 | - `supportDOM` is removed. DOM widget visibility can be set using `dome_widget` featureset. 54 | 55 | **The Trading Controller is replaced with [Broker API](Broker-API)**. 56 | 57 | The following changes should be applied to your Trading Controller implementation to move to new Broker API: 58 | 59 | - Method `setHost` is removed. Host should be passed to the constructor of Broker API. 60 | - Method `buttonDropdownItems` is removed. Broker API should update [Broker API](Trading-Host) using `setButtonDropdownActions`. 61 | - Methods `configFlags` and `durations` are removed. Use [Widget Constructor](Widget-Constructor) fields instead. 62 | - All methods that returned `$.Deferred` should be modified to return Promise. 63 | - Method `chartContextMenuItems` is renamed to `chartContextMenuActions`. 64 | - Method `isTradable` changed to return a Promise instead of a Boolean value. 65 | - All string constants ("working", "buy" etc.) should be replaced with the appropriate number of constants. 66 | - Position `avg_price` renamed to `avgPrice`. 67 | - `tradingController` field in the [Widget Constructor](Widget-Constructor) is removed. Use `brokerFactory` instead. 68 | 69 | ## Version 1.11 70 | 71 | **Trading Terminal** 72 | 73 | The following items are still supported in Trading Terminal, but will be deprecated in future versions: 74 | 75 | - `supportDOME` renamed to `supportDOM`. 76 | - The signature of `showClosePositionDialog has been changed. 77 | - `showEditBracketsDialog` was renamed to `showPositionBracketsDialog`.The signature has been changed. 78 | 79 | ## Version 1.10 80 | 81 | - Default behavior of Volume indicator was changed. 82 | 83 | **Previous behavior**: Volume indicator is added/removed when an instrument or a resolution is switched depending on volume support by the instrument. You can get back to this behavior by disabling `create_volume_indicator_by_default_once` featureset. 84 | 85 | **New behavior**: Volume indicator is added when an empty chart is loaded for the first time provided that it is supported by an active instrument. 86 | 87 | ## Version 1.9 88 | 89 | - We don't compile Pine scripts anymore. You can still use scripts that were compiled earlier. 90 | 91 | ## Version 1.8 of Trading Terminal 92 | 93 | - The chart can no longer show active orders only. Appropriate methods have been removed. 94 | - `showOrderDialog` receives an object instead of arguments list 95 | - `showSampleOrderDialog` removed, use [showOrderDialog](Trading-Host#showorderdialogorder-handler-focus-promise) instead 96 | - `showOrderDialog` removed from [Broker API](Broker-API), use `placeOrder` and `modifyOrder` receive `silently` argument instead 97 | - `reversePosition`, `closePosition`, `cancelOrder` have an additional argument `silently`. 98 | 99 | ## Version 1.7 100 | 101 | - Starting from this version calling `setSymbol` with the same symbol is no longer enough. You should call `onResetCacheNeededCallback` from `subscribeBars` first. Then you can use `setSymbol` or new `resetData` method of the chart. 102 | - JSAPI protocol version 1 is not supported anymore. `nextTime` and `noData` must be provided. 103 | 104 | ## Version 1.5 105 | 106 | - Added `source` argument to MACD. You should change MACD creation code to pass `source` also. 107 | 108 | `chartWidget.chart().createStudy('MACD', false, false, [12, 26, "close", 9])` 109 | 110 | ## Version 1.4 111 | 112 | - Override `transparency` is not supported anymore. We added transparency support to every color. Use `rgba` form to define a color with transparency. Example: 113 | 114 | `"symbolWatermarkProperties.color" : "rgba(60, 70, 80, 0.05)"` 115 | 116 | ## Version 1.3 117 | 118 | - Override `paneProperties.gridProperties.*` is not supported anymore. 119 | 120 | Please use `paneProperties.vertGridProperties.*` and `paneProperties.horzGridProperties.*` 121 | 122 | - Override `mainSeriesProperties.candleStyle.wickColor` is not supported anymore. 123 | 124 | Use `mainSeriesProperties.candleStyle.wickUpColor` and `mainSeriesProperties.candleStyle.wickDownColor` 125 | 126 | 127 | -------------------------------------------------------------------------------- /Overrides.md: -------------------------------------------------------------------------------- 1 | This Charting Library section includes the chart property description. These properties are treated 2 | as customizable ones. The customization of other properties is not supported. 3 | 4 | The properties are listed in the following format: 5 | 6 | `: ` 7 | 8 | ```javascript 9 | // supported values: large, medium, small, tiny 10 | volumePaneSize: "large" 11 | 12 | // fonts available in text editors (i.e., in `Text` drawing tool properties dialog) 13 | editorFontsList: ['Verdana', 'Courier New', 'Times New Roman', 'Arial'] 14 | 15 | paneProperties.background: "#ffffff" 16 | paneProperties.vertGridProperties.color: "#E6E6E6" 17 | paneProperties.vertGridProperties.style: LINESTYLE_SOLID 18 | paneProperties.horzGridProperties.color: "#E6E6E6" 19 | paneProperties.horzGridProperties.style: LINESTYLE_SOLID 20 | paneProperties.crossHairProperties.color: "#989898" 21 | paneProperties.crossHairProperties.width: 1 22 | paneProperties.crossHairProperties.style: LINESTYLE_DASHED 23 | 24 | // Margins (percentage). Used for auto scaling. 25 | paneProperties.topMargin: 5 26 | paneProperties.bottomMargin: 5 27 | 28 | // leftAxisProperties & rightAxisProperties 29 | paneProperties.leftAxisProperties.autoScale:true (see #749) 30 | paneProperties.leftAxisProperties.autoScaleDisabled:false (see #749) 31 | paneProperties.leftAxisProperties.percentage:false 32 | paneProperties.leftAxisProperties.percentageDisabled:false 33 | paneProperties.leftAxisProperties.log:false 34 | paneProperties.leftAxisProperties.logDisabled:false 35 | paneProperties.leftAxisProperties.alignLabels:true 36 | 37 | paneProperties.legendProperties.showStudyArguments: true 38 | paneProperties.legendProperties.showStudyTitles: true 39 | paneProperties.legendProperties.showStudyValues: true 40 | paneProperties.legendProperties.showSeriesTitle: true 41 | paneProperties.legendProperties.showSeriesOHLC: true 42 | paneProperties.legendProperties.showLegend: true 43 | 44 | scalesProperties.showLeftScale : false 45 | scalesProperties.showRightScale : true 46 | scalesProperties.backgroundColor : "#ffffff" 47 | scalesProperties.fontSize: 11 48 | scalesProperties.lineColor : "#555" 49 | scalesProperties.textColor : "#555" 50 | scalesProperties.scaleSeriesOnly : false 51 | scalesProperties.showSeriesLastValue: true 52 | scalesProperties.showSeriesPrevCloseValue: false 53 | scalesProperties.showStudyLastValue: false 54 | scalesProperties.showStudyPlotLabels: false 55 | scalesProperties.showSymbolLabels: false 56 | 57 | timeScale.rightOffset: 5 58 | 59 | timezone: "Etc/UTC" # See supported timezones list (at Symbology#timezone page) for available values 60 | 61 | 62 | // Series style. See the supported values below 63 | // Bars = 0 64 | // Candles = 1 65 | // Line = 2 66 | // Area = 3 67 | // Heikin Ashi = 8 68 | // Hollow Candles = 9 69 | // Renko = 4 70 | // Kagi = 5 71 | // Point&Figure = 6 72 | // Line Break = 7 73 | // Baseline = 10 74 | mainSeriesProperties.style: 1 75 | 76 | mainSeriesProperties.showCountdown: true 77 | mainSeriesProperties.visible:true 78 | mainSeriesProperties.showPriceLine: true 79 | mainSeriesProperties.priceLineWidth: 1 80 | mainSeriesProperties.priceLineColor: '' 81 | mainSeriesProperties.showPrevClosePriceLine: false 82 | mainSeriesProperties.prevClosePriceLineWidth: 1 83 | mainSeriesProperties.prevClosePriceLineColor: 'rgba( 85, 85, 85, 1)' 84 | mainSeriesProperties.lockScale: false 85 | mainSeriesProperties.minTick: "default" 86 | 87 | mainSeriesProperties.priceAxisProperties.autoScale:true (see #749) 88 | mainSeriesProperties.priceAxisProperties.autoScaleDisabled:false (see #749) 89 | mainSeriesProperties.priceAxisProperties.percentage:false 90 | mainSeriesProperties.priceAxisProperties.percentageDisabled:false 91 | mainSeriesProperties.priceAxisProperties.log:false 92 | mainSeriesProperties.priceAxisProperties.logDisabled:false 93 | 94 | symbolWatermarkProperties.color : "rgba(0, 0, 0, 0.00)" 95 | 96 | // Different chart types defaults 97 | 98 | // Candles styles 99 | mainSeriesProperties.candleStyle.upColor: "#6ba583" 100 | mainSeriesProperties.candleStyle.downColor: "#d75442" 101 | mainSeriesProperties.candleStyle.drawWick: true 102 | mainSeriesProperties.candleStyle.drawBorder: true 103 | mainSeriesProperties.candleStyle.borderColor: "#378658" 104 | mainSeriesProperties.candleStyle.borderUpColor: "#225437" 105 | mainSeriesProperties.candleStyle.borderDownColor: "#5b1a13" 106 | mainSeriesProperties.candleStyle.wickUpColor: 'rgba( 115, 115, 117, 1)' 107 | mainSeriesProperties.candleStyle.wickDownColor: 'rgba( 115, 115, 117, 1)' 108 | mainSeriesProperties.candleStyle.barColorsOnPrevClose: false 109 | 110 | // Hollow Candles styles 111 | mainSeriesProperties.hollowCandleStyle.upColor: "#6ba583" 112 | mainSeriesProperties.hollowCandleStyle.downColor: "#d75442" 113 | mainSeriesProperties.hollowCandleStyle.drawWick: true 114 | mainSeriesProperties.hollowCandleStyle.drawBorder: true 115 | mainSeriesProperties.hollowCandleStyle.borderColor: "#378658" 116 | mainSeriesProperties.hollowCandleStyle.borderUpColor: "#225437" 117 | mainSeriesProperties.hollowCandleStyle.borderDownColor: "#5b1a13" 118 | mainSeriesProperties.hollowCandleStyle.wickColor: "#737375" 119 | 120 | // Heikin Ashi styles 121 | mainSeriesProperties.haStyle.upColor: "#6ba583" 122 | mainSeriesProperties.haStyle.downColor: "#d75442" 123 | mainSeriesProperties.haStyle.drawWick: true 124 | mainSeriesProperties.haStyle.drawBorder: true 125 | mainSeriesProperties.haStyle.borderColor: "#378658" 126 | mainSeriesProperties.haStyle.borderUpColor: "#225437" 127 | mainSeriesProperties.haStyle.borderDownColor: "#5b1a13" 128 | mainSeriesProperties.haStyle.wickColor: "#737375" 129 | mainSeriesProperties.haStyle.barColorsOnPrevClose: false 130 | 131 | // Bar styles 132 | mainSeriesProperties.barStyle.upColor: "#6ba583" 133 | mainSeriesProperties.barStyle.downColor: "#d75442" 134 | mainSeriesProperties.barStyle.barColorsOnPrevClose: false 135 | mainSeriesProperties.barStyle.dontDrawOpen: false 136 | 137 | // Line styles 138 | mainSeriesProperties.lineStyle.color: "#0303F7" 139 | mainSeriesProperties.lineStyle.linestyle: LINESTYLE_SOLID 140 | mainSeriesProperties.lineStyle.linewidth: 1 141 | mainSeriesProperties.lineStyle.priceSource: "close" 142 | 143 | // Area styles 144 | mainSeriesProperties.areaStyle.color1: "#606090" 145 | mainSeriesProperties.areaStyle.color2: "#01F6F5" 146 | mainSeriesProperties.areaStyle.linecolor: "#0094FF" 147 | mainSeriesProperties.areaStyle.linestyle: LINESTYLE_SOLID 148 | mainSeriesProperties.areaStyle.linewidth: 1 149 | mainSeriesProperties.areaStyle.priceSource: "close" 150 | 151 | // Baseline styles 152 | mainSeriesProperties.baselineStyle.baselineColor: "rgba( 117, 134, 150, 1)" 153 | mainSeriesProperties.baselineStyle.topFillColor1: "rgba( 83, 185, 135, 0.1)" 154 | mainSeriesProperties.baselineStyle.topFillColor2: "rgba( 83, 185, 135, 0.1)" 155 | mainSeriesProperties.baselineStyle.bottomFillColor1: "rgba( 235, 77, 92, 0.1)" 156 | mainSeriesProperties.baselineStyle.bottomFillColor2: "rgba( 235, 77, 92, 0.1)" 157 | mainSeriesProperties.baselineStyle.topLineColor: "rgba( 83, 185, 135, 1)" 158 | mainSeriesProperties.baselineStyle.bottomLineColor: "rgba( 235, 77, 92, 1)" 159 | mainSeriesProperties.baselineStyle.topLineWidth: 1 160 | mainSeriesProperties.baselineStyle.bottomLineWidth: 1 161 | mainSeriesProperties.baselineStyle.priceSource: "close" 162 | mainSeriesProperties.baselineStyle.transparency: 50 163 | mainSeriesProperties.baselineStyle.baseLevelPercentage: 50 164 | ``` 165 | 166 | #### LineStyles 167 | 168 | ```javascript 169 | LINESTYLE_SOLID = 0 170 | LINESTYLE_DOTTED = 1 171 | LINESTYLE_DASHED = 2 172 | LINESTYLE_LARGE_DASHED = 3 173 | ``` 174 | -------------------------------------------------------------------------------- /Trading-Host.md: -------------------------------------------------------------------------------- 1 | :chart: All content on this page applies to the [Trading Terminal](Trading-Terminal) only. 2 | 3 | Trading Host is an API for interaction between [Broker API](Broker-API) and the Chart Trading Subsystem. Its main purpose is to exchange information between our charts and your trading adapter. In terms of `JS`, it is an `object` with a set of functions. Here is the list of Hosts's **methods**. 4 | 5 | ## Commands 6 | 7 | ### showOrderDialog(order, handler, focus) : Promise 8 | 9 | 1. `order` to be placed or modified 10 | 1. `handler` is a function to process buy/sell/modify. It should return Promise 11 | 1. `focus` - [Focus constant](Trading-Objects-and-Constants#orderticketfocuscontrol). 12 | 13 | Shows standard order dialog to create or modify an order and executes handler if Buy/Sell/Modify is pressed. 14 | 15 | ### showCancelOrderDialog(orderId, handler) : Promise 16 | 17 | 1. `orderId` ID of an order to be cancelled 18 | 1. `handler` is a function to process cancellation. It should return Promise 19 | 20 | Shows a confirmation dialog and executes handler if YES/OK is pressed. 21 | 22 | ### showCancelMultipleOrdersDialog(symbol, side, qty, handler) : Promise 23 | 24 | 1. `symbol` of orders to be cancelled 25 | 1. `side` - side of orders to be cancelled 26 | 1. `qty` - amount of orders to be cancelled 27 | 1. `handler` is a function to process cancellation. It should return Promise 28 | 29 | Shows a confirmation dialog and executes handler if YES/OK is pressed. 30 | 31 | ### showClosePositionDialog([positionId](Trading-Objects-and-Constants#position), handler) : Promise 32 | 33 | 1. `positionId` identifier of a position to be closed 34 | 1. `handler` is a function to process position close. It should return Promise 35 | 36 | Shows a confirmation dialog and executes handler if YES/OK is pressed. 37 | 38 | ### showReversePositionDialog([position](Trading-Objects-and-Constants#position), handler) : Promise 39 | 40 | 1. `position` to be reversed 41 | 1. `handler` is a function to process position reverse. It should return a Promise 42 | 43 | Shows a confirmation dialog and executes handler if YES/OK is pressed. 44 | 45 | ### showPositionBracketsDialog([position](Trading-Objects-and-Constants#position), [brackets](Trading-Objects-and-Constants#brackets), focus, handler) : Promise 46 | 47 | 1. `position` to be modified 48 | 1. `brackets` (optional) new [brackets](Trading-Objects-and-Constants#brackets) 49 | 1. `focus` - [Focus constant](Trading-Objects-and-Constants#orderticketfocuscontrol). 50 | 1. `handler` is a function to process modification of brackets. It should return Promise 51 | 52 | Shows a default edit brackets dialog and executes handler if MODIFY is pressed. 53 | 54 | ### activateBottomWidget : Promise 55 | 56 | Opens the bottom panel and switches the tab to Trading. 57 | 58 | ### showTradingProperties() 59 | 60 | Shows the properties dialog, switches current tab to Trading. 61 | 62 | ### showNotification(title, text, type) 63 | 64 | Displays a notification. Type can be `1` - success or `0` - error. 65 | 66 | ### triggerShowActiveOrders() 67 | 68 | Triggers show active orders. 69 | 70 | ### numericFormatter(decimalPlaces) 71 | 72 | Returns a [Formatter](Trading-Objects-and-Constants#formatter) with the specified number of decimal places. 73 | 74 | ### defaultFormatter(symbol) 75 | 76 | Returns a default [Formatter](Trading-Objects-and-Constants#formatter) formatter for the specified instrument. This formatter is created based on [SymbolInfo](Symbology#symbolinfo-structure). 77 | 78 | ### factory 79 | 80 | `factory` is an object property. Its functions are described below. 81 | 82 | ### factory.createDelegate 83 | 84 | Creates a [Delegate](Delegate) object. 85 | 86 | ### factory.createWatchedValue 87 | 88 | Creates a [WatchedValue](WatchedValue) object. 89 | 90 | ### factory.createPriceFormatter(priceScale, minMove, fractional, minMove2) 91 | 92 | Creates a price [Formatter](Trading-Objects-and-Constants#formatter). The arguments of this function are described in [another article](Symbology#minmov-pricescale-minmove2-fractional). 93 | 94 | ### symbolSnapshot(symbol) : Promise 95 | 96 | Returns quotes of a symbol. 97 | 98 | ## Getters and Setters 99 | 100 | ### floatingTradingPanelVisibility: [WatchedValue](WatchedValue) 101 | 102 | Returns whether floatingTradingPanel is visible or not. 103 | 104 | ### showPricesWithZeroVolume: [WatchedValue](WatchedValue) 105 | 106 | Returns whether levels with empty volume (between min and max volume levels) are collapsed or not. 107 | 108 | ### silentOrdersPlacement: [WatchedValue](WatchedValue) 109 | 110 | Returns if orders can be sent to the broker without showing the order ticket. 111 | 112 | ### suggestedQty() : Object 113 | 114 | Returned object properties: 115 | 116 | 1. value - use it to get the current value. It returns Promise. 117 | 1. setValue - use it to set new value 118 | 1. changed : [Subscription](Subscription) 119 | 120 | It is to synchronize quantity in the Floating Trading Panel and in the dialogs. 121 | 122 | ### setButtonDropdownActions(actions) 123 | 124 | Bottom Trading Panel has a button with a list of dropdown items. This method can be used to replace existing items. 125 | 126 | 1. `actions` is an array of [ActionMetainfo](Trading-Objects-and-Constants#actionmetainfo), each of them representing one dropdown item. 127 | 128 | ### defaultContextMenuActions() 129 | 130 | Provides default buy/sell, show properties actions to be returned as a default by [chartContextMenuActions](Broker-API#chartcontextmenuactionse). 131 | 132 | ### defaultDropdownMenuActions(options) 133 | 134 | Provides default dropdown list of actions. You can use default actions in [setButtonDropdownActions](#setButtonDropdownActionsactions). 135 | You can add/remove default action from the result using `options`: 136 | 137 | 1. `showFloatingToolbar`: boolean; 138 | 1. `tradingProperties`: boolean; 139 | 1. `selectAnotherBroker`: boolean; 140 | 1. `disconnect`: boolean; 141 | 142 | ## Data Updates 143 | 144 | The usage of these methods is required to notify the chart that it needs to update information. 145 | 146 | ### orderUpdate([order](Trading-Objects-and-Constants#order)) 147 | 148 | Call this method when an order is added or changed. 149 | 150 | ### orderPartialUpdate([order](Trading-Objects-and-Constants#order)) 151 | 152 | Call this method when an order is not changed, but the fields that you added to the order object to display in the Account Manager are changed. 153 | It should be used only if you want to display custom fields in the [Account Manager](Account-Manager). 154 | 155 | ### positionUpdate ([position](Trading-Objects-and-Constants#position)) 156 | 157 | Call this method when a position is added or changed. 158 | 159 | ### positionPartialUpdate ([position](Trading-Objects-and-Constants#position)) 160 | 161 | Call this method when a position is not changed, but fields that you added to the position object to display in the Account Manager are changed. 162 | It should be used only if you want to display custom fields in the [Account Manager](Account-Manager). 163 | 164 | ### executionUpdate([execution](Trading-Objects-and-Constants#execution)) 165 | 166 | Call this method when an execution is added. 167 | 168 | ### fullUpdate() 169 | 170 | Call this method when all data has been changed. For example, user account has been changed. 171 | 172 | ### plUpdate(positionId, pl) 173 | 174 | Call this method when a broker connection has received a PL update. This method should be used when `supportPLUpdate` flag is set in `configFlags`. 175 | 176 | ### equityUpdate(equity) 177 | 178 | Call this method when a broker connection has received an equity update. This method is required by the standard order dialog. 179 | 180 | ### tradeUpdate ([trade](Trading-Objects-and-Constants#trade)) 181 | 182 | Call this method when a trade is added or changed. 183 | 184 | ### tradePartialUpdate ([trade](Trading-Objects-and-Constants#trade)) 185 | 186 | Call this method when a trade is not changed, but fields that you added to the trade object to display in the Account Manager are changed. 187 | 188 | ### tradePLUpdate(tradeId, pl) 189 | 190 | Call this method when a broker connection has received a trade PL update. 191 | -------------------------------------------------------------------------------- /Trading-Objects-and-Constants.md: -------------------------------------------------------------------------------- 1 | :chart: All content on this page applies to [Trading Terminal](Trading-Terminal) only. 2 | 3 | **NOTE:** If you use TypeScript - you can import these constants/interfaces/types from the `broker-api.d.ts` file. 4 | 5 | ## Broker Configuration 6 | 7 | ### configFlags: object 8 | 9 | This is an object that should be passed in the constructor of the Trading Terminal to [brokerConfig](Widget-Constructor#brokerConfig). Each field should have a boolean value (`true`/`false`): 10 | 11 | * `supportReversePosition` 12 | 13 | *Default:* `false` 14 | 15 | Broker supports reversing of a position. 16 | If it is not supported by broker, Chart will have the reverse button, but it will place a reversing order. 17 | 18 | * `supportClosePosition` 19 | 20 | *Default:* `false` 21 | 22 | Broker supports closing of a position. 23 | If it is not supported by broker, Chart will have the close button, but it will place a closing order. 24 | 25 | * `supportReducePosition` 26 | 27 | *Default:* `false` 28 | 29 | Broker supports changing of a position without orders. 30 | 31 | * `supportPLUpdate` 32 | 33 | *Default:* `false` 34 | 35 | Broker provides PL for a position. If the broker calculates profit/loss by itself it should call [plUpdate](Trading-Host#plupdatepositionid-pl) as soon as PL is changed. 36 | Otherwise Chart will calculate PL as a difference between the current trade and an average price of the position. 37 | 38 | * `supportOrderBrackets` 39 | 40 | *Default:* `false` 41 | 42 | Broker supports brackets (take profit and stop loss) for orders. 43 | If this flag is set to `true` the Chart will display additional fields in the order ticket and Modify button on a chart and in the Account Manager. 44 | 45 | * `supportPositionBrackets` 46 | 47 | *Default:* `false` 48 | 49 | Broker supports brackets (take profit and stop loss orders) for positions. 50 | If this flag is set to `true` the Chart will display an Edit button for positions and add `Edit position...` to the context menu of a position. 51 | 52 | * `supportTradeBrackets` 53 | 54 | *Default:* `false` 55 | 56 | Broker supports brackets for trades (take profit and stop loss orders). 57 | If this flag is set to `true` the Chart will display an Edit button for trades (individual positions) and add `Edit position...` to the context menu of a trade. 58 | 59 | * `supportTrades` 60 | 61 | *Default:* `false` 62 | 63 | Broker supports individual positions (trades). 64 | If it is set to `true`, there will be two tabs in the Account Manager - Individual Positions and Net Positions. 65 | 66 | * `requiresFIFOCloseTrades` 67 | 68 | *Default:* `false` 69 | 70 | Trading account requires closing of trades in FIFO order. 71 | 72 | * `supportCloseTrade` 73 | 74 | *Default:* `false` 75 | 76 | Individual positions (trades) can be closed. 77 | 78 | * `supportMultiposition` 79 | 80 | *Default:* `false` 81 | 82 | Supporting multiposition prevents creating the default implementation for a reversing position. 83 | 84 | * `showQuantityInsteadOfAmount` 85 | 86 | *Default:* `false` 87 | 88 | This flag can be used to change "Amount" to "Quantity" in the order dialog 89 | 90 | * `supportLevel2Data` 91 | 92 | *Default:* `false` 93 | 94 | Level2 data is used for DOM widget. `subscribeDepth` and `unsubscribeDepth` should be implemented. 95 | 96 | * `supportMarketOrders` 97 | 98 | *Default:* `true` 99 | 100 | This flag adds market orders type to the order dialog. 101 | 102 | * `supportLimitOrders` 103 | 104 | *Default:* `true` 105 | 106 | This flag adds limit orders type to the order dialog. 107 | 108 | * `supportStopOrders` 109 | 110 | *Default:* `true` 111 | 112 | This flag adds stop orders type to the order dialog. 113 | 114 | * `supportStopLimitOrders` 115 | 116 | *Default:* `false` 117 | 118 | This flag adds stop-limit orders type to the order dialog. 119 | 120 | * `supportMarketBrackets` 121 | 122 | *Default:* `true` 123 | 124 | Using this flag you can disable brackets for market orders. It is enabled by default. 125 | 126 | * `supportModifyDuration` 127 | 128 | *Default:* `false` 129 | 130 | Using this flag you can enable modification of the duration of the existing order. It is disabled by default. 131 | 132 | * `supportModifyOrder` 133 | 134 | *Default:* `true` 135 | 136 | Using this flag you can disable modification of the existing order. It is enabled by default. 137 | 138 | ### durations: array of objects 139 | 140 | List of expiration options of orders. It is optional. Do not set it if you don't want the durations to be displayed in the order ticket. 141 | The objects have two keys: `{ name, value }`. 142 | 143 | Example: 144 | 145 | ```javascript 146 | durations: [{ name: 'DAY', value: 'DAY' }, { name: 'GTC', value: 'GTC' }] 147 | ``` 148 | 149 | ### customNotificationFields: array of strings 150 | 151 | Optional field. You can use it if you have custom fields in orders or positions that should be taken into account when showing notifications. 152 | 153 | For example, if you have field `additionalType` in orders and you want the chart to show a notification when it is changed, you should set: 154 | 155 | ```javascript 156 | customNotificationFields: ['additionalType'] 157 | ``` 158 | 159 | ## Order 160 | 161 | Describes a single order. 162 | 163 | * `id` : String 164 | * `symbol` : String 165 | * `brokerSymbol` : String. Can be empty if broker symbol is the same as TV symbol. 166 | * `type` : [OrderType](#ordertype) 167 | * `side` : [Side](#side) 168 | * `qty` : Double 169 | * `status` : [OrderStatus](#orderstatus) 170 | * `limitPrice` : double 171 | * `stopPrice` : double 172 | * `avgPrice` : double 173 | * `filledQty` : double 174 | * `parentId` : String. If order is a bracket parentOrderId should contain base order/position id. 175 | * `parentType`: [ParentType](#parenttype) 176 | * `duration`: [OrderDuration](#orderduration) 177 | 178 | ## Position 179 | 180 | Describes a single position. 181 | 182 | * `id`: String. Usually id should be equal to brokerSymbol 183 | * `symbol` : String 184 | * `brokerSymbol` : String. Can be empty if broker symbol is the same as TV symbol. 185 | * `qty` : positive number 186 | * `side`: [Side](#side) 187 | * `avgPrice` : number 188 | 189 | ## Trade 190 | 191 | Describes a single trade (individual position). 192 | 193 | * `id`: String. Usually id should be equal to brokerSymbol 194 | * `symbol` : String 195 | * `date`: number (UNIX timestamp in milliseconds) 196 | * `brokerSymbol` : String. Can be empty if broker symbol is the same as TV symbol. 197 | * `qty` : Double positive 198 | * `side`: [Side](#side) 199 | * `price` : number 200 | 201 | ## Execution 202 | 203 | Describes a single execution. Execution is a mark on a chart that displays trade information. 204 | 205 | * `symbol` : String 206 | * `brokerSymbol` : String. Can be empty if broker symbol is the same as TV symbol. 207 | * `price` : number 208 | * `time`: Date 209 | * `side` : [Side](#side) 210 | * `qty` : number 211 | 212 | ## ActionMetainfo 213 | 214 | Describes a single action to put it into a dropdown or a context menu. It is a structure. 215 | 216 | * `text` : String 217 | * `checkable` : Boolean. Set it to true if you need a checkbox. 218 | * `checked` : Boolean. Value of the checkbox. 219 | * `enabled`: Boolean 220 | * `action`: function. Action is executed when user clicks the item. It has 1 argument - value of the checkbox if exists. 221 | 222 | ## OrderType 223 | 224 | Constants describing an order status. 225 | 226 | ```javascript 227 | OrderType.Limit = 1 228 | OrderType.Market = 2 229 | OrderType.Stop = 3 230 | OrderType.StopLimit = 4 231 | ``` 232 | 233 | ## Side 234 | 235 | Constants describing an order/execution side. 236 | 237 | ```javascript 238 | Side.Buy = 1 239 | Side.Sell = -1 240 | ``` 241 | 242 | ## ParentType 243 | 244 | Constants describing a bracket order. 245 | 246 | ```javascript 247 | ParentType.Order = 1 248 | ParentType.Position = 2 249 | ``` 250 | 251 | ## OrderStatus 252 | 253 | Constants describing an order status. 254 | 255 | ```javascript 256 | OrderStatus.Canceled = 1 // order is canceled 257 | OrderStatus.Filled = 2 // order is fully executed 258 | OrderStatus.Inactive = 3 // bracket order is created but waiting for a base order to be filled 259 | OrderStatus.Placing = 4 // order is not created on a broker side yet 260 | OrderStatus.Rejected = 5 // order is rejected for some reason 261 | OrderStatus.Working = 6 // order is created but not executed yet 262 | ``` 263 | 264 | ## OrderDuration 265 | 266 | Duration or expiration of an order. 267 | 268 | * `type`: string identifier from the list that you pass to [durations](#orderduration) 269 | * `datetime`: number 270 | 271 | ## DOMEObject 272 | 273 | Object that describes a single DOM response. 274 | 275 | * `snapshot`: Boolean 276 | 277 | Positive value means that previous data should be cleaned 278 | 279 | * `asks`: array of DOMELevel sorted by price in ascending order 280 | * `bids`: array of DOMELevel sorted by price in ascending order 281 | 282 | ## DOMELevel 283 | 284 | Single DOM price level object. 285 | 286 | * `price`: double 287 | * `volume`: double 288 | 289 | ## OrderTicketFocusControl 290 | 291 | Constants that are used to set the focus when you open standard Order dialog or Position dialog. 292 | 293 | ```javascript 294 | OrderTicketFocusControl.StopLoss = 1 // focus stop loss control 295 | OrderTicketFocusControl.StopPrice = 2 // focus stop price for StopLimit orders 296 | OrderTicketFocusControl.TakeProfit = 3 // focus take profit control 297 | ``` 298 | 299 | ## Brackets 300 | 301 | * `stopLoss`: double 302 | * `takeProfit`: double 303 | 304 | ## Formatter 305 | 306 | An object with `format` method that can be used to format the number to a string. 307 | -------------------------------------------------------------------------------- /Frequently-Asked-Questions.md: -------------------------------------------------------------------------------- 1 | ## Data Questions 2 | 3 | 13 | 14 | 15 | 16 |
17 | 1. How do I connect my data? How to add new ticker symbols? 18 |

19 | 20 | The Charting Library should to be used by technical specialists. 21 | It requires advanced skills in JavaScript and deep knowledge of WEB protocols. 22 | You should know it yourself or have/hire people who know this. 23 | Additionally, if you don't have a WEB API, you will need at least a server language programmer and a system administrator to implement a WEB API on the server side. 24 | 25 | We’ve done lot of work to make the process of connecting data simple and clear. 26 | 27 | First, you need to read and understand this article: [How to connect my data](How-To-Connect-My-Data) 28 | 29 | If you still have questions, open [Demo Chart](https://demo_chart.tradingview.com), then open Debugger-Network and filter requests by `demo_feed`. You will see all requests and corresponding responses in the [UDF](UDF) format. 30 | 31 |

32 | 33 |
34 | 2. Do you have an example of JS API implementation? 35 |

36 | 37 | If you look at the picture below, you will see the UDF Adapter as an example of the JS API implementation. Its code is not minified and it is written in such a way that our clients can understand how it works. 38 | 39 | [Scheme](How-To-Connect-My-Data#udf-scheme) 40 | 41 |

42 | 43 |
44 | 3. Do you have an example of a WebSocket data transport? 45 |

46 | 47 | We don’t have an example of such integration, but we still hope to make this example in the future. 48 | 49 |

50 | 51 |
52 | 4. Do you have an example of a back-end data feed on ASP.NET, Python, PHP etc. ? 53 |

54 | 55 | The only example of a back-end feed that we have is written on Javascript for NodeJS. You can find it here: [yahoo_datafeed](https://github.com/tradingview/yahoo_datafeed) 56 | 57 |

58 | 59 |
60 | 5. How can I display my data stored in a TXT/CSV/Excel file? 61 |

62 | 63 | First of all, the Charting Library is not intended to display data from files. It is used to display bars data from a server. Secondly, you should keep in mind that according to the agreement you should use Charting Library on public websites only. If you still want to use a file as the source of data you will need to do the following steps: 64 | 65 | 1. Write an application using any server language (.NET, PHP, NodeJS, Python etc.). This application should read the file and provide the data from it in [UDF](UDF) format over HTTP(S). 66 | 67 | Note: You can provide data in another format or use a websocket to transfer it, but in this case you will need to implement a [JS-Api](JS-Api) adapter on a client. 68 | 1. You should either have a static IP or register a domain so a browser can send requests to your server. 69 | 1. Open `index.html` and replace `demo_feed.tradingview.com` with the URL to your server. 70 | 71 |

72 | 73 |
74 | 6. Why my data is not displayed / displayed incorrectly / incorrectly fetched from a server? 75 |

76 | 77 | The first thing you should do is open `index.html` or your script where you create the library widget and put the following line in the initialization options of the widget: `debug: true,`. 78 | Once you have done that, you will see lots of helpful information in your browser console. 79 | Most of important actions that happen in the library are explained in the console. 80 | 81 | Please read [Symbology](Symbology) thoroughly. Most of errors with data happen because of incorrect symbol settings. 82 | 83 |

84 | 85 |
86 | 7. Charting Library is constantly asking for data. How to tell it that data is finished? 87 |

88 | 89 | Specifically for this purpose there is a flag that can be added to the responses from your server that tells the library that there is no more data on the server. 90 | It is called `no_data` for [UDF](UDF#bars) and `noData` for [JS API](JS-Api#getbarssymbolinfo-resolution-from-to-onhistorycallback-onerrorcallback-firstdatarequest) 91 | 92 |

93 | 94 |
95 | 8. How to change the number of decimal places of prices on a chart? 96 |

97 | 98 | Please read [Symbology](Symbology) thoroughly. Number of decimal places is calculated based on `minmov` and `pricescale` values. 99 | 100 |

101 | 102 |
103 | 9. What if I have a single price for each timestamp? 104 |

105 | 106 | You still can display your data if you have only one price for each timestamp, but obviously you will not be able to display the data as bars/candles. Since the library is intended to display different styles of data: candles, bars, histogram, you are supposed to provide Open, High, Low, Close and optional Volume for each timestamp. If you have only one price, you can pass `Open = High = Low = Close = price`. For better view of this data, you can change default chart style to “Line” (see GUI Questions). 107 | 108 |

109 | 110 | ## GUI Questions 111 | 112 |
113 | 1. How can I subscribe to chart events? 114 |

115 | 116 | We have a few ways to subscribe to the events: 117 | 118 | 1. Subscribing to general events that are related to a whole chart layout, not a specific chart. 119 | [Open article](Widget-Methods#subscribing-to-chart-events) 120 | 1. Subscribing to events that are related to a single chart 121 | [Open article](Chart-Methods#subscribing-to-chart-events) 122 | 123 | Check the result value of subscription methods. 124 | Some of them return a [Subscription](Subscription) object that has methods `subscribe`/`unsubscribe`. The others accept a callback function. 125 | 126 |

127 | 128 |
129 | 2. How to change default bars style from Candles to another one? 130 |

131 | 132 | You need to use [overrides](Widget-Constructor#overrides) of the Widget Constructor. Add `mainSeriesProperties.style` key. You can find allowed values in [this article](Overrides) 133 | 134 |

135 | 136 |
137 | 3. How can I change the list of resolutions (time intervals) on a chart / make them grayed? 138 |

139 | 140 | * List of the resolutions displayed in a pop-up on a chart is defined by [supported_resolutions](JS-Api#supported_resolutions) from the data feed configuration. 141 | * Resolutions available for a certain instrument are defined by [supported_resolutions](Symbology#supported_resolutions) from the instrument/symbol information. 142 | * If you support intraday resolutions, you need to set [has_intraday](Symbology#has_intraday) 143 | * Additionally, if you support seconds, you need to set [has_seconds](Symbology#has_seconds) 144 | * If you support daily resolutions, you should set [has_daily](Symbology#has_daily) 145 | * If you support weeks and months, you should set [has_weekly_and_monthly](Symbology#has_weekly_and_monthly) 146 | * Additionally, you should set the resolutions, which are provided by your server for [intraday resolutions](Symbology#intraday_multipliers) and separately for [seconds](Symbology#seconds_multipliers). 147 | * If an instrument supports (`supported_resolutions`) more resolutions that can be provided by the server (`intraday_multipliers`), the other resolutions are constructed by the chart. 148 | 149 |

150 | 151 |
152 | 4. How to hide a GUI Element (symbol, interval, button etc.)? 153 |

154 | 155 | * Most of GUI elements can be hidden using [Featuresets](Featuresets). Please look at the [Interactive map of featuresets](http://tradingview.github.io/featuresets.html) to find what you need. 156 | * There are base elements that cannot be hidden, but if you still want to get rid of them you can use [CSS customization](Widget-Constructor#custom_css_url). Please note that the names, classes and identifiers of DOM elements may be changed in future versions of the product without any notifications. 157 | 158 |

159 | 160 | ## Other Questions 161 | 162 |
163 | 1. What is the the difference between Widget, Charting Library and Trading Terminal? 164 |

165 | 166 | * [Widget](https://tradingview.com/widget/) is connected to TradingView data. Perfect for websites, blogs and forums where you need a fast & free solution. 167 | 168 | Integration is simply cutting & pasting pre-made iframe code. It has lots of display modes. 169 | 170 | * [Charting Library](https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/) is a chart with your own data. 171 | 172 | This is a standalone solution that you download, host on your servers, connect your own data & use in your site/app for free. 173 | 174 | * [Trading Terminal](https://www.tradingview.com/trading-terminal/) is a standalone product that is licensed to brokers. 175 | 176 | It includes all features available in the Charting Library, but it also has trading functionality, multiple chart layouts, watchlists, details, news widgets and other advanced tools. 177 | 178 | It has its own licensing fees associated with it. 179 | 180 |

181 | 182 |
183 | 2. How do I add a custom indicator? 184 |

185 | 186 | At the moment there is only one way to add custom indicators. It is described in a [dedicated article](Creating-Custom-Studies). 187 | 188 |

189 | 190 | 191 | -------------------------------------------------------------------------------- /Account-Manager.md: -------------------------------------------------------------------------------- 1 | :chart: All content on this page is relevant to [Trading Terminal](Trading-Terminal) only. 2 | 3 | Account Manager is an interactive table that displays trading information. 4 | It includes 3 pages: orders/positions and account information. 5 | 6 | To create an account manager you will need to describe columns of each page and provide data. 7 | 8 | Remark 1. [Broker API](Broker-API) should implement [accountManagerInfo](Broker-API#accountmanagerinfo) 9 | 10 | 17 | 18 | # Account Manager Meta Information 19 | 20 | The following information should be returned by [accountManagerInfo](Broker-API#accountManagerInfo). 21 | 22 | ## Account Manager header 23 | 24 | Account Manager's header includes the name of the broker and an account name or a list of accounts. 25 | 26 | ### accountTitle: String 27 | 28 | ### accountsList: array of AccountInfo 29 | 30 | ### account: [WatchedValue](WatchedValue) of AccountInfo 31 | 32 | `AccountInfo` is an object with the following keys: 33 | 34 | 1. `id` - account id 35 | 1. `name` - account name 36 | 1. `currency` - account currency 37 | 38 | If the `currency` key is not set, `USD` will be used as a default value. 39 | 40 | ## Orders Page 41 | 42 | ### orderColumns: array of [Column](#column-description) 43 | 44 | Columns description that you want to be displayed on the Orders page. 45 | You can display any field of an [order](Trading-Objects-and-Constants#order) or add your own fields to an order object and display them. 46 | 47 | ### orderColumnsSorting: [SortingParameters](#sortingparameters) 48 | 49 | Optional sorting of the table. If it is not set, the table is sorted by the first column. 50 | 51 | ### possibleOrderStatuses: array of [OrderStatus](Trading-Objects-and-Constants#orderstatus) 52 | 53 | Optional list of statuses to be used in the orders filter. Default list is used if it hasn't been set. 54 | 55 | ### historyColumns: array of [Column](#column-description) 56 | 57 | History page will be displayed if it exists. All orders from previous sessions will be shown in the History. 58 | 59 | ### historyColumnsSorting: [SortingParameters](#sortingparameters) 60 | 61 | Optional sorting of the table. If it is not set, the table is sorted by the first column. 62 | 63 | ## Positions Page 64 | 65 | ### positionColumns: array of [Column](#column-description) 66 | 67 | You can display any field of a [position](Trading-Objects-and-Constants#position) or add your own fields to a position object and display them. 68 | 69 | ## Additional Pages (e.g. Account Summary) 70 | 71 | ### pages: array of [Page](#page) 72 | 73 | You can add new tabs in the Account Manager by using `pages`. Each tab is a set of tables. 74 | 75 | #### Page 76 | 77 | `Page` is a description of an additional Account Manager tab. It is an object with the following fields: 78 | 79 | 1. `id`: String 80 | 81 | Unique identifier of a page 82 | 83 | 1. `title`: String 84 | 85 | Page title. It is the tab name. 86 | 87 | 1. `tables`: Array of [Table](#table). 88 | 89 | It is possible to display one or more tables in this tab. 90 | 91 | #### Table 92 | 93 | You can add one or more tables to a [Page](#page). 94 | Account Summary table metainfo is an object with the following fields: 95 | 96 | 1. `id`: String 97 | 98 | Unique identifier of a table. 99 | 100 | 1. `title`: String 101 | 102 | Optional title of a table. 103 | 104 | 1. `columns`: array of [Column](#column-description) 105 | 106 | 1. `getData`: Promise 107 | 108 | This function is used to request table data. It should return Promise (or Deferred) and resolve it with an array of data rows. 109 | 110 | Each row is an object. Keys of this object are column names with the corresponding values. 111 | 112 | There is a predefined field `isTotalRow` which can be used to mark a row that should be at the bottom of a table. 113 | 114 | 1. `changeDelegate` : [Delegate](Delegate) 115 | 116 | This delegate is used to watch the data changes and update the table. Pass new account manager data to `fire` method of the delegate. 117 | 118 | 1. `initialSorting`: [SortingParameters](#sortingparameters) 119 | 120 | Optional sorting of the table. If it is not set, the table is sorted by the first column. 121 | 122 | **NOTE**: if you have more than 1 row in a table and want to update a row using `changeDelegate` make sure that you have `id` field in each row to identify it. 123 | It is not necessary if you have only 1 row in a table. 124 | 125 | #### SortingParameters 126 | 127 | Object with the following properties: 128 | 129 | - `columnId` - `id` or `property` of the column that will be used for sorting. 130 | - `asc` - (optional, default `false`) - If it is `true`, then initial sorting will be in ascending order. 131 | 132 | ## Formatters 133 | 134 | ### customFormatters: array of a column formatter description 135 | 136 | Optional array to define custom formatters. Each description is an object with the following fields: 137 | 138 | - `name`: unique identifier of a formatter. 139 | 140 | - `format(options)`: function that is used for formatting of a cell value. `options` is an object with the following keys: 141 | 1. `value` - value to be formatted 142 | 1. `priceFormatter` - standard formatter for price. You can use method `format(price)` to prepare price value. 143 | 1. `prevValue` - optional field. It is a previous value so you can compare and format accordingly. It exists if current column has the `highlightDiff: true` key. 144 | 1. `row` - object with all key/value pairs from the current row 145 | 146 | ## Column description 147 | 148 | The most valuable part of Account Manager description is a description of its columns. 149 | 150 | ### label 151 | 152 | Column title. It will be displayed in the table's header row. 153 | 154 | ### className 155 | 156 | Optional `className` is added to the html tag of each value cell. 157 | You can use it to customize table's style. 158 | 159 | Here is a list of predefined classes: 160 | 161 | | class name | description | 162 | |--------------|----------------| 163 | | `tv-data-table__cell--symbol-cell` | Special formatter for a symbol field | 164 | | `tv-data-table__cell--right-align` | It aligns cell value to the right | 165 | | `tv-data-table__cell--buttons-cell` | Cell with a buttons | 166 | 167 | ### formatter 168 | 169 | Name of the formatter to be used for data formatting. If `formatter` is not set the value is displayed as is. 170 | Formatter can be a default or a custom one. 171 | 172 | Here is the list of default formatters: 173 | 174 | | name | description | 175 | | ---- | ----------- | 176 | | `symbol` | It is used for a symbol field. It displays `brokerSymbol`, but when you click on a symbol the chart changes according to the `symbol` field. `property` key is ignored.| 177 | | `side` | It is used to display the side: Sell or Buy. | 178 | | `type` | It is used to display the type of order: Limit/Stop/StopLimit/Market. | 179 | | `formatPrice` | Symbol price formatting. | 180 | | `formatQuantity` | Displays an integer or floating point quantity, separates thousands groups with a space. | 181 | | `formatPriceForexSup` | The same as `formatPrice`, but it makes the last character of the price superscripted. It works only if instrument type is set to `forex`.| 182 | | `status` | It is used to format the `status`. | 183 | | `date` | Displays the date or time. | 184 | | `localDate` | Displays the local date or time. | 185 | | `fixed` | Displays a number with 2 decimal places. | 186 | | `pips` | Displays a number with 1 decimal place. | 187 | | `profit` | Displays profit. It also adds the `+` sign, separates thousands and changes the cell text color to red or green. | 188 | 189 | There are some special formatters that are used to add buttons to the table: 190 | 191 | `orderSettings` adds Modify/Cancel buttons to the orders tab. Always set `modificationProperty` value to `status` for this formatter. 192 | 193 | `posSettings` adds Edit/Close buttons to the Positions/Net Positions tab 194 | 195 | `tradeSettings` adds Edit/Close buttons to the Individual Positions tab. Always set `modificationProperty` value to `canBeClosed` for this formatter. 196 | 197 | ### property 198 | 199 | `property` is a data object key that is used to get the data to display in a table. 200 | 201 | ### sortProp 202 | 203 | Optional `sortProp` is a data object key that is used for data sorting. 204 | 205 | ### modificationProperty 206 | 207 | If optional `modificationProperty` is set then the change of its value updates the table cell. 208 | 209 | ### notSortable 210 | 211 | Optional `notSortable` can be set to prevent column sorting. 212 | 213 | ### help 214 | 215 | `help` is a tooltip string for the column. 216 | 217 | ### highlightDiff 218 | 219 | `highlightDiff` can be set with `formatPrice` and `formatPriceForexSup` formatters only to highlight the changes of the field. 220 | 221 | ### fixedWidth 222 | 223 | If it is `true` then the column width will not be changed when the cell value is decreased. 224 | 225 | ### supportedStatusFilters 226 | 227 | An optional numeric array of order statuses that is applied to order columns only. If it is available then the column will be displayed in the specified tabs of the status filter only. 228 | 229 | Here is the list of possible order statuses: 230 | 231 | 1. 0 - All 232 | 1. 1 - Canceled 233 | 1. 2 - Filled 234 | 1. 3 - Inactive 235 | 1. 5 - Rejected, 236 | 1. 6 - Working 237 | 238 | ## Context Menu 239 | 240 | ### contextMenuActions(e, activePageItems) 241 | 242 | `e`: context object passed by a browser 243 | 244 | `activePageItems`: array of `ActionMetainfo` items for the current page 245 | 246 | Optional function to create a custom context menu. 247 | It should return `Promise` that is resolved with an array of `ActionMetainfo`. 248 | -------------------------------------------------------------------------------- /Creating-Custom-Studies.md: -------------------------------------------------------------------------------- 1 | ## Displaying your data as an indicator 2 | 3 | The instruction below explains how to display chart data as an indicator. Please follow these steps. 4 | 5 | 1. Come up with a new ticker name to display your data and set up your server to return valid SymbolInfo for this new ticker. 6 | 1. Also, set up the server to return valid historical data for this ticker. 7 | 1. Use the indicator template and complete the following fields: name, descriptions, and the ticker. Modify the default style of the indicator if required. 8 | 9 | ```javascript 10 | { 11 | // Replace the with your study name 12 | // The name will be used internally by the Charting Library 13 | name: "", 14 | metainfo: { 15 | "_metainfoVersion": 40, 16 | "id": "@tv-basicstudies-1", 17 | "scriptIdPart": "", 18 | "name": "", 19 | 20 | // This description will be displayed in the Indicators window 21 | // It is also used as a "name" argument when calling the createStudy method 22 | "description": "", 23 | 24 | // This description will be displayed on the chart 25 | "shortDescription": "", 26 | 27 | "is_hidden_study": true, 28 | "is_price_study": true, 29 | "isCustomIndicator": true, 30 | 31 | "plots": [{"id": "plot_0", "type": "line"}], 32 | "defaults": { 33 | "styles": { 34 | "plot_0": { 35 | "linestyle": 0, 36 | "visible": true, 37 | 38 | // Plot line width. 39 | "linewidth": 2, 40 | 41 | // Plot type: 42 | // 1 - Histogram 43 | // 2 - Line 44 | // 3 - Cross 45 | // 4 - Area 46 | // 5 - Columns 47 | // 6 - Circles 48 | // 7 - Line With Breaks 49 | // 8 - Area With Breaks 50 | "plottype": 2, 51 | 52 | // Show price line? 53 | "trackPrice": false, 54 | 55 | // Plot transparency, in percent. 56 | "transparency": 40, 57 | 58 | // Plot color in #RRGGBB format 59 | "color": "#0000FF" 60 | } 61 | }, 62 | 63 | // Precision of the study's output values 64 | // (quantity of digits after the decimal separator). 65 | "precision": 2, 66 | 67 | "inputs": {} 68 | }, 69 | "styles": { 70 | "plot_0": { 71 | // Output name will be displayed in the Style window 72 | "title": "-- output name --", 73 | "histogramBase": 0, 74 | } 75 | }, 76 | "inputs": [], 77 | }, 78 | 79 | constructor: function() { 80 | this.init = function(context, inputCallback) { 81 | this._context = context; 82 | this._input = inputCallback; 83 | 84 | // Define the symbol to be plotted. 85 | // Symbol should be a string. 86 | // You can use PineJS.Std.ticker(this._context) to get the selected symbol's ticker. 87 | // For example, 88 | // var symbol = "AAPL"; 89 | // var symbol = "#EQUITY"; 90 | // var symbol = PineJS.Std.ticker(this._context) + "#TEST"; 91 | var symbol = ""; 92 | this._context.new_sym(symbol, PineJS.Std.period(this._context), PineJS.Std.period(this._context)); 93 | }; 94 | 95 | this.main = function(context, inputCallback) { 96 | this._context = context; 97 | this._input = inputCallback; 98 | 99 | this._context.select_sym(1); 100 | 101 | // You can use following built-in functions in PineJS.Std object: 102 | // open, high, low, close 103 | // hl2, hlc3, ohlc4 104 | var v = PineJS.Std.close(this._context); 105 | return [v]; 106 | } 107 | } 108 | } 109 | ``` 110 | 111 | 1. Save the indicator into the custom indicators file with the following structure: 112 | 113 | ```javascript 114 | __customIndicators = [ 115 | // *** your indicator object, created from the template *** 116 | ]; 117 | ``` 118 | 119 | Note, that indicators file is a JavaScript source file that only defines an array of indicator objects. You are able to add several indicators to this file. You are also able to add the indicators that we compiled for you. 120 | 121 | 1. Use [indicators_file_name](Widget-Constructor#indicators_file_name) option of widget's constructor to load custom indicators from the indicators file. 122 | 1. Update your widget's initialization code to [create](Chart-Methods#createstudyname-forceoverlay-lock-inputs-callback-overrides-options) this indicator when the chart is ready. 123 | 124 | ## Examples 125 | 126 | 1. Add the indicator to the Charting Library using [indicators_file_name](Widget-Constructor#indicators_file_name) option. 127 | 1. Change your widget's initialization code. Here is an example. 128 | 129 | ```javascript 130 | widget = new TradingView.widget(/* ... */); 131 | 132 | widget.onChartReady(function() { 133 | widget.chart().createStudy('', false, true); 134 | }); 135 | ``` 136 | 137 | ### Requesting data for another ticker 138 | 139 | Let's assume that you wish to display the equity curve on the chart. You will have to do the following. 140 | 141 | * Create a name for the new ticker, e.g. `#EQUITY`. You can use any name that you can think of. 142 | * Change your server's code to validate this symbol. The minimum amount of symbol information should be returned for this ticker. 143 | * Make the server return valid historical data for this ticker just as you return the historical data for the generic symbols such as AAPL. 144 | * Modify the indicator template mentioned above and create the indicators file (or add a new indicator to the existing indicators file). Here is an example: 145 | 146 | ```javascript 147 | __customIndicators = [ 148 | { 149 | name: "Equity", 150 | metainfo: { 151 | "_metainfoVersion": 40, 152 | "id": "Equity@tv-basicstudies-1", 153 | "scriptIdPart": "", 154 | "name": "Equity", 155 | "description": "Equity", 156 | "shortDescription": "Equity", 157 | 158 | "is_hidden_study": true, 159 | "is_price_study": true, 160 | "isCustomIndicator": true, 161 | 162 | "plots": [{"id": "plot_0", "type": "line"}], 163 | "defaults": { 164 | "styles": { 165 | "plot_0": { 166 | "linestyle": 0, 167 | "visible": true, 168 | 169 | // Make the line thinner 170 | "linewidth": 1, 171 | 172 | // Plot type is Line 173 | "plottype": 2, 174 | 175 | // Show price line 176 | "trackPrice": true, 177 | 178 | "transparency": 40, 179 | 180 | // Set the plotted line color to dark red 181 | "color": "#880000" 182 | } 183 | }, 184 | 185 | // Precision is set to one digit, e.g. 777.7 186 | "precision": 1, 187 | 188 | "inputs": {} 189 | }, 190 | "styles": { 191 | "plot_0": { 192 | // Output name will be displayed in the Style window 193 | "title": "Equity value", 194 | "histogramBase": 0, 195 | } 196 | }, 197 | "inputs": [], 198 | }, 199 | 200 | constructor: function() { 201 | this.init = function(context, inputCallback) { 202 | this._context = context; 203 | this._input = inputCallback; 204 | 205 | var symbol = "#EQUITY"; 206 | this._context.new_sym(symbol, PineJS.Std.period(this._context), PineJS.Std.period(this._context)); 207 | }; 208 | 209 | this.main = function(context, inputCallback) { 210 | this._context = context; 211 | this._input = inputCallback; 212 | 213 | this._context.select_sym(1); 214 | 215 | var v = PineJS.Std.close(this._context); 216 | return [v]; 217 | } 218 | } 219 | } 220 | ]; 221 | ``` 222 | 223 | ### Coloring bars 224 | 225 | ```javascript 226 | __customIndicators = [ 227 | { 228 | name: "Bar Colorer Demo", 229 | metainfo: { 230 | _metainfoVersion: 42, 231 | 232 | id: "BarColoring@tv-basicstudies-1", 233 | 234 | name: "BarColoring", 235 | description: "Bar Colorer Demo", 236 | shortDescription: "BarColoring", 237 | scriptIdPart: "", 238 | is_price_study: true, 239 | is_hidden_study: false, 240 | isCustomIndicator: true, 241 | 242 | isTVScript: false, 243 | isTVScriptStub: false, 244 | defaults: { 245 | precision: 4, 246 | palettes: { 247 | palette_0: { 248 | // palette colors 249 | // change it to the default colors that you prefer, 250 | // but note that the user can change them in the Style tab 251 | // of indicator properties 252 | colors: [ 253 | { color: "#FFFF00" }, 254 | { color: "#0000FF" } 255 | ] 256 | } 257 | } 258 | }, 259 | inputs: [], 260 | plots: [{ 261 | id: "plot_0", 262 | 263 | // plot type should be set to 'bar_colorer' 264 | type: "bar_colorer", 265 | 266 | // this is the name of the palette that is defined 267 | // in 'palettes' and 'defaults.palettes' sections 268 | palette: "palette_0" 269 | }], 270 | palettes: { 271 | palette_0: { 272 | colors: [ 273 | { name: "Color 0" }, 274 | { name: "Color 1" } 275 | ], 276 | 277 | // the mapping between the values that 278 | // are returned by the script and palette colors 279 | valToIndex: { 280 | 100: 0, 281 | 200: 1 282 | } 283 | } 284 | } 285 | }, 286 | constructor: function() { 287 | this.main = function(context, input) { 288 | this._context = context; 289 | this._input = input; 290 | 291 | var valueForColor0 = 100; 292 | var valueForColor1 = 200; 293 | 294 | // perform your calculations here and return one of the constants 295 | // that is specified as a key in 'valToIndex' mapping 296 | var result = 297 | Math.random() * 100 % 2 > 1 ? // we randomly select one of the color values 298 | valueForColor0 : valueForColor1; 299 | 300 | return [result]; 301 | } 302 | } 303 | } 304 | ]; 305 | ``` 306 | -------------------------------------------------------------------------------- /Symbology.md: -------------------------------------------------------------------------------- 1 | The Charting Library uses your own data where you define the symbology yourself. You may name the symbols as you see fit. 2 | 3 | But there are some fine points that you should be aware of: 4 | 5 | 1. Our own symbology assumes that symbol names use `EXCHANGE:SYMBOL` format. 6 | The Library supports this by default. You may continue using if it meets your requirements. 7 | 1. If you already have or considering a different symbology then you might want to use the `ticker` field. 8 | 9 | `ticker` is the unique identifier of the symbol that is used **only** inside the Library. Your users will never be able to see it. 10 | Simply enter the `ticker` values in all of your SymbolInfo objects and Symbol Search results and expect that the Charting Library will request the data based on those values. 11 | 12 | # SymbolInfo Structure 13 | 14 | **This section is extremely important. 72.2% of all issues experienced by Charting Library users are caused by wrong/malformed SymbolInfo data.** 15 | 16 | SymbolInfo is an object containing symbol metadata. This object is the result of resolving the symbol. SymbolInfo has following fields: 17 | 18 | ## name 19 | 20 | It's the name of the symbol. It is a string that your users will be able to see. Also, it will be used for data requests if you are not using **tickers**. 21 | 22 | ## ticker 23 | 24 | It's an unique identifier for this particular symbol in your symbology. 25 | If you specify this property then its value will be used for all data requests for this symbol. `ticker` will be treated the same as [name](#name) if not specified explicitly. 26 | 27 | ## description 28 | 29 | Description of a symbol. Will be displayed in the chart legend for this symbol. 30 | 31 | ## type 32 | 33 | Optional type of the instrument. 34 | 35 | *Possible types are:* 36 | 37 | - `stock` 38 | - `index` 39 | - `forex` 40 | - `futures` 41 | - `bitcoin` 42 | - `expression` 43 | - `spread` 44 | - `cfd` 45 | - or another string value. 46 | 47 | ## session 48 | 49 | Trading hours for this symbol. See the [Trading Sessions](Trading-Sessions) article to learn more details. 50 | 51 | ## exchange, listed_exchange 52 | 53 | Both of these fields are expected to have a short name of the exchange where this symbol is traded. 54 | 55 | The name will be displayed in the chart legend for this symbol. 56 | 57 | ## timezone 58 | 59 | Timezone of the exchange for this symbol. We expect to get the name of the time zone in `olsondb` format. 60 | 61 | *Supported timezones are:* 62 | 63 | - `Etc/UTC` 64 | - `Africa/Cairo` 65 | - `Africa/Johannesburg` 66 | - `Africa/Lagos` 67 | - `America/Argentina/Buenos_Aires` 68 | - `America/Bogota` 69 | - `America/Caracas` 70 | - `America/Chicago` 71 | - `America/El_Salvador` 72 | - `America/Juneau` 73 | - `America/Lima` 74 | - `America/Los_Angeles` 75 | - `America/Mexico_City` 76 | - `America/New_York` 77 | - `America/Phoenix` 78 | - `America/Santiago` 79 | - `America/Sao_Paulo` 80 | - `America/Toronto` 81 | - `America/Vancouver` 82 | - `Asia/Almaty` 83 | - `Asia/Ashkhabad` 84 | - `Asia/Bahrain` 85 | - `Asia/Bangkok` 86 | - `Asia/Chongqing` 87 | - `Asia/Dubai` 88 | - `Asia/Ho_Chi_Minh` 89 | - `Asia/Hong_Kong` 90 | - `Asia/Jakarta` 91 | - `Asia/Jerusalem` 92 | - `Asia/Kathmandu` 93 | - `Asia/Kolkata` 94 | - `Asia/Kuwait` 95 | - `Asia/Muscat` 96 | - `Asia/Qatar` 97 | - `Asia/Riyadh` 98 | - `Asia/Seoul` 99 | - `Asia/Shanghai` 100 | - `Asia/Singapore` 101 | - `Asia/Taipei` 102 | - `Asia/Tehran` 103 | - `Asia/Tokyo` 104 | - `Atlantic/Reykjavik` 105 | - `Australia/ACT` 106 | - `Australia/Adelaide` 107 | - `Australia/Brisbane` 108 | - `Australia/Sydney` 109 | - `Europe/Athens` 110 | - `Europe/Belgrade` 111 | - `Europe/Berlin` 112 | - `Europe/Copenhagen` 113 | - `Europe/Helsinki` 114 | - `Europe/Istanbul` 115 | - `Europe/London` 116 | - `Europe/Luxembourg` 117 | - `Europe/Madrid` 118 | - `Europe/Moscow` 119 | - `Europe/Paris` 120 | - `Europe/Riga` 121 | - `Europe/Rome` 122 | - `Europe/Stockholm` 123 | - `Europe/Tallinn` 124 | - `Europe/Vilnius` 125 | - `Europe/Warsaw` 126 | - `Europe/Zurich` 127 | - `Pacific/Auckland` 128 | - `Pacific/Chatham` 129 | - `Pacific/Fakaofo` 130 | - `Pacific/Honolulu` 131 | - `Pacific/Norfolk` 132 | - `US/Mountain` 133 | 134 | ## minmov, pricescale, minmove2, fractional 135 | 136 | These four keys have different meanings when used for common and fractional prices. 137 | 138 | ### Common prices 139 | 140 | `MinimalPossiblePriceChange = minmov / pricescale` 141 | 142 | - `minmov` is the amount of price precision steps for 1 tick. For example, since the tick size for U.S. equities is `0.01`, `minmov` is 1. But the price of the E-mini S&P futures contract moves upward or downward by `0.25` increments, so the `minmov` is `25`. 143 | - `pricescale` defines the number of decimal places. It is `10^number-of-decimal-places`. If a price is displayed as `1.01`, `pricescale` is `100`; If it is displayed as `1.005`, `pricescale` is `1000`. 144 | - `minmove2` for common prices is `0` or it can be skipped. 145 | - `fractional` for common prices is `false` or it can be skipped. 146 | 147 | Example: 148 | 149 | Typical stock with `0.01` price increment: `minmov = 1, pricescale = 100, minmove2 = 0`. 150 | 151 | ### Fractional prices 152 | 153 | Fractional prices are displayed 2 different forms: 1) `xx'yy` (for example, `133'21`) 2) `xx'yy'zz` (for example, `133'21'5`). 154 | 155 | - `xx` is an integer part. 156 | - `minmov/pricescale` is a Fraction. 157 | - `minmove2` is used in form 2. 158 | - `fractional` is `true` 159 | 160 | Example: 161 | 162 | If `minmov = 1`, `pricescale = 128` and `minmove2 = 4`: 163 | 164 | - `119'16'0` represents `119 + 16/32` 165 | - `119'16'2` represents `119 + 16.25/32` 166 | - `119'16'5` represents `119 + 16.5/32` 167 | - `119'16'7` represents `119 + 16.75/32` 168 | 169 | More examples: 170 | 171 | - `ZBM2014 (T-Bond)` with `1/32`: `minmov = 1`, `pricescale = 32`, `minmove2 = 0` 172 | - `ZCM2014 (Corn)` with `2/8`: `minmov = 2`, `pricescale = 8`, `minmove2 = 0` 173 | - `ZFM2014 (5 year t-note)` with `1/4 of 1/32`: `minmov = 1`, `pricescale = 128`, `minmove2 = 4` 174 | 175 | ## has_intraday 176 | 177 | *Default:* `false` 178 | 179 | Boolean value showing whether the symbol includes intraday (minutes) historical data. 180 | 181 | If it's `false` then all buttons for intraday resolutions will be disabled for this particular symbol. 182 | 183 | If it is set to `true`, all resolutions that are supplied directly by the datafeed must be provided in `intraday_multipliers` array. 184 | 185 | ## supported_resolutions 186 | 187 | An array of resolutions which should be enabled for this symbol. 188 | 189 | Each item of an array is expected to be a string. Format is described in another [article](Resolution). 190 | 191 | If one changes the symbol and new symbol does not support the selected resolution then resolution will be switched to the first available one in the list. 192 | 193 | Resolution availability logic (pseudocode): 194 | 195 | ```javascript 196 | resolutionAvailable = 197 | resolution.isIntraday 198 | ? symbol.has_intraday && symbol.supports_resoluiton(resolution) 199 | : symbol.supports_resoluiton(resolution); 200 | ``` 201 | 202 | In case of absence of `supported_resolutions` in a symbol info all DWM resolutions will be available. Intraday resolutions will be available if `has_intraday` is `true`. 203 | 204 | Supported resolutions affect available timeframes too. The timeframe will not be available if it requires the resolution that is not supported. 205 | 206 | ## intraday_multipliers 207 | 208 | *Default:* `[]` 209 | 210 | Array of resolutions (in minutes) supported directly by the data feed. 211 | Each such resolution may be passed to, and should be implemented by, [getBars](JS-Api#getbarssymbolinfo-resolution-from-to-onhistorycallback-onerrorcallback-firstdatarequest). 212 | The default of `[]` means that the data feed supports aggregating by any number of minutes. 213 | 214 | If the data feed only supports certain minute resolutions but not the requested resolution, [getBars](JS-Api#getbarssymbolinfo-resolution-from-to-onhistorycallback-onerrorcallback-firstdatarequest) will be called (repeatedly if needed) with a higher resolution as a parameter, in order to build the requested resolution. 215 | 216 | For example, if the data feed only supports minute resolution, set `intraday_multipliers` to `['1']`. 217 | 218 | When the user wants to see 5-minute data, [getBars](JS-Api#getbarssymbolinfo-resolution-from-to-onhistorycallback-onerrorcallback-firstdatarequest) will be called with the resolution set to 1 until the library builds all the 5-minute resolution by itself. 219 | 220 | ## has_seconds 221 | 222 | *Default:* `false` 223 | 224 | Boolean value showing whether the symbol includes seconds in the historical data. 225 | 226 | If it's `false` then all buttons for resolutions that include seconds will be disabled for this particular symbol. 227 | 228 | If it is set to `true`, all resolutions that are supplied directly by the data feed must be provided in `seconds_multipliers` array. 229 | 230 | ## seconds_multipliers 231 | 232 | *Default:* `[]` 233 | 234 | It is an array containing resolutions that include seconds (excluding postfix) that the data feed provides. 235 | 236 | E.g., if the data feed supports resolutions such as `["1S", "5S", "15S"]`, but has 1-second bars for some symbols then you should set `seconds_multipliers` of this symbol to `[1]`. This will make Charting Library build 5S and 15S resolutions by itself. 237 | 238 | ## has_daily 239 | 240 | *Default:* `false` 241 | 242 | The boolean value showing whether data feed has its own daily resolution bars or not. 243 | 244 | If `has_daily` = `false` then Charting Library will build the respective resolutions using 1-minute bars by itself. If not, then it will request those bars from the data feed. 245 | 246 | ## has_weekly_and_monthly 247 | 248 | *Default:* `false` 249 | 250 | The boolean value showing whether data feed has its own weekly and monthly resolution bars or not. 251 | 252 | If `has_weekly_and_monthly` = `false` then Charting Library will build the respective resolutions using daily bars by itself. If not, then it will request those bars from the data feed. 253 | 254 | ## has_empty_bars 255 | 256 | *Default:* `false` 257 | 258 | The boolean value showing whether the library should generate empty bars in the session when there is no data from the data feed for this particular time. 259 | 260 | I.e., if your session is `0900-1600` and your data has gaps between `11:00` and `12:00` and your `has_empty_bars` is `true`, then the Library will fill the gaps with bars for this time. 261 | 262 | ## force_session_rebuild 263 | 264 | *Default:* `true` 265 | 266 | The boolean value showing whether the library should filter bars using the current trading session. 267 | 268 | If `false`, bars will be filtered only when the library builds data from another resolution or if `has_empty_bars` was set to `true`. 269 | 270 | If `true`, then the Library will remove bars that don't belong to the trading session from your data. 271 | 272 | ## has_no_volume 273 | 274 | *Default:* `false` 275 | 276 | Boolean showing whether the symbol includes volume data or not. 277 | 278 | ## volume_precision 279 | 280 | *Default:* `0` 281 | 282 | Integer showing typical volume value decimal places for a particular symbol. 0 means volume is always an integer. 1 means that there might be 1 numeric character after the comma. 283 | 284 | ## data_status 285 | 286 | The status code of a series with this symbol. The status is shown in the upper right corner of a chart. 287 | 288 | *Supported statuses are:* 289 | 290 | - `streaming` 291 | - `endofday` 292 | - `pulsed` 293 | - `delayed_streaming` 294 | 295 | ## expired 296 | 297 | *Default:* `false` 298 | 299 | Boolean value showing whether this symbol is an expired futures contract or not. 300 | 301 | ## expiration_date 302 | 303 | Unix timestamp of the expiration date. One must set this value when `expired` = `true`. 304 | 305 | Charting Library will request data for this symbol starting from that time point. 306 | 307 | ## sector 308 | 309 | Sector for stocks to be displayed in the Symbol Info. 310 | 311 | ## industry 312 | 313 | Industry for stocks to be displayed in the Symbol Info. 314 | 315 | ## currency_code 316 | 317 | Currency to be displayed in the Symbol Info. 318 | -------------------------------------------------------------------------------- /Featuresets.md: -------------------------------------------------------------------------------- 1 | `Feature` or `featureset` is a string literal that can be used to change the functionality of the chart. There are simple (atomic) and complex (composite) features. Composite feature consists of simple features. Disabling composite feature disables all of its simple parts as well. Supported features are listed below. 2 | 3 | Please note that the leading `-` characters are not part of the featureset name in the table below. 4 | 5 | ### Visibility of controls and other visual elements 6 | 7 | [**Interactive Map of Featuresets**](http://tradingview.github.io/featuresets.html) 8 | 9 | | ID | Default State | Library Version | Description | 10 | |-----------------------------------------|---------------|-----------------|-------------| 11 | | **header_widget** | on | | | 12 | | - header_widget_dom_node | on | | Disabling this feature hides the header widget DOM element | 13 | | - header_symbol_search | on | | | 14 | | - symbol_search_hot_key | on | 1.9 | Symbol search by pressing any key | 15 | | - header_resolutions | on | | | 16 | | - - header_interval_dialog_button | on | | | 17 | | - - - show_interval_dialog_on_key_press | on | | | 18 | | - header_chart_type | on | | | 19 | | - header_settings | on | | Relates to Chart Properties button | 20 | | - header_indicators | on | | | 21 | | - header_compare | on | | | 22 | | - header_undo_redo | on | | | 23 | | - header_screenshot | on | | | 24 | | - header_fullscreen_button | on | | | 25 | | compare_symbol | on | 1.5 | You can remove Compare/Overlay dialog from context menus using this featureset | 26 | | border_around_the_chart | on | | | 27 | | header_saveload | on | | Hides save/load buttons (the feature is not part of `header_widget` featureset) | 28 | | left_toolbar | on | | | 29 | | control_bar | on | | Relates to the navigation buttons at the bottom of the chart | 30 | | timeframes_toolbar | on | | | 31 | | **edit_buttons_in_legend** | on | | | 32 | | - show_hide_button_in_legend | on | 1.7 | | 33 | | - format_button_in_legend | on | 1.7 | | 34 | | - study_buttons_in_legend | on | 1.7 | | 35 | | - delete_button_in_legend | on | 1.7 | | 36 | | **context_menus** | on | | | 37 | | - pane_context_menu | on | | | 38 | | - scales_context_menu | on | | | 39 | | - legend_context_menu | on | | | 40 | | main_series_scale_menu | on | 1.7 | Displays the settings button in the bottom right corner of the chart | 41 | | display_market_status | on | | | 42 | | remove_library_container_border | on | | | 43 | | chart_property_page_style | on | | | 44 | | property_pages | on | 1.11 | Disables all property pages | 45 | | show_chart_property_page | on | 1.6 | Turning this feature off disables Properties | 46 | | chart_property_page_scales | on | | | 47 | | chart_property_page_background | on | | | 48 | | chart_property_page_timezone_sessions | on | | | 49 | | chart_property_page_trading | on | | This feature is for the Trading Terminal only | 50 | | countdown | on | 1.4 | Displays a countdown label on a price scale | 51 | | caption_buttons_text_if_possible | off | 1.4 | Shows text instead of icons on the Indicators and Compare buttons in the header when possible| 52 | | dont_show_boolean_study_arguments | off | 1.4 | Hides true/false study arguments | 53 | | hide_last_na_study_output | off | 1.4 | Hides last n/a study output data | 54 | | symbol_info | on | 1.5 | Enables the symbol info dialog | 55 | | timezone_menu | on | 1.5 | Disables timezone context menu | 56 | | snapshot_trading_drawings | off | 1.6 | Includes orders/positions/executions in the screenshot | 57 | | source_selection_markers | on | 1.11 | Disables selection markers for series and indicators | 58 | | go_to_date | on | 1.11 | Allows you to jump to a particular bar using 'Go to' dialog | 59 | | adaptive_logo | on | 1.11 | Allows you to hide 'charts by TradingView' text on small-screen devices | 60 | | show_dom_first_time | off | 1.12 | Shows DOM panel when a user opens the Chart for the first time | 61 | | hide_left_toolbar_by_default | off | 1.12 | Hides left toolbar when a user opens the Chart for the first time | 62 | 63 | ### Elements placement 64 | 65 | | ID | Default State | Library Version | Description | 66 | |------------------------------|---------------|-----------------|--------------------------------------------------------------------| 67 | | move_logo_to_main_pane | off | | Places the logo on the main series pane instead of the bottom pane | 68 | 69 | ### Behavior 70 | 71 | | ID | Default State | Library Version | Description 72 | |-------|---------------|-----------------|------------ 73 | | **use_localstorage_for_settings** | on | | Allows storing all properties (including favorites) to the localstorage 74 | | - items_favoriting | on | | Disabling this feature hides all "Favorite this item" buttons 75 | | - save_chart_properties_to_local_storage | on | | Can be disabled to forbid storing chart properties to the localstorage while allowing to save other properties. The other properties are favorites in the Charting Library and Watchlist symbols and some panels states in the Trading Terminal. 76 | | create_volume_indicator_by_default | on | | 77 | | create_volume_indicator_by_default_once | on | | 78 | | volume_force_overlay | on | | Places Volume indicator on the same pane with the main series 79 | | right_bar_stays_on_scroll | on | | Determines the behavior of Zoom feature: bar under the mouse cursor stays in the same place if this feature is disabled 80 | | constraint_dialogs_movement | on | | Keeps the dialogs within the chart 81 | | charting_library_debug_mode | off | | Enables logs 82 | | show_dialog_on_snapshot_ready | on | | Disabling this feature allows you to make a snapshot silently 83 | | study_market_minimized | on | | Relates to Indicators dialog and determines whether it is compact or contains a search bar along with the categories 84 | | study_dialog_search_control | on | 1.6 | Displays the search control in the indicators dialog 85 | | side_toolbar_in_fullscreen_mode | off | | This enables Drawings Toolbar in the fullscreen mode 86 | | same_data_requery | off | | Allows you to call `setSymbol` with the same symbol to refresh the data 87 | | disable_resolution_rebuild | off | | Shows bar time exactly as provided by the data feed with no adjustments. 88 | | chart_scroll | on | 1.10 | Allows chart scrolling 89 | | chart_zoom | on | 1.10 | Allows chart zooming 90 | | high_density_bars | off | 1.11 | Allows zooming out to show more than 60000 bars on a single screen 91 | | cl_feed_return_all_data | off | 1.11 | Allows you to return more bars from the data feed than requested and displays it on a chart simultaneously 92 | | uppercase_instrument_names | on | 1.12 | Disabling this feature allows a user to enter case-sensitive symbols 93 | 94 | ### "Important features" 95 | 96 | | ID | Default State | Library Version | Description 97 | |-------|---------------|-----------------|------------ 98 | | study_templates | off | | 99 | | datasource_copypaste | on | | Enables copying of drawings and studies 100 | | seconds_resolution| off | 1.4 | Enables the support of resolutions that start from 1 second 101 | 102 | ## :chart: Trading Terminal 103 | 104 | | ID | Default State | Terminal Version | Description 105 | |-------|---------------|------------------|------------ 106 | | support_multicharts | on | | Enables context menu actions (Clone, Sync) related to Multiple Chart Layout 107 | | header_layouttoggle | on | | Shows the Select Layout button in the header 108 | | show_logo_on_all_charts | off | |Shows the logo on every single chart of the multichart layout 109 | | chart_crosshair_menu | on | 1.7 |Enables the "plus" button on the price scale for quick trading 110 | | add_to_watchlist | on | 1.9 | Enables "Add symbol to Watchlist" item in the menu 111 | | footer_screenshot | on | 1.11 | Shows a screenshot button in the footer (Account Manager) 112 | | open_account_manager | on | 1.11 | Keeps the Account Manager opened by default 113 | | trading_notifications | on | 1.11 | Shows trading notifications on the chart 114 | | multiple_watchlists | on | 1.12 | Enables creating of multiple watchlists 115 | | show_trading_notifications_history | on | 1.13 | Enables the Notifications Log tab in the bottom panel 116 | -------------------------------------------------------------------------------- /UDF.md: -------------------------------------------------------------------------------- 1 | **What is UDF?** It's an HTTP-based protocol that is designed to deliver data to the Charting Library in a simple and efficient way. 2 | 3 | **How can I start using it?** You should create a tiny server-side HTTP service that will get the data from your storage and respond to Charting Library requests. 4 | 5 | ## Response-as-a-table concept 6 | 7 | Think of data feed responses as tables. For example, a data feed response that includes a symbol list from the exchange may be treated as a table where each symbol represents a row, along with some columns (minimal_price_movement, description, has_intraday e.t.c.). 8 | Each column may be an array (it will provide a separate value for each row in a table). 9 | Note that there might be a situation when all rows have the same value in the same column. 10 | In this case, the column value can be defined as a single value in JSON response. 11 | 12 | Example: 13 | 14 | Let's assume that we requested a symbol list from the New York Stock Exchange. The response (in pseudo-format) might look like 15 | 16 | ```javascript 17 | { 18 | symbols: ["MSFT", "AAPL", "FB", "GOOG"], 19 | min_price_move: 0.1, 20 | description: ["Microsoft corp.", "Apple Inc", "Facebook", "Google"] 21 | } 22 | ``` 23 | 24 | Here is how this response will look like in a table format. 25 | 26 | Symbol|min_price_move|Description 27 | ---|---|--- 28 | MSFT|0.1|Microsoft corp. 29 | AAPL|0.1|Apple Inc 30 | FB|0.1|Facebook 31 | GOOG|0.1|Google 32 | 33 | ## API Calls 34 | 35 | ### Data feed configuration data 36 | 37 | Request: `GET /config` 38 | 39 | Response: Library expects to receive a JSON response of the same structure as a result of JS API [setup() call](JS-Api#onreadycallback). 40 | 41 | Also there should be 2 additional properties: 42 | 43 | * `supports_search`: Set it to `true` if your data feed supports symbol search and individual symbol resolve logic. 44 | * `supports_group_request`: Set it to `true` if your data feed provides full information on symbol group only and is not able to perform symbol search or individual symbol resolve. 45 | 46 | Either `supports_search` or `supports_group_request` should be set to `true`. 47 | 48 | **Remark**: If your data feed doesn't implement this call (doesn't respond or sends 404 error) then the default configuration is being used. Here is the default configuration: 49 | 50 | ```javascript 51 | { 52 | supported_resolutions: ['1', '5', '15', '30', '60', '1D', '1W', '1M'], 53 | supports_group_request: true, 54 | supports_marks: false, 55 | supports_search: false, 56 | supports_timescale_marks: false, 57 | } 58 | ``` 59 | 60 | ### Symbol group request 61 | 62 | Request: `GET /symbol_info?group=` 63 | 64 | 1. `group_name`: string 65 | 66 | Example: `GET /symbol_info?group=NYSE` 67 | 68 | Response: Response is expected to be an object with properties listed below. 69 | Each property is treated as table column, as described above (see [response-as-a-table](UDF#response-as-a-table-concept)). 70 | The response structure is similar (but **not equal**) to [SymbolInfo](Symbology#symbolinfo-structure) so please read the description to learn about the details of each field. 71 | 72 | * `symbol` 73 | * `description` 74 | * `exchange-listed` / `exchange-traded` 75 | * `minmovement` / `minmov` (NOTE: `minmov` is deprecated and will be removed in future releases) 76 | * `minmovement2` / `minmov2` (NOTE: `minmov2` is deprecated and will be removed in future releases) 77 | * `fractional` 78 | * `pricescale` 79 | * `has-intraday` 80 | * `has-no-volume` 81 | * `type` 82 | * `ticker` 83 | * `timezone` 84 | * `session-regular` (mapped to `SymbolInfo.session`) 85 | * `supported-resolutions` 86 | * `force-session-rebuild` 87 | * `has-daily` 88 | * `intraday-multipliers` 89 | * `volume_precision` 90 | * `has-weekly-and-monthly` 91 | * `has-empty-bars` 92 | 93 | Here is an example of data feed response to `GET /symbol_info?group=NYSE` request: 94 | 95 | ```javascript 96 | { 97 | symbol: ["AAPL", "MSFT", "SPX"], 98 | description: ["Apple Inc", "Microsoft corp", "S&P 500 index"], 99 | exchange-listed: "NYSE", 100 | exchange-traded: "NYSE", 101 | minmovement: 1, 102 | minmovement2: 0, 103 | pricescale: [1, 1, 100], 104 | has-dwm: true, 105 | has-intraday: true, 106 | has-no-volume: [false, false, true] 107 | type: ["stock", "stock", "index"], 108 | ticker: ["AAPL~0", "MSFT~0", "$SPX500"], 109 | timezone: “America/New_York”, 110 | session-regular: “0900-1600”, 111 | } 112 | ``` 113 | 114 | **Remark 1**: This call will be used if your data feed sent `supports_group_request: true` in the configuration data or didn't respond to the configuration request at all. 115 | 116 | **Remark 2**: In the event that your data feed does not support the requested symbol group (which should not happen if your response to request #1 (supported groups) is correct) you may expect a 404 error. 117 | 118 | **Remark 3**: When using this mode of receiving data (getting large amount of symbol data) your browser will keep the data that wasn't even requested by the user. 119 | If your symbol list has more than a few items, please consider supporting symbol search / individual symbol resolve instead. 120 | 121 | ### Symbol resolve 122 | 123 | Request: `GET /symbols?symbol=` 124 | 125 | 1. `symbol`: string. Symbol name or ticker. 126 | 127 | Example: `GET /symbols?symbol=AAL`, `GET /symbols?symbol=NYSE:MSFT` 128 | 129 | A JSON response of the same structure as [SymbolInfo](Symbology#symbolinfo-structure) 130 | 131 | **Remark**: This call will be requested if your data feed sent `supports_group_request: false` and `supports_search: true` in the configuration data. 132 | 133 | ### Symbol search 134 | 135 | Request: `GET /search?query=&type=&exchange=&limit=` 136 | 137 | * `query`: string. Text typed by the user in the Symbol Search edit box 138 | * `type`: string. One of the symbol types [supported](JS-Api#symbols_types) by your back-end 139 | * `exchange`: string. One of the exchanges [supported](JS-Api#exchanges) by your back-end 140 | * `limit`: integer. The maximum number of symbols in a response 141 | 142 | Example: `GET /search?query=AA&type=stock&exchange=NYSE&limit=15` 143 | 144 | A response is expected to be an array of symbol objects as in [respective JS API call](JS-Api#searchsymbolsuserinput-exchange-symboltype-onresultreadycallback) 145 | 146 | **Remark**: This call will be requested if your data feed sent `supports_group_request: false` and `supports_search: true` in the configuration data. 147 | 148 | ### Bars 149 | 150 | Request: `GET /history?symbol=&from=&to=&resolution=` 151 | 152 | * `symbol`: symbol name or ticker. 153 | * `from`: unix timestamp (UTC) of leftmost required bar 154 | * `to`: unix timestamp (UTC) of rightmost required bar 155 | * `resolution`: string 156 | 157 | Example: `GET /history?symbol=BEAM~0&resolution=D&from=1386493512&to=1395133512` 158 | 159 | A response is expected to be an object with some properties listed below. Each property is treated as a table column, as described above. 160 | 161 | * `s`: status code. Expected values: `ok` | `error` | `no_data` 162 | * `errmsg`: Error message. Should be present only when `s = 'error'` 163 | * `t`: Bar time. Unix timestamp (UTC) 164 | * `c`: Closing price 165 | * `o`: Opening price (optional) 166 | * `h`: High price (optional) 167 | * `l`: Low price (optional) 168 | * `v`: Volume (optional) 169 | * `nextTime`: Time of the next bar if there is no data (status code is `no_data`) in the requested period (optional) 170 | 171 | **Remark**: Bar time for daily bars should be 00:00 UTC and is expected to be a trading day (not a day when the session starts). 172 | Charting Library aligns the time according to the [Session](Symbology#session) from SymbolInfo. 173 | 174 | **Remark**: Bar time for monthly bars should be 00:00 UTC and is the first trading day of the month. 175 | 176 | **Remark**: Prices should be passed as numbers and not as strings in quotation marks. 177 | 178 | Example: 179 | 180 | ```javascript 181 | { 182 | s: "ok", 183 | t: [1386493512, 1386493572, 1386493632, 1386493692], 184 | c: [42.1, 43.4, 44.3, 42.8] 185 | } 186 | ``` 187 | 188 | ```javascript 189 | { 190 | s: "no_data", 191 | nextTime: 1386493512 192 | } 193 | ``` 194 | 195 | ```javascript 196 | { 197 | s: "ok", 198 | t: [1386493512, 1386493572, 1386493632, 1386493692], 199 | c: [42.1, 43.4, 44.3, 42.8], 200 | o: [41.0, 42.9, 43.7, 44.5], 201 | h: [43.0, 44.1, 44.8, 44.5], 202 | l: [40.4, 42.1, 42.8, 42.3], 203 | v: [12000, 18500, 24000, 45000] 204 | } 205 | ``` 206 | 207 | #### How `nextTime` works 208 | 209 | Let's assume that a user opened the chart where `resolution = 1` and the Library requests the following range of data from the data feed `[3 Apr 2015 16:00 UTC+0, 3 Apr 2015 19:00 UTC+0]` for a stock that is traded on the NYSE. 210 | April 3rd was Good Friday which means that the markets were closed. 211 | Library expects the following response from the data feed. 212 | 213 | ```javascript 214 | { 215 | s: "no_data", 216 | nextTime: 1428001140000 // 2 Apr 2015 18:59:00 GMT+0 217 | } 218 | ``` 219 | 220 | `nextTime` is the time of the closest available bar in the past. 221 | 222 | ### Marks 223 | 224 | Request: `GET /marks?symbol=&from=&to=&resolution=` 225 | 226 | * `symbol`: symbol name or ticker. 227 | * `from`: unix timestamp (UTC) of leftmost visible bar 228 | * `to`: unix timestamp (UTC) of rightmost visible bar 229 | * `resolution`: string 230 | 231 | A response is expected to be an object with some properties listed below. 232 | This object is similar to [respective response](JS-Api#getmarkssymbolinfo-from-to-ondatacallback-resolution) in JS API, but each property is treated as a table column, as described above. 233 | 234 | ```javascript 235 | { 236 | id: [array of ids], 237 | time: [array of times], 238 | color: [array of colors], 239 | text: [array of texts], 240 | label: [array of labels], 241 | labelFontColor: [array of label font colors], 242 | minSize: [array of minSizes], 243 | } 244 | ``` 245 | 246 | **Remark**: This call will be requested if your data feed sent `supports_marks: true` in the configuration data. 247 | 248 | ### Timescale marks 249 | 250 | Request: `GET /timescale_marks?symbol=&from=&to=&resolution=` 251 | 252 | * `symbol`: symbol name or ticker. 253 | * `from`: unix timestamp (UTC) or leftmost visible bar 254 | * `to`: unix timestamp (UTC) or rightmost visible bar 255 | * `resolution`: string 256 | 257 | A response is expected to be an array of objects with properties listed below. 258 | 259 | * `id`: unique identifier of a mark 260 | * `color`: rgba color 261 | * `label`: a letter to be displayed in a circle 262 | * `time`: unix time 263 | * `tooltip`: tooltip text 264 | 265 | **Remark**: This call will be requested if your data feed sent `supports_timescale_marks: true` in the configuration data. 266 | 267 | ### Server time 268 | 269 | Request: `GET /time` 270 | 271 | Response: Numeric unix time without milliseconds. 272 | 273 | Example: `1445324591` 274 | 275 | ### Quotes 276 | 277 | Request: `GET /quotes?symbols=,,...,` 278 | 279 | Example: `GET /quotes?symbols=NYSE%3AAA%2CNYSE%3AF%2CNasdaqNM%3AAAPL` 280 | 281 | A response is an object with the following keys. 282 | 283 | * `s`: Status code for the request. Expected values are: `ok` or `error` 284 | * `errmsg`: Error message. Should be present only when `s = 'error'` 285 | * `d`: [symbols data](Quotes) Array 286 | 287 | Example: 288 | 289 | ```json 290 | { 291 | "s": "ok", 292 | "d": [ 293 | { 294 | "s": "ok", 295 | "n": "NYSE:AA", 296 | "v": { 297 | "ch": "+0.16", 298 | "chp": "0.98", 299 | "short_name": "AA", 300 | "exchange": "NYSE", 301 | "description": "Alcoa Inc. Common", 302 | "lp": "16.57", 303 | "ask": "16.58", 304 | "bid": "16.57", 305 | "open_price": "16.25", 306 | "high_price": "16.60", 307 | "low_price": "16.25", 308 | "prev_close_price": "16.41", 309 | "volume": "4029041" 310 | } 311 | }, 312 | { 313 | "s": "ok", 314 | "n": "NYSE:F", 315 | "v": { 316 | "ch": "+0.15", 317 | "chp": "0.89", 318 | "short_name": "F", 319 | "exchange": "NYSE", 320 | "description": "Ford Motor Company", 321 | "lp": "17.02", 322 | "ask": "17.03", 323 | "bid": "17.02", 324 | "open_price": "16.74", 325 | "high_price": "17.08", 326 | "low_price": "16.74", 327 | "prev_close_price": "16.87", 328 | "volume": "7713782" 329 | } 330 | } 331 | ] 332 | } 333 | ``` 334 | 335 | ## Constructor 336 | 337 | `Datafeeds.UDFCompatibleDatafeed = function(datafeedURL, updateFrequency)` 338 | 339 | ### datafeedURL 340 | 341 | This is a URL of a data server that will receive requests and return data. 342 | 343 | ### updateFrequency 344 | 345 | This is a frequency of requests that the data feed will send to the server in milliseconds. Default is 10000 (10 sec). 346 | -------------------------------------------------------------------------------- /JS-Api.md: -------------------------------------------------------------------------------- 1 | **What is JS API?**: A set of JS methods (specific public interface). 2 | 3 | **Which steps should I follow to start using it?**: You should create a JS object that will receive data by some way and respond to Charting Library requests. 4 | 5 | Data caching (history & symbol info) is implemented in the Charting Library. 6 | 7 | When you create an object that implements the described interface simply pass it to Library widget constructor through [`datafeed` argument](Widget-Constructor#datafeed). 8 | 9 | ## Methods 10 | 11 | 1. [onReady](#onreadycallback) 12 | 1. [searchSymbols](#searchsymbolsuserinput-exchange-symboltype-onresultreadycallback) 13 | 1. [resolveSymbol](#resolvesymbolsymbolname-onsymbolresolvedcallback-onresolveerrorcallback) 14 | 1. [getBars](#getbarssymbolinfo-resolution-from-to-onhistorycallback-onerrorcallback-firstdatarequest) 15 | 1. [subscribeBars](#subscribebarssymbolinfo-resolution-onrealtimecallback-subscriberuid-onresetcacheneededcallback) 16 | 1. [unsubscribeBars](#unsubscribebarssubscriberuid) 17 | 1. [calculateHistoryDepth](#calculatehistorydepthresolution-resolutionback-intervalback) 18 | 1. [getMarks](#getmarkssymbolinfo-from-to-ondatacallback-resolution) 19 | 1. [getTimescaleMarks](#gettimescalemarkssymbolinfo-from-to-ondatacallback-resolution) 20 | 1. [getServerTime](#getservertimecallback) 21 | 22 | :chart: [Trading Terminal](Trading-Terminal) specific: 23 | 24 | 1. [getQuotes](#getquotessymbols-ondatacallback-onerrorcallback) 25 | 1. [subscribeQuotes](#subscribequotessymbols-fastsymbols-onrealtimecallback-listenerguid) 26 | 1. [unsubscribeQuotes](#unsubscribequoteslistenerguid) 27 | 1. [subscribeDepth](#subscribedepthsymbolinfo-callback-string) 28 | 1. [unsubscribeDepth](#unsubscribedepthsubscriberuid) 29 | 30 | ### onReady(callback) 31 | 32 | 1. `callback`: function(configurationData) 33 | 1. `configurationData`: object (see below) 34 | 35 | This call is intended to provide the object filled with the configuration data. 36 | This data partially affects the chart behavior and is called [server-side customization](Customization-Overview#customization-done-through-data-stream). 37 | Charting Library assumes that you will call the callback function and pass your datafeed `configurationData` as an argument. 38 | Configuration data is an object; for now, the following properties are supported: 39 | 40 | #### exchanges 41 | 42 | An array of exchange descriptors. Exchange descriptor is an object `{value, name, desc}`. `value` will be passed as `exchange` argument to [searchSymbols](#searchsymbolsuserinput-exchange-symboltype-onresultreadycallback). 43 | 44 | `exchanges = []` leads to the absence of the exchanges filter in Symbol Search list. Use `value = ""` if you wish to include all exchanges. 45 | 46 | #### symbols_types 47 | 48 | An array of filter descriptors. Filter descriptor is an object `{name, value}`. `value` will be passed as `symbolType` argument to [searchSymbols](#searchsymbolsuserinput-exchange-symboltype-onresultreadycallback). 49 | 50 | `symbolsTypes = []` leads to the absence of filter types in Symbol Search list. Use `value = ""` if you wish to include all filter types. 51 | 52 | #### supported_resolutions 53 | 54 | An array of supported resolutions. Resolution must be a string. Format is described in another [article](Resolution). 55 | 56 | `supported_resolutions = undefined` or `supported_resolutions = []` leads to resolution widget including the default content. 57 | 58 | Example: `["1", "15", "240", "D", "6M"]` will give you "1 minute, 15 minutes, 4 hours, 1 day, 6 months" in resolution widget. 59 | 60 | #### supports_marks 61 | 62 | Boolean showing whether your datafeed supports marks on bars or not. 63 | 64 | #### supports_timescale_marks 65 | 66 | Boolean showing whether your datafeed supports timescale marks or not. 67 | 68 | #### supports_time 69 | 70 | Set this one to `true` if your datafeed provides server time (unix time). It is used to adjust Countdown on the Price scale. 71 | 72 | #### futures_regex 73 | 74 | Set it if you want to group futures in the symbol search. This REGEX should divide an instrument name into 2 parts: a root and an expiration. 75 | 76 | Sample regex: : `/^(.+)([12]!|[FGHJKMNQUVXZ]\d{1,2})$/`. It will be applied to the instruments with `futures` as a `type`. 77 | 78 | ### searchSymbols(userInput, exchange, symbolType, onResultReadyCallback) 79 | 80 | 1. `userInput`: string. It is text entered by user in the symbol search field. 81 | 1. `exchange`: string. The requested exchange (chosen by user). Empty value means no filter was specified. 82 | 1. `symbolType`: string. The requested symbol type: `index`, `stock`, `forex`, etc (chosen by user). 83 | Empty value means no filter was specified. 84 | 1. `onResultReadyCallback`: function(result) 85 | 1. `result`: array (see below) 86 | 87 | This call is intended to provide the list of symbols that match the user's search query. `result` is expected to look like the following: 88 | 89 | ```javascript 90 | [ 91 | { 92 | "symbol": "", 93 | "full_name": "", // e.g. BTCE:BTCUSD 94 | "description": "", 95 | "exchange": "", 96 | "ticker": "", 97 | "type": "stock" // or "futures" or "bitcoin" or "forex" or "index" 98 | }, 99 | { 100 | // ..... 101 | } 102 | ] 103 | ``` 104 | 105 | If no symbols are found, then callback should be called with an empty array. See more details about `ticker` value [here](Symbology#ticker) 106 | 107 | ### resolveSymbol(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) 108 | 109 | 1. `symbolName`: string. Symbol name or `ticker` if provided. 110 | 1. `onSymbolResolvedCallback`: function([SymbolInfo](Symbology#symbolinfo-structure)) 111 | 1. `onResolveErrorCallback`: function(reason) 112 | 113 | Charting Library will call this function when it needs to get [SymbolInfo](Symbology#symbolinfo-structure) by symbol name. 114 | 115 | ### getBars(symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback, firstDataRequest) 116 | 117 | 1. `symbolInfo`: [SymbolInfo](Symbology#symbolinfo-structure) object 118 | 1. `resolution`: string 119 | 1. `from`: unix timestamp, leftmost required bar time 120 | 1. `to`: unix timestamp, rightmost required bar time 121 | 1. `onHistoryCallback`: function(array of `bar`s, `meta` = `{ noData = false }`) 122 | 1. `bar`: object `{time, close, open, high, low, volume}` 123 | 1. `meta`: object `{noData = true | false, nextTime - unix time}` 124 | 1. `onErrorCallback`: function(reason) 125 | 1. `firstDataRequest`: boolean to identify the first call of this method for the particular symbol resolution. 126 | When it is set to `true` you can ignore `to` (which depends on browser's `Date.now()`) and return bars up to the latest bar. 127 | 128 | This function is called when the chart needs a history fragment defined by dates range. 129 | 130 | The charting library assumes `onHistoryCallback` to be called **just once**. 131 | 132 | **Important**: `nextTime` is a time of the next bar in the history. It should be set if the requested period represents a gap in the data. Hence there is available data prior to the requested period. 133 | 134 | **Important**: `noData` should be set if there is no data in the requested period. 135 | 136 | **Remark**: `bar.time` is expected to be the amount of milliseconds since Unix epoch start in **UTC** timezone. 137 | 138 | **Remark**: `bar.time` for daily bars is expected to be a trading day (not session start day) at 00:00 UTC. 139 | Charting Library adjusts time according to [Session](Symbology#session) from SymbolInfo 140 | 141 | **Remark**: `bar.time` for monthly bars is the first trading day of the month without the time part 142 | 143 | ### subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) 144 | 145 | 1. `symbolInfo`: [SymbolInfo](Symbology#symbolinfo-structure) object 146 | 1. `resolution`: string 147 | 1. `onRealtimeCallback`: function(bar) 148 | 1. `bar`: object `{time, close, open, high, low, volume}` 149 | 1. `subscriberUID`: object 150 | 1. `onResetCacheNeededCallback` *(since version 1.7)*: function() to be executed when bar data has changed 151 | 152 | Charting Library calls this function when it wants to receive real-time updates for a symbol. The Library assumes that you will call `onRealtimeCallback` every time you want to update the most recent bar or to add a new one. 153 | 154 | **Remark**: When you call `onRealtimeCallback` with bar having time equal to the most recent bar's time then the entire last bar is replaced with the `bar` object you've passed into the call. 155 | 156 | Example: 157 | 158 | 1. The most recent bar is `{1419411578413, 10, 12, 9, 11}` 159 | 1. You call `onRealtimeCallback({1419411578413, 10, 14, 9, 14})` 160 | 1. Library finds out that the bar with the time `1419411578413` already exists and is the most recent one 161 | 1. Library replaces the entire bar making the most recent bar `{1419411578413, 10, 14, 9, 14}` 162 | 163 | **Remark 2**: Is it possible either to update the most recent bar or to add a new one with `onRealtimeCallback`. 164 | You'll get an error if you call this function when trying to update a historical bar. 165 | 166 | **Remark 3**: There is no way to change historical bars once they've been received by the chart currently. 167 | 168 | ### unsubscribeBars(subscriberUID) 169 | 170 | 1. `subscriberUID`: object 171 | 172 | Charting Library calls this function when it doesn't want to receive updates for this subscriber any more. `subscriberUID` will be the same object that Library passed to `subscribeBars` before. 173 | 174 | ### calculateHistoryDepth(resolution, resolutionBack, intervalBack) 175 | 176 | *Optional.* 177 | 178 | 1. `resolution`: requested symbol resolution 179 | 1. `resolutionBack`: time period types. Supported values are: `D` | `M` 180 | 1. `intervalBack`: amount of `resolutionBack` periods that the Charting Library is going to request 181 | 182 | Charting Library calls this function when it is going to request some historical data to give you an ability to override the amount of bars requested. 183 | 184 | It passes some arguments so that you are aware of the amount of bars it's going to get. Here are some examples: 185 | 186 | * `calculateHistoryDepth("D", "M", 12)` called: the Library is going to request 12 months of daily bars 187 | * `calculateHistoryDepth("60", "D", 15)` called: the Library is going to request 15 days of hourly bars 188 | 189 | This function should return `undefined` if you do not wish to override anything. 190 | If you do, it should return an object `{resolutionBack, intervalBack}`. 191 | 192 | Example: 193 | 194 | Let's assume that the implementation is as follows 195 | 196 | ```javascript 197 | Datafeed.prototype.calculateHistoryDepth = function(resolution, resolutionBack, intervalBack) { 198 | if (resolution === "1D") { 199 | return { 200 | resolutionBack: 'M', 201 | intervalBack: 6 202 | }; 203 | } 204 | } 205 | ``` 206 | 207 | When the Charting Library requests the data for `1D` resolution, the history will be 6 months deep. 208 | In all other cases the history depth will have the default value. 209 | 210 | ### getMarks(symbolInfo, from, to, onDataCallback, resolution) 211 | 212 | *Optional.* 213 | 214 | 1. `symbolInfo`: [SymbolInfo](Symbology#symbolinfo-structure) object 215 | 1. `from`: unix timestamp (UTC). Leftmost visible bar's time. 216 | 1. `to`: unix timestamp (UTC). Rightmost visible bar's time. 217 | 1. `onDataCallback`: function(array of `mark`s) 218 | 1. `resolution`: string 219 | 220 | The Library calls this function to get [marks](Marks-On-Bars) for visible bars range. 221 | 222 | The Library assumes that you will call `onDataCallback` only once per `getMarks` call. 223 | 224 | `mark` is an object that has the following properties: 225 | 226 | * `id`: unique mark ID. It will be passed to a [respective callback](Widget-Methods#subscribeevent-callback) when user clicks on a mark 227 | * `time`: unix time, UTC 228 | * `color`: `red` | `green` | `blue` | `yellow` | `{ border: '#ff0000', background: '#00ff00' }` 229 | * `text`: mark popup text. HTML supported 230 | * `label`: a letter to be printed on a mark. Single character 231 | * `labelFontColor`: color of a letter on a mark 232 | * `minSize`: minimum mark size (diameter, pixels) (default value is `5`) 233 | 234 | A few marks per bar are allowed (for now, the maximum is `10`). Marks outside of the bars are not allowed. 235 | 236 | **Remark**: This function will be called only if you confirmed that your back-end is [supporting marks](#supports_marks). 237 | 238 | ### getTimescaleMarks(symbolInfo, from, to, onDataCallback, resolution) 239 | 240 | *Optional.* 241 | 242 | 1. `symbolInfo`: [SymbolInfo](Symbology#symbolinfo-structure) object 243 | 1. `from`: unix timestamp (UTC). Leftmost visible bar's time. 244 | 1. `to`: unix timestamp (UTC). Rightmost visible bar's time. 245 | 1. `onDataCallback`: function(array of `mark`s) 246 | 1. `resolution`: string 247 | 248 | The Library calls this function to get timescale marks for visible bars range. 249 | 250 | The Library assumes that you will call `onDataCallback` only once per `getTimescaleMarks` call. 251 | 252 | `mark` is an object that has the following properties: 253 | 254 | * `id`: unique mark ID. Will be passed to a [respective callback](Widget-Methods#subscribeevent-callback) when user clicks on a mark 255 | * `time`: unix time, UTC 256 | * `color`: `red` | `green` | `blue` | `yellow` | ... | `#000000` 257 | * `label`: a letter to be printed on a mark. Single character 258 | * `tooltip`: array of text strings. Each element of the array is a new text line of a tooltip. 259 | 260 | Only one mark per bar is allowed. Marks outside of the bars are not allowed. 261 | 262 | **Remark**: This function will be called only if you confirmed that your back-end is [supporting marks](#supports_timescale_marks). 263 | 264 | ### getServerTime(callback) 265 | 266 | 1. `callback`: function(unixTime) 267 | 268 | This function is called if the configuration flag `supports_time` is set to `true` when the Charting Library needs to know the server time. 269 | 270 | The Charting Library assumes that the callback is called once. 271 | 272 | The time is provided without milliseconds. 273 | 274 | It is used to display Countdown on the price scale. 275 | 276 | Example: `1445324591`. 277 | 278 | ## [Trading Terminal](Trading-Terminal) specific 279 | 280 | ### getQuotes(symbols, onDataCallback, onErrorCallback) 281 | 282 | :chart: *[Trading Terminal](Trading-Terminal) specific.* 283 | 284 | 1. `symbols`: array of symbols names 285 | 1. `onDataCallback`: function(array of `data`) 286 | 1. `data`: [symbol quote data](Quotes#symbol-quote-data) 287 | 1. `onErrorCallback`: function(reason) 288 | 289 | This function is called when the Charting Library needs quote data. The charting library assumes that `onDataCallback` is called once when all the requested data is received. 290 | 291 | ### subscribeQuotes(symbols, fastSymbols, onRealtimeCallback, listenerGUID) 292 | 293 | :chart: *[Trading Terminal](Trading-Terminal) specific.* 294 | 295 | 1. `symbols`: array of symbols that should be updated rarely (once per minute). These symbols are included in the watchlist but they are not visible at the moment. 296 | 1. `fastSymbols`: array of symbols that should be updated frequently (once every 10 seconds or more often) 297 | 1. `onRealtimeCallback`: function(array of `data`) 298 | 1. `data`: [symbol quote data](Quotes#symbol-quote-data) 299 | 1. `listenerGUID`: unique identifier of the listener 300 | 301 | Trading Terminal calls this function when it wants to receive real-time quotes for a symbol. 302 | 303 | The Charting Library assumes that you will call `onRealtimeCallback` every time you want to update the quotes. 304 | 305 | ### unsubscribeQuotes(listenerGUID) 306 | 307 | :chart: *[Trading Terminal](Trading-Terminal) specific.* 308 | 309 | 1. `listenerGUID`: unique identifier of the listener 310 | 311 | Trading Terminal calls this function when it doesn't want to receive updates for this listener anymore. 312 | 313 | `listenerGUID` will be the same object that the Library passed to `subscribeQuotes` before. 314 | 315 | ### subscribeDepth(symbolInfo, callback): string 316 | 317 | :chart: *[Trading Terminal](Trading-Terminal) specific.* 318 | 319 | 1. `symbolInfo`: [SymbolInfo](Symbology#symbolinfo-structure) object 320 | 1. `callback`: function(depth) 321 | 1. `depth`: object `{snapshot, asks, bids}` 322 | * `snapshot`: Boolean - if `true` `asks` and `bids` have full set of depth, otherwise they contain only updated levels. 323 | * `asks`: Array of `{price, volume}` 324 | * `bids`: Array of `{price, volume}` 325 | 326 | Trading Terminal calls this function when it wants to receive real-time level 2 (DOM) for a symbol. The Charting Library assumes that you will call the `callback` every time you want to update DOM data. 327 | 328 | This method should return a unique identifier (`subscriberUID`) that will be used to unsubscribe from the data. 329 | 330 | ### unsubscribeDepth(subscriberUID) 331 | 332 | :chart: *[Trading Terminal](Trading-Terminal) specific.* 333 | 334 | 1. `subscriberUID`: String 335 | 336 | Trading Terminal calls this function when it doesn't want to receive updates for this listener anymore. 337 | 338 | `subscriberUID` will be the same object that was returned from `subscribeDepth`. 339 | -------------------------------------------------------------------------------- /Widget-Constructor.md: -------------------------------------------------------------------------------- 1 | You may specify Charting library widget parameters when calling its constructor. Here is an example of a call. 2 | 3 | ```javascript 4 | new TradingView.widget({ 5 | symbol: 'A', 6 | interval: 'D', 7 | timezone: "America/New_York", 8 | container_id: "tv_chart_container", 9 | locale: "ru", 10 | datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com") 11 | }); 12 | ``` 13 | 14 | Below is a complete list of supported parameters. Note that you can't change the parameters once the Charting Library is created. Use [Widget methods](Widget-Methods) if you wish to modify the parameters after the creation of the Charting Library. 15 | 16 | ### symbol, interval 17 | 18 | The default symbol & time interval of your chart. The `interval` value is described in the [Section](Resolution). *Mandatory* 19 | 20 | ### timeframe 21 | 22 | Sets the default timeframe of the chart. Timeframe is a period of bars that will be loaded and shown on the screen. 23 | Valid timeframe is a number with a letter D for days and M for months. 24 | 25 | ### container_id 26 | 27 | `id` is an attribute of a DOM element that you wish to include in the widget. *Mandatory* 28 | 29 | ### datafeed 30 | 31 | JavaScript object that implements the ([JS API](JS-Api)) interface to supply the chart with data. *Mandatory* 32 | 33 | ### timezone 34 | 35 | Default timezone of the chart. The time on the timescale is displayed according to this timezone. 36 | See the [list of supported timezones](Symbology#timezone) for available values. Set it to `exchange` to use the exchange timezone. Use the [overrides](#overrides) section if you wish to override the default value. 37 | 38 | ### debug 39 | 40 | Setting this property to `true` will make the chart write detailed API logs into the browser console. Alternatively, you can use the `charting_library_debug_mode` featureset to enable it. 41 | 42 | ### library_path 43 | 44 | A path to a `static` folder. 45 | 46 | ### width, height 47 | 48 | The desired size of a widget. Please make sure that there is enough space for the widget to be displayed correctly. 49 | 50 | **Remark**: If you want the chart to use all the available space use the `fullscreen` parameter instead of setting it to '100%'. 51 | 52 | ### fullscreen 53 | 54 | *Default:* `false` 55 | 56 | Boolean value showing whether the chart should use all the available space in the window. 57 | 58 | ### autosize 59 | 60 | *Default:* `false` 61 | 62 | Boolean value showing whether the chart should use all the available space in the container and resize when the container itself is resized. 63 | 64 | ### symbol_search_request_delay 65 | 66 | A threshold delay in milliseconds that is used to reduce the number of symbol search requests when the user is typing a name of a symbol in the search box. 67 | 68 | ### auto_save_delay 69 | 70 | A threshold delay in seconds that is used to reduce the number of `onAutoSaveNeeded` calls. 71 | 72 | ### toolbar_bg 73 | 74 | Background color of the toolbars. 75 | 76 | ### study_count_limit 77 | 78 | *Starting from version 1.5.* 79 | 80 | Maximum amount of studies on the chart of a multichart layout. Minimum value is 2. 81 | 82 | ### studies_access 83 | 84 | *Starting from version 1.1.* 85 | 86 | An object with the following structure: 87 | 88 | ```javascript 89 | { 90 | type: "black" | "white", 91 | tools: [ 92 | { 93 | name: "", 94 | grayed: true 95 | }, 96 | < ... > 97 | ] 98 | } 99 | ``` 100 | 101 | * `type` is the list type. Supported values are: `black` (all listed items should be disabled), `white` (only the listed items should be enabled). 102 | * `tools` is an array of objects. Each object could have the following properties: 103 | * `name` (*Mandatory*) is the name of a study. Use the same names as in the pop-ups of indicators. 104 | * `grayed` is a boolean showing whether this study should be visible but look as if it's disabled. If the study is grayed out and user clicks it, then the `onGrayedObjectClicked` function is called. 105 | 106 | ### drawings_access 107 | 108 | *Starting from version 1.1.* 109 | 110 | This property has the same structure as the `studies_access`argument that is described above. Use the same names as you see in the UI. 111 | 112 | **Remark**: There is a special case for font-based drawings. Use the "Font Icons" name for them. Those drawings cannot be enabled or disabled separately - the entire group will have to be either enabled or disabled. 113 | 114 | ### saved_data 115 | 116 | JS object containing saved chart content. Use this parameter when creating the widget if you have a saved chart already. If you want to load the chart content when the chart is initialized then use [load() method](https://github.com/tradingview/charting_library/wiki/Widget-Methods#loadstate) of the widget. 117 | 118 | ### locale 119 | 120 | Locale to be used by Charting Library. See [Localization](Localization) section for details. 121 | 122 | ### numeric_formatting 123 | 124 | The object containing formatting options for numbers. The only possible option is `decimal_sign` currently. 125 | Example: `numeric_formatting: { decimal_sign: "," }` 126 | 127 | ### customFormatters 128 | 129 | It is an object that contains the following fields: 130 | 131 | 1. timeFormatter 132 | 1. dateFormatter 133 | 134 | You can use these formatters to adjust the display format of the date and time values. 135 | Both values are objects that include functions such as `format` and `formatLocal`: 136 | 137 | ```javascript 138 | function format(date) 139 | function formatLocal(date) 140 | ``` 141 | 142 | These functions should return the text that specifies date or time. `formatLocal` should convert date and time to local timezone. 143 | 144 | Example: 145 | 146 | ```javascript 147 | customFormatters: { 148 | timeFormatter: { 149 | format: function(date) { var _format_str = '%h:%m'; return _format_str.replace('%h', date.getUTCHours(), 2). replace('%m', date.getUTCMinutes(), 2). replace('%s', date.getUTCSeconds(), 2); } 150 | }, 151 | dateFormatter: { 152 | format: function(date) { return date.getUTCFullYear() + '/' + date.getUTCMonth() + '/' + date.getUTCDate(); } 153 | } 154 | } 155 | ``` 156 | 157 | ### overrides 158 | 159 | The object that contains new values for default widget properties. 160 | You can override most of the Charting Library properties (which also may be edited by user through UI) using `overrides` parameter of Widget constructor. `overrides` is supposed to be an object. The keys of this object are the names of overridden properties. The values of these keys are the new values of the properties. Example: 161 | 162 | ```javascript 163 | overrides: { 164 | "symbolWatermarkProperties.color": "rgba(0, 0, 0, 0)" 165 | } 166 | ``` 167 | 168 | This code will make the watermark 100% opaque (invisible). All customizable properties are listed in [separate article](Overrides). You can use [Drawings-Overrides](Drawings-Overrides) starting from v 1.5. 169 | 170 | ### disabled_features, enabled_features 171 | 172 | The array containing names of features that should be enabled/disabled by default. `Feature` means part of the functionality of the chart (part of the UI/UX). Supported features are listed [here](Featuresets). 173 | 174 | Example: 175 | 176 | ```javascript 177 | TradingView.onready(function() 178 | { 179 | var widget = new TradingView.widget({ 180 | /* .... */ 181 | disabled_features: ["header_widget", "left_toolbar"], 182 | enabled_features: ["move_logo_to_main_pane"] 183 | }); 184 | }); 185 | ``` 186 | 187 | ### snapshot_url 188 | 189 | This URL is used to send a POST request with base64-encoded chart snapshots when a user presses the snapshot button. This endpoint should return the full URL of the saved image in the the response. 190 | 191 | ### indicators_file_name 192 | 193 | Path to the file that contains your compiled indicators. See more details [here](Creating-Custom-Studies). 194 | 195 | ### preset 196 | 197 | `preset` is a name of predefined widget settings. For now, the only value supported in the `preset` is `mobile`. The example of this `preset` is [available here](https://demo_chart.tradingview.com/mobile_black.html). 198 | 199 | ### studies_overrides 200 | 201 | Use this option to customize the style or inputs of the indicators. You can also customize the styles and inputs of the `Compare` series using this argument. See more details [here](Studies-Overrides) 202 | 203 | ### time_frames 204 | 205 | List of visible timeframes that can be selected at the bottom of the chart. 206 | 207 | Example: 208 | 209 | ```javascript 210 | time_frames: [ 211 | { text: "50y", resolution: "6M", description: "50 Years" }, 212 | { text: "3y", resolution: "W", description: "3 Years", title: "3yr" }, 213 | { text: "8m", resolution: "D", description: "8 Month" }, 214 | { text: "3d", resolution: "5", description: "3 Days" }, 215 | { text: "1000y", resolution: "W", description: "All", title: "All" }, 216 | ] 217 | ``` 218 | 219 | Timeframe is an object containing the `text` and `resolution` properties. The `text` property should have the following format: `` ( \d+(y|m|d) as Regex ). Resolution is a string and its format is described here - [here](Resolution). See [this topic](Time-Frames) to learn more about timeframes. 220 | 221 | The `description` property was added in v 1.7 and is displayed in the pop-up menu. This parameter is optional. If it isn't specified then the `title` or `text` property is used as a description. 222 | 223 | The `title` property was added in v 1.9 and its value will override the default title generated based on the `text` property. This parameter is optional. 224 | 225 | ### charts_storage_url, client_id, user_id 226 | 227 | These arguments are related to the high-level API for saving/loading the charts. See more details [here](Saving-and-Loading-Charts). 228 | 229 | ### charts_storage_api_version 230 | 231 | A version of your backend. Supported values are: `"1.0"` | `"1.1"`. Study Templates are supported starting from version `"1.1"`. 232 | 233 | ### load_last_chart 234 | 235 | Set this parameter to `true` if you want the library to load the last saved chart for a user (you should implement [save/load](Saving-and-Loading-Charts) first to make it work). 236 | 237 | ### theme 238 | 239 | *Starting from version 1.13.* 240 | 241 | Adds custom theme color for the chart. Supported values are: `"Light"` | `"Dark"`. 242 | 243 | ### custom_css_url 244 | 245 | *Starting from version 1.4.* 246 | 247 | Adds your custom CSS to the chart. `url` should be an absolute or relative path to the `static` folder. 248 | 249 | ### loading_screen 250 | 251 | *Starting from version 1.12.* 252 | 253 | Customization of the loading spinner. Value is an object with the following possible keys: 254 | 255 | * `backgroundColor` 256 | * `foregroundColor` 257 | 258 | Example: 259 | 260 | ```javascript 261 | loading_screen: { backgroundColor: "#000000" } 262 | ``` 263 | 264 | ### favorites 265 | 266 | Items that should be marked as favorite by default. This option requires that the usage of localstorage is disabled (see [featuresets](Featuresets) to know more). The `favorites` property is supposed to be an object. The following properties are supported: 267 | 268 | * **intervals**: an array of time intervals that are marked as favorite. Example: `["D", "2D"]` 269 | * **chartTypes**: an array of chart types that are marked as favorite. The names of chart types are identical to chart's UI in the English version. Example: `["Area", "Candles"]`. 270 | 271 | ### save_load_adapter 272 | 273 | *Starting from version 1.12.* 274 | 275 | An object containing the save/load functions. If it is available it should have the following methods: 276 | 277 | **Chart layouts:** 278 | 279 | 1. `getAllCharts(): Promise` 280 | 281 | A function to get all saved charts. 282 | 283 | `ChartMetaInfo` is an object with the following fields: 284 | * `id` - unique ID of the chart. 285 | * `name` - name of the chart. 286 | * `symbol` - symbol of the chart. 287 | * `resolution` - resolution of the chart. 288 | * `timestamp` - last modified date (number of milliseconds since midnight `01/01/1970` UTC) of the chart. 289 | 290 | 1. `removeChart(chartId): Promise` 291 | 292 | A function to remove a chart. `chartId` is a unique ID of the chart (see `getAllCharts` above). 293 | 294 | 1. `saveChart(chartData: ChartData): Promise` 295 | 296 | A function to save a chart. 297 | 298 | `ChartData` is an object with the following fields: 299 | * `id` - unique ID of the chart (may be `undefined` if it wasn't saved before). 300 | * `name` - name of the chart. 301 | * `symbol` - symbol of the chart. 302 | * `resolution` - resolution of the chart. 303 | * `content` - content of the chart. 304 | 305 | `ChartId` - unique ID of the chart (string) 306 | 307 | 1. `getChartContent(chartId): Promise` 308 | 309 | A function to load the chart from the server. 310 | 311 | `ChartContent` is a string with the chart content (see `ChartData::content` field in `saveChart` function). 312 | 313 | **Study Templates:** 314 | 315 | 1. `getAllStudyTemplates(): Promise` 316 | 317 | A function to get all saved study templates. 318 | 319 | `StudyTemplateMetaInfo` is an object with the following fields: 320 | * `name` - name of the study template. 321 | 322 | 1. `removeStudyTemplate(studyTemplateInfo: StudyTemplateMetaInfo): Promise` 323 | 324 | A function to remove a study template. 325 | 326 | 1. `saveStudyTemplate(studyTemplateData: StudyTemplateData): Promise` 327 | 328 | A function to save a study template. 329 | 330 | `StudyTemplateData` is an object with the following fields: 331 | * `name` - name of the study template. 332 | * `content` - content of the study template. 333 | 334 | 1. `getStudyTemplateContent(studyTemplateInfo: StudyTemplateMetaInfo): Promise` 335 | 336 | A function to load a study template from the server. 337 | 338 | `StudyTemplateContent` - content of the study template (string) 339 | 340 | If both `charts_storage_url` and `save_load_adapter` are available then `save_load_adapter` will be used. 341 | 342 | **IMPORTANT:** All functions should return a `Promise` (or `Promise`-like objects). 343 | 344 | ### settings_adapter 345 | 346 | *Starting from version 1.11.* 347 | 348 | An object that contains set/remove functions. Use it to save chart settings to your preferred storage (including server-side). If it is available then it should have the following methods: 349 | 350 | 1. `initialSettings: Object` 351 | 352 | An object with the initial settings 353 | 354 | 1. `setValue(key: string, value: string): void` 355 | 356 | A function that is called to store key/value pair. 357 | 358 | 1. `removeValue(key: string): void` 359 | 360 | A function that is called to remove a key. 361 | 362 | ## Trading Terminal only 363 | 364 | ### widgetbar 365 | 366 | :chart: *applies to [Trading Terminal](Trading-Terminal) only* 367 | 368 | The object that contains settings for the widget panel on the right side of the chart. Watchlist, news and details widgets on the right side of the chart can be enabled using the `widgetbar` field in Widget constructor: 369 | 370 | ```javascript 371 | widgetbar: { 372 | details: true, 373 | watchlist: true, 374 | watchlist_settings: { 375 | default_symbols: ["NYSE:AA", "NYSE:AAL", "NASDAQ:AAPL"], 376 | readonly: false 377 | } 378 | } 379 | ``` 380 | 381 | * `details` (*default:* `false`): Enables details widget in the widget panel on the right. 382 | * `watchlist` (*default:* `false`): Enables watchlist widget in the widget panel on the right. 383 | * `watchlist_settings.default_symbols` (*default:* `[]`): Sets the list of default symbols for watchlist. 384 | * `watchlist_settings.readonly` (*default:* `false`): Enables read-only mode for the watchlist. 385 | 386 | ### rss_news_feed 387 | 388 | :chart: *applies to [Trading Terminal](Trading-Terminal) only* 389 | 390 | Use this property to change the RSS feed for news. You can set a different RSS for each symbol type or use a single RSS for all symbols. The object should have the `default` property, other properties are optional. The names of the properties match the symbol types. Each property is an object (or an array of objects) with the following properties: 391 | 392 | 1. `url` - is a URL to be requested. It can contain tags in curly brackets that will be replaced by the terminal: `{SYMBOL}`, `{TYPE}`, `{EXCHANGE}`. 393 | 1. `name` - is a name of the feed to be displayed underneath the news. 394 | 395 | Here is an example: 396 | 397 | ```javascript 398 | { 399 | "default": [ { 400 | url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}", 401 | name: "NASDAQ" 402 | }, { 403 | url: "http://feeds.finance.yahoo.com/rss/2.0/headline?s={SYMBOL}®ion=US&lang=en-US", 404 | name: "Yahoo Finance" 405 | } ] 406 | } 407 | ``` 408 | 409 | Another example: 410 | 411 | ```javascript 412 | { 413 | "default": { 414 | url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}", 415 | name: "NASDAQ" 416 | } 417 | } 418 | ``` 419 | 420 | One more example: 421 | 422 | ```javascript 423 | { 424 | "default": { 425 | url: "https://articlefeeds.nasdaq.com/nasdaq/symbols?symbol={SYMBOL}", 426 | name: "NASDAQ" 427 | }, 428 | "stock": { 429 | url: "http://feeds.finance.yahoo.com/rss/2.0/headline?s={SYMBOL}®ion=US&lang=en-US", 430 | name: "Yahoo Finance" 431 | } 432 | } 433 | ``` 434 | 435 | ### news_provider 436 | 437 | :chart: *applies to [Trading Terminal](Trading-Terminal) only* 438 | 439 | An object that specifies the news provider. It may contain the following properties: 440 | 441 | 1. `is_news_generic` - if set to `true` then the title of the news widget will not include a symbol name (`Headlines` will be included only). Otherwise `for SYMBOL_NAME` will be added. 442 | 1. `get_news` - use this property to set your own news getter function. Both the `symbol` and `callback` will be passed to the function. 443 | 444 | The callback function should be called with an array of news objects that have the following structure: 445 | 446 | * `title` (required) - the title of news item. 447 | * `published` (required) - the time of news item in ms (UTC). 448 | * `source` (optional) - source of the news item title. 449 | * `shortDescription` (optional) - Short description of a news item that will be displayed under the title. 450 | * `link` (optional) - URL to the news story. 451 | * `fullDescription` (optional) - full description (body) of a news item. 452 | 453 | **NOTE:** When a user clicks on a news item a new tab with the `link` URL will be opened. If `link` is not specified then a pop-up dialog with `fullDescription` will be shown. 454 | 455 | **NOTE 2:** If both `news_provider` and `rss_news_feed` are available then the `rss_news_feed` will be ignored. 456 | 457 | Example: 458 | 459 | ```javascript 460 | news_provider: { 461 | is_news_generic: true, 462 | get_news: function(symbol, callback) { 463 | callback([ 464 | { 465 | title: 'News for symbol ' + symbol, 466 | shortDescription: 'Short description of the news item', 467 | fullDescription: 'Full description of the news item', 468 | published: new Date().valueOf(), 469 | source: 'My own source of news', 470 | link: 'https://www.tradingview.com/' 471 | }, 472 | { 473 | title: 'Another news for symbol ' + symbol, 474 | shortDescription: 'Short description of the news item', 475 | fullDescription: 'Full description of the news item. Long text here.', 476 | published: new Date().valueOf(), 477 | source: 'My own source of news', 478 | } 479 | ]); 480 | } 481 | } 482 | ``` 483 | 484 | ### brokerFactory 485 | 486 | :chart: *applies to [Trading Terminal](Trading-Terminal) only* 487 | 488 | Use this field to pass the function that returns a new object which implements [Broker API](Broker-API). This is a function that accepts [Trading Host](Trading-Host) and returns [Broker API](Broker-API). 489 | 490 | ### brokerConfig 491 | 492 | :chart: *applies to [Trading Terminal](Trading-Terminal) only* 493 | 494 | Use this field to set the configuration flags for the Trading Terminal. [Read more](Trading-Objects-and-Constants#configflags-object). 495 | 496 | ## See Also 497 | 498 | * [Customization Overview](Customization-Overview) 499 | * [Widget Methods](Widget-Methods) 500 | * [Featuresets](Featuresets) 501 | * [Saving and Loading Charts](Saving-and-Loading-Charts) 502 | * [Overriding Default Properties of the Studies](Studies-Overrides) 503 | * [Overriding Default Properties of the Chart](Overrides) 504 | -------------------------------------------------------------------------------- /Widget-Methods.md: -------------------------------------------------------------------------------- 1 | Below is the list of methods that the widget supports. You can call them using the widget object that is returned to you by the widget's constructor. 2 | 3 | **Remark**: Please note that it's safe to call any method only **after** onChartReady callback function is called. 4 | 5 | Example: 6 | 7 | ```javascript 8 | widget.onChartReady(function() { 9 | // It's now safe to call any other methods of the widget 10 | }); 11 | ``` 12 | 13 | ## Methods 14 | 15 | * [Subscribing To Chart Events](#subscribing-to-chart-events) 16 | * [onChartReady(callback)](#onchartreadycallback) 17 | * [headerReady()](#headerready) 18 | * [onGrayedObjectClicked(callback)](#ongrayedobjectclickedcallback) 19 | * [onShortcut(shortcut, callback)](#onshortcutshortcut-callback) 20 | * [subscribe(event, callback)](#subscribeevent-callback) 21 | * [unsubscribe(event, callback)](#unsubscribeevent-callback) 22 | * [Chart Actions](#chart-actions) 23 | * [chart()](#chart) 24 | * [setLanguage(locale)](#setlanguagelocale) 25 | * [setSymbol(symbol, interval, callback)](#setsymbolsymbol-interval-callback) 26 | * [remove()](#remove) 27 | * [closePopupsAndDialogs()](#closepopupsanddialogs) 28 | * [selectLineTool(drawingId)](#selectlinetooldrawingid) 29 | * [selectedLineTool()](#selectedlinetool) 30 | * [takeScreenshot()](#takescreenshot) 31 | * [lockAllDrawingTools](#lockalldrawingtools) 32 | * [hideAllDrawingTools](#hidealldrawingtools) 33 | * [Saving/Loading Charts](#savingloading-charts) 34 | * [save(callback)](#savecallback) 35 | * [load(state)](#loadstate) 36 | * [getSavedCharts(callback)](#getsavedchartscallback) 37 | * [loadChartFromServer(chartRecord)](#loadchartfromserverchartrecord) 38 | * [saveChartToServer(onCompleteCallback, onFailCallback, saveAsSnapshot, options)](#savecharttoserveroncompletecallback-onfailcallback-saveassnapshot-options) 39 | * [removeChartFromServer(chartId, onCompleteCallback)](#removechartfromserverchartid-oncompletecallback) 40 | * [Custom UI Controls](#custom-ui-controls) 41 | * [onContextMenu(callback)](#oncontextmenucallback) 42 | * [createButton(options)](#createbuttonoptions) 43 | * [Dialogs](#dialogs) 44 | * [showNoticeDialog(params)](#shownoticedialogparams) 45 | * [showConfirmDialog(params)](#showconfirmdialogparams) 46 | * [showLoadChartDialog()](#showloadchartdialog) 47 | * [showSaveAsChartDialog()](#showsaveaschartdialog) 48 | * [Getters](#getters) 49 | * [symbolInterval(callback)](#symbolinterval) 50 | * [mainSeriesPriceFormatter()](#mainseriespriceformatter) 51 | * [getIntervals()](#getintervals) 52 | * [getStudiesList()](#getstudieslist) 53 | * [Customization](#customization) 54 | * [changeTheme(themeName)](#changethemethemename) 55 | * [addCustomCSSFile(url)](#addcustomcssfileurl) 56 | * [applyOverrides(overrides)](#applyoverridesoverrides) 57 | * [applyStudiesOverrides(overrides)](#applystudiesoverridesoverrides) 58 | * :chart: [Trading Terminal only](#chart-trading-terminal-only) 59 | * [watchList()](#chart-watchlist) 60 | * :chart: [Multiple Charts Layout](#chart-multiple-charts-layout) 61 | * [chart(index)](#chart-chartindex) 62 | * [activeChart()](#chart-activechart) 63 | * [chartsCount()](#chart-chartscount) 64 | * [layout()](#chart-layout) 65 | * [setLayout(layout)](#chart-setlayoutlayout) 66 | 67 | ## Subscribing To Chart Events 68 | 69 | ### onChartReady(callback) 70 | 71 | 1. `callback`: function() 72 | 73 | The Charting Library will call the callback function 1 time when chart is initialized. 74 | You can safely call all other methods starting from this moment. 75 | 76 | ### headerReady() 77 | 78 | Returns a `Promise` object that should be used to handle an event when the Charting Library header widget API is ready (e.g. [createButton](#createbuttonoptions)). 79 | 80 | ### onGrayedObjectClicked(callback) 81 | 82 | 1. `callback`: function(subject) 83 | 1. `subject`: object `{type, name}` 84 | * `type`: `drawing` | `study` 85 | * `name`: string, name of a clicked subject 86 | 87 | The Library will call the `callback` function every time a user clicks on a grayed out object. 88 | 89 | Example: 90 | 91 | ```javascript 92 | new TradingView.widget({ 93 | drawings_access: { 94 | type: "black", 95 | tools: [ 96 | { name: "Trend Line" }, 97 | { name: "Trend Angle", grayed: true }, 98 | ] 99 | }, 100 | studies_access: { 101 | type: "black", 102 | tools: [ 103 | { name: "Aroon" }, 104 | { name: "Balance of Power", grayed: true }, 105 | ] 106 | }, 107 | <...> // other widget settings 108 | }); 109 | 110 | widget.onChartReady(function() { 111 | widget.onGrayedObjectClicked(function(data) { 112 | // this function will be called when a user tries to 113 | // create the Balance Of Power study or the Trend Angle shape 114 | 115 | alert(data.name + " is grayed out!"); 116 | }) 117 | }); 118 | ``` 119 | 120 | ### onShortcut(shortcut, callback) 121 | 122 | 1. `shortcut` 123 | 1. `callback`: function(data) 124 | 125 | The Library will call the `callback` function every time the shortcut key is pressed. 126 | 127 | Example: 128 | 129 | ```javascript 130 | widget.onShortcut("alt+s", function() { 131 | widget.executeActionById("symbolSearch"); 132 | }); 133 | ``` 134 | 135 | ### subscribe(event, callback) 136 | 137 | 1. `event`: can be 138 | 139 | | Event name | Library Version | Description | 140 | |------------|-----------------|-------------| 141 | | `toggle_sidebar` | | Drawing toolbar is shown/hidden | 142 | | `indicators_dialog` | | Indicators dialog is shown | 143 | | `toggle_header` | | Chart header is shown/hidden | 144 | | `edit_object_dialog` | | Chart/Study Properties dialog is shown | 145 | | `chart_load_requested` | | New chart is about to be loaded | 146 | | `chart_loaded` | | | 147 | | `mouse_down` | | | 148 | | `mouse_up` | | | 149 | | `drawing` | 1.7 | A drawing is added to a chart. The arguments contain an object with the `value` field that corresponds with the name of the drawing. | 150 | | `study` | 1.7 | An indicator is added to a chart.The arguments contain an object with the `value` field that corresponds with the name of the indicator. | 151 | | `undo` | 1.7 | | 152 | | `redo` | 1.7 | | 153 | | `reset_scales` | 1.7 | Reset scales button is clicked | 154 | | `compare_add` | 1.7 | A compare dialog is shown | 155 | | `add_compare` | 1.7 | A compare instrument is added | 156 | | `load_study` template | 1.7 | A study template is loaded | 157 | | `onTick` | | Last bar is updated | 158 | | `onAutoSaveNeeded` | | User changed the chart. `Chart change` means any user action that can be undone. The callback function will not be called more than once every 5 seconds. See also [auto_save_delay](Widget-Constructor#auto_save_delay) | 159 | | `onScreenshotReady` | | A screenshot URL is returned by the server | 160 | | `onMarkClick` | | User clicked a [mark on a bar](Marks-On-Bars). Mark ID will be passed as an argument | 161 | | `onTimescaleMarkClick` | | User clicked a timescale mark. Mark ID will be passed as an argument | 162 | | `onSelectedLineToolChanged` | | Selected line tool is changed | 163 | | :chart: `layout_about_to_be_changed` | | Amount or placement of the charts is about to be changed | 164 | | :chart: `layout_changed` | | Amount or placement of the charts is changed | 165 | | :chart: `activeChartChanged` | | Active chart is changed | 166 | 167 | 1. `callback`: function(arguments) 168 | 169 | The library will call the `callback` function when a GUI `event` has happened. 170 | Every event can have a different set of arguments. 171 | 172 | ### unsubscribe(event, callback) 173 | 174 | Unsubscribes a previously subscribed `callback` function from a given `event` (that is one of the events in the table above). 175 | 176 | ## Chart Actions 177 | 178 | ### chart() 179 | 180 | Returns a chart object that you can use to call [Chart-Methods](Chart-Methods) 181 | 182 | ### setLanguage(locale) 183 | 184 | 1. `locale`: [language code](Localization) 185 | 186 | Sets the language of the widget. For now, this call reloads the chart. **Please avoid using it**. 187 | 188 | ### setSymbol(symbol, interval, callback) 189 | 190 | 1. `symbol`: string 191 | 1. `interval`: string 192 | 1. `callback`: function() 193 | 194 | Changes the symbol and resolution of the chart. The `callback` function is called only when new symbol's data has been received. 195 | 196 | ### remove() 197 | 198 | Removes the chart widget from the web page. 199 | 200 | ### closePopupsAndDialogs() 201 | 202 | Calling this method closes all context menus, pop-ups or dialogs. 203 | 204 | ### selectLineTool(drawingId) 205 | 206 | 1. `drawingId`: may be one of the [identifiers](Shapes-and-Overrides) or 207 | 1. `cursor` 208 | 1. `dot` 209 | 1. `arrow_cursor` 210 | 1. `eraser` 211 | 1. `measure` 212 | 1. `zoom` 213 | 1. `brush` 214 | 215 | Selects a drawing or a cursor. It's the same as a single click on a drawing button. 216 | 217 | ### selectedLineTool() 218 | 219 | Returns an [identifier](Shapes-and-Overrides) of the selected drawing or cursor (see above). 220 | 221 | ### takeScreenshot() 222 | 223 | This method creates a snapshot of the chart and uploads it to the server. 224 | When it is done the [onScreenshotReady](#subscribeevent-callback) callback function is called. 225 | The URL of the snapshot will be passed as an argument to the callback function. 226 | 227 | ### lockAllDrawingTools() 228 | 229 | This method returns a [WatchedValue](WatchedValue) object that can be used to read/set/watch the state of Lock All Drawing Tools button. 230 | 231 | ### hideAllDrawingTools() 232 | 233 | This method returns a [WatchedValue](WatchedValue) object that can be used to read/set/watch the state of Hide All Drawing Tools button. 234 | 235 | ## Saving/Loading Charts 236 | 237 | ### save(callback) 238 | 239 | 1. `callback`: function(object) 240 | 241 | Saves the chart state to JS object. Charting Library will call your callback function and pass the state object as an argument. 242 | 243 | This call is part of the low-level [save/load API](Saving-and-Loading-Charts). 244 | 245 | ### load(state) 246 | 247 | 1. `state`: object 248 | 249 | Loads the chart from the `state` object. This call is part of the low-level [save/load API](Saving-and-Loading-Charts). 250 | 251 | ### getSavedCharts(callback) 252 | 253 | 1. `callback`: function(objects) 254 | 255 | `objects` is an array of: 256 | 257 | * `id` 258 | * `name` 259 | * `image_url` 260 | * `modified_iso` 261 | * `short_symbol` 262 | * `interval` 263 | 264 | Returns a list of chart descriptions saved to the server for the current user. 265 | 266 | ### loadChartFromServer(chartRecord) 267 | 268 | 1. `chartRecord` is an object that you get using [getSavedCharts(callback)](#getsavedchartscallback) 269 | 270 | Loads and displays a chart from the server. 271 | 272 | ### saveChartToServer(onCompleteCallback, onFailCallback, saveAsSnapshot, options) 273 | 274 | 1. `onCompleteCallback`: function() 275 | 1. `onFailCallback`: function() 276 | 1. `saveAsSnapshot`: should be always `false` 277 | 1. `options`: object `{ chartName }` 278 | * `chartName`: name of a chart. Should be specified for new charts and when renaming the chart. 279 | * `defaultChartName`: default name of a chart. It will be used if the current chart has no name. 280 | 281 | Saves the current chart to the server. 282 | 283 | ### removeChartFromServer(chartId, onCompleteCallback) 284 | 285 | 1. `chartId`: the `id` should be received from the object that is returned by the [getSavedCharts(callback)](#getsavedchartscallback) 286 | 1. `onCompleteCallback`: function() 287 | 288 | Removes the chart from the server. 289 | 290 | ## Custom UI Controls 291 | 292 | ### onContextMenu(callback) 293 | 294 | 1. `callback`: function(unixtime, price). 295 | This callback function is expected to return a value (see below). 296 | 297 | The Charting Library will call the callback function every time user opens a context menu on the chart. 298 | The arguments that are passed to the callback function contain unix time and price of the clicked point on the chart. 299 | 300 | You have to return an array of objects that have the following format to add or remove items from the context menu. 301 | 302 | ```javascript 303 | { 304 | position: 'top' | 'bottom', 305 | text: 'Menu item text', 306 | click: 307 | } 308 | ``` 309 | 310 | * `position`: position of the item in the context menu 311 | * `text`: menu item text 312 | * `click`: a callback function that will be called when a user selects your menu item 313 | 314 | Use the minus sign to add a separator. Example: `{ text: "-", position: "top" }`. 315 | 316 | Use the minus sign in front of the item text to remove an existing item from the menu. 317 | 318 | Example: 319 | 320 | ```javascript 321 | widget.onChartReady(function() { 322 | widget.onContextMenu(function(unixtime, price) { 323 | return [{ 324 | position: "top", 325 | text: "First top menu item, time: " + unixtime + ", price: " + price, 326 | click: function() { alert("First clicked."); } 327 | }, 328 | { text: "-", position: "top" }, 329 | { text: "-Objects Tree..." }, 330 | { 331 | position: "top", 332 | text: "Second top menu item 2", 333 | click: function() { alert("Second clicked."); } 334 | }, { 335 | position: "bottom", 336 | text: "Bottom menu item", 337 | click: function() { alert("Third clicked."); } 338 | }]; 339 | }); 340 | ``` 341 | 342 | ### createButton(options) 343 | 344 | 1. `options`: object `{ align: "left" }` 345 | * `align`: `right` | `left`. default: `left` 346 | 347 | Creates a new DOM element in the top toolbar of the chart and returns [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) for this button. 348 | You can use it to add custom controls right on the chart. 349 | 350 | **NOTE:** This method MUST be called after [headerReady](#headerready) promise is resolved. 351 | 352 | Example: 353 | 354 | ```javascript 355 | widget.headerReady().then(function() { 356 | var button = widget.createButton(); 357 | button.setAttribute('title', 'My custom button tooltip'); 358 | button.addEventListener('click', function() { alert("My custom button pressed!"); }); 359 | button.textContent = 'My custom button caption'; 360 | }); 361 | ``` 362 | 363 | ## Dialogs 364 | 365 | *Starting from version 1.6.* 366 | 367 | ### showNoticeDialog(params) 368 | 369 | 1. `params`: object: 370 | * `title`: text to be shown in the title 371 | * `body`: text to be shown in the body 372 | * `callback`: function to be called when ok button is pressed 373 | 374 | This method shows a dialog with custom title and text along with the "OK" button. 375 | 376 | ### showConfirmDialog(params) 377 | 378 | 1. `params`: object: 379 | * `title`: text to be shown in the title 380 | * `body`: text to be shown in the body 381 | * `callback(result)`: function to be called when ok button is pressed. 382 | `result` is `true` if `OK` is pressed, otherwise it is `false`. 383 | 384 | This method shows a dialog with the custom title and text along with the "OK" and "CANCEL" buttons. 385 | 386 | ### showLoadChartDialog() 387 | 388 | Displays the "Load chart layout" dialog. 389 | 390 | ### showSaveAsChartDialog() 391 | 392 | Displays the "Copy chart layout" dialog. 393 | 394 | ## Getters 395 | 396 | ### symbolInterval() 397 | 398 | Charting Library returns an object that contains the symbol and interval of the chart. 399 | 400 | ### mainSeriesPriceFormatter() 401 | 402 | Returns an object with the `format` method that you can use to format the prices. This was introduced in version 1.5. 403 | 404 | ### getIntervals() 405 | 406 | Returns an array of supported resolutions. This was introduced in version 1.7. 407 | 408 | ### getStudiesList() 409 | 410 | Returns an array of IDs of all studies. They can be used to create a study. 411 | 412 | ## Customization 413 | 414 | ### changeTheme(themeName) 415 | 416 | *Starting from version 1.13.* 417 | 418 | 1. `themeName` should be `"Light"` | `"Dark"` 419 | 420 | This method changes the chart theme without reloading the chart. 421 | 422 | You can also use the [theme](Widget-Constructor#theme) in the Widget Constructor to create the chart with a custom theme. 423 | 424 | ### addCustomCSSFile(url) 425 | 426 | 1. `url` should be an absolute or relative path to the 'static` folder 427 | 428 | This method was introduced in version `1.3`. 429 | 430 | Starting from version `1.4` use [custom_css_url](Widget-Constructor#custom_css_url) instead. 431 | 432 | ### applyOverrides(overrides) 433 | 434 | *Starting from version 1.5.* 435 | 436 | 1. `overrides` is an object. 437 | It is the same as [overrides](Widget-Constructor#overrides) in the Widget Constructor. 438 | 439 | This method applies "overrides" to the properties without reloading the chart. 440 | 441 | ### applyStudiesOverrides(overrides) 442 | 443 | *Starting from version 1.9.* 444 | 445 | 1. `overrides` is an object. It is the same as [studies_overrides](Widget-Constructor#studies_overrides) in the Widget Constructor. 446 | 447 | This method applies "overrides" to the styles or inputs of the indicators without reloading the chart. 448 | 449 | ## :chart: Trading Terminal only 450 | 451 | The following methods are available in [Trading Terminal](Trading-Terminal) only. 452 | 453 | ### :chart: watchList() 454 | 455 | *Starting from version 1.9.* 456 | 457 | Returns an object to manage the watchlist. The object has the following methods: 458 | 459 | 1. `defaultList()` - allows you to get a default list of symbols. 460 | 461 | 1. `getList(id?: string)` - allows you to get a list of symbols. If the `id` parameter is not provided then the current list will be returned. If there is no WatchList then `null` will be returned. 462 | 463 | 1. `getActiveListId()` - allows you to get the ID of the current list. If there is no WatchList then `null` will be returned. 464 | 465 | 1. `getAllLists()` - allows you to get all lists. If there is no WatchList then `null` will be returned. 466 | 467 | 1. `setList(symbols: string[])` - allows you to set a list of symbols into the watchlist. It will replace the entire list. **Obsolete. Will be removed in version `1.13`. Use `updateList` instead.** 468 | 469 | 1. `updateList(listId: string, symbols: string[])` - allows you to edit the list of symbols. 470 | 471 | 1. `renameList(listId: string, newName: string)` - allows you to rename the list to `newName`. 472 | 473 | 1. `createList(listName?: string, symbols?: string[])` - allows you to create a list of symbols with `listName` name. If the `listName` parameter is not provided or there is no WatchList then `null` will be returned; 474 | 475 | 1. `saveList(list: SymbolList)` - allows you to save a list of symbols where `list` is an object with the following keys: 476 | 477 | ```js 478 | id: string; 479 | title: string; 480 | symbols: string[]; 481 | ``` 482 | 483 | If there is no WatchList or an equivalent list already exists then `false` will be returned, otherwise `true` will returned. 484 | 485 | 1. `deleteList(listId: string)` - allows you to delete a list of symbols. 486 | 487 | 1. `onListChanged()` - you can use this method to be notified when the symbols of the active watchlist are changed. You can subscribe and unsubscribe using the [[Subscription]] object returned by this function. 488 | 489 | 1. `onActiveListChanged()` - you can use this method to be notified when a different list of the watchlist is selected. You can subscribe and unsubscribe using the [[Subscription]] object returned by this function. 490 | 491 | 1. `onListAdded()` - - you can use this method to be notified when the new list is added to the watchlist. You can subscribe and unsubscribe using the [[Subscription]] object returned by this function. 492 | 493 | 1. `onListRemoved()` - you can use this method to be notified when the list is removed from the watchlist. You can subscribe and unsubscribe using the [[Subscription]] object returned by this function. 494 | 495 | 1. `onListRenamed()` - - you can use this method to be notified when the list is renamed in the watchlist. You can subscribe and unsubscribe using the [[Subscription]] object returned by this function. 496 | 497 | ## :chart: Multiple Charts Layout 498 | 499 | ### :chart: chart(index) 500 | 501 | 1. `index`: index of a chart starting from `0`. `index` is `0` by default. 502 | 503 | Returns a chart object that you can use to call [Chart-Methods](Chart-Methods) 504 | 505 | ### :chart: activeChart() 506 | 507 | Returns a chart object of the active chart that you can use to call [Chart-Methods](Chart-Methods) 508 | 509 | ### :chart: chartsCount() 510 | 511 | Returns the amount of charts in the current layout. 512 | 513 | ### :chart: layout() 514 | 515 | Returns the current layout mode. Possible values are: `4`, `6`, `8`, `s`, `2h`, `2-1`, `2v`, `3h`, `3v`, `3s`. 516 | 517 | ### :chart: setLayout(layout) 518 | 519 | 1. `layout`: Possible values are: `4`, `6`, `8`, `s`, `2h`, `2-1`, `2v`, `3h`, `3v`, `3s`. 520 | 521 | Changes the current chart layout. 522 | 523 | ## See Also 524 | 525 | * [Chart-Methods](Chart-Methods) 526 | * [Customization Overview](Customization-Overview) 527 | * [Widget Constructor](Widget-Constructor) 528 | * [Saving and Loading Charts](Saving-and-Loading-Charts) 529 | * [Overriding Default Properties of the Studies](Studies-Overrides) 530 | * [Overriding Default Properties of the Chart](Overrides) 531 | --------------------------------------------------------------------------------