Tick chart widget - User guide

Tick chart widget - User guide

1Overview

This document describes the configuration options which are available as standard in the Tick Chart website widget, by varying the URL. Many of these options are common to all the widgets provided by FX Blue Labs.

1.1Widget iframe HTML

The HTML for the widget is as follows. You need an account on the www.fxblue.com website, and you must fill in the name of your account as the userid=X setting in the URL:

<iframe src="//www.fxblue.com/webwidgets/wsprices/wsprices?userid=X" width="600" height="400">

<a href="//www.fxblue.com">FX Blue - free tools and services for FX and CFD traders</a>

</iframe>

Several settings in the widget can be changed by adding options to the URL in the src attribute of the iframe.

You can change the width and height to any value which you want. The recommended minimum size for the widget is 500x300.

2Tick Chart configuration options

This section describes the options in the widget which can be changed, by adding options to the URL in the src attribute for the iframe. In the following example, the theme option has been added to the URL:

<iframe src="//www.fxblue.com/webwidgets/wsprices/wsprices?userid=X&theme=Black">

<a href="//www.fxblue.com">FX Blue - free tools and services for FX and CFD traders</a>

</iframe>

2.1Colours

You can change the colours used by the Tick Chart widget either by switching to a complete alternative theme, or by specifying individual colours. But you cannot use both options: the theme, if specified, takes precedence.

All individual colours can be specified using either CSS names such as Red or Goldenrod, or using hex codes such as #E0FFE0. Please note that the # character should be URL-encoded as %23. For example:

//www.fxblue.com/webwidgets/wsprices/wsprices?userid=X&clr_bg=%23E0FFE0

2.1.1Theme

The Tick Chart widget currently has two built-in colour themes: the standard one (light), and a dark theme. You can switch to the dark theme using the following addition (case-sensitive) to the URL:

&theme=Black

The theme cannot be used in combination with the other, individual colour options described here. The theme takes precedence.

2.1.2Background colour - &clr_bg

You can change the chart's background colour using the &clr_bg setting. For example:

&clr_bg=%23808080

2.1.3Text colour - &clr_tx

You can change the colour of the text on the chart - the title, the axis labels, and any legend text - using the &clr_tx setting. For example:

&clr_tx=Red

2.1.4Gridline colour - &clr_gl

You can change the colour of the chart's gridlines using the &clr_gl setting. For example:

&clr_gl=Blue

2.1.5Toolbar background colour - &clr_tb

You can change the background colour of the toolbar using the &clr_tb setting. For example:

&clr_tb=LightGray

2.1.6Colours of chart lines and columns - &clr_ch

You can change the colours of lines and columns on the charts using the &clr_ch setting. For example:

&clr_ch=Blue

If more than one broker/account is being included in the chart, then you can specify multiple colours as a comma-separated list. For example:

&clr_ch=Blue,Red,Green

2.1.7Candle colours - &clr_uc and &clr_dc

You can change the colours of up and down candles on the tick-candle and time-candle charts using the &clr_uc and &clr_dc settings. For example:

&clr_uc=Green&clr_dc=RedTe

2.1.8Opacity of chart data points

Some chart modes such as bid/ask and spread are drawn semi-transparent. You can change the opacity level using the &opacity setting, on a scale of 0 to 1. For example, the following value would make the chart blocks nearly fully opaque:

&opacity=0.95

2.2Instrument

You can change the financial instrument which is selected by default in the widget, and also turn off the toolbar option for changing the instrument (thus making it fixed).

The default instrument can be changed using the &selsymbol setting. For example:

&selsymbol=GBPUSD

The values which you can use in the free retail widget are as follows:

EURUSD, USDJPY, GBPUSD, USDCHF, AUDUSD, USDCAD, EURGBP, EURAUD, EURJPY, EURCHF, GBPJPY, GBPCHF, AUDNZD, AUDCAD, XAUUSD, BTCUSD, LTCUSD, ETHUSD

The toolbar option for changing the instrument can be turned off by including &forcesymbol, with any value. For example:

&forcesymbol=yes

2.3Chart mode

You can change the chart mode - bid/ask, mid prices, price range etc - which is selected by default using the &selmode setting. For example:

&selmode=spread

The values (case-sensitive) which you can use for the setting are as follows: bidask, mid, spread, pricerange, tickcandle, secondscandle

The toolbar option for changing the chart mode can be turned off by including &forcemode, with any value. For example:

&forcemode=yes

2.4Chart update speed

You can change the update speed of the chart using the &selspeed setting (not applicable to candle charts). For example:

&selspeed=100

The values which you can use are 0, for each tick, or the equivalent in milliseconds of each of the drop-down toolbar options. For example, the 0.5-second option is 500 and the 2-second option is 2000.

The toolbar option for changing the speed can be turned off by including &forcespeed, with any value. For example:

&forcespeed=yes

2.5Maximum range for spread chart

By default, the chart's spread mode will automatically adjust to the largest spread being displayed. However, it is also possible to set a fixed maximum value, in pips, for the spread display, using &spreadrange. For example:

&spreadrange=5

2.6Number of ticks in tick-candles

You can change the default setting for the numbers of ticks in a tick-candle using the &selcandlesize setting. For example, for a T45 candle:

&selcandlesize=45

To make the value fixed, and to hide the toolbar option for changing the candle size, use the &forcecandlesize setting, with any value. For example:

&forcecandlesize=yes

2.7Time period for time-candles

You can change the default period for time-candles using the &selseconds setting. The value should be the period as a number of seconds, corresponding to one of the options in the drop-down list. For example, in order to select M2 candles:

&selseconds=120

To make the value fixed, and to hide the toolbar option for changing the time period, use the &forceseconds setting, with any value. For example:

&forceseconds=yes