Formula Help
Formula Guide
Enter Symbols:  

The Integration API

To make chart integration easy and fast, TecStock.com provides a thin integration API written in Javascript. The API is thin because it just consists of a set of predefined Javascript variables and three simple functions. Despite its simplicity, the API remains flexible and gives you the control over charts till the smallest details.

The variables in the API are categorized into attribute control variables and color control variables.

The Attribute Control Variables

This category of variables is used to specify the chart attributes like chart period, size, scale etc. The variable names and their possible values are listed in the following table:

tecstock_user_id Leave it blank if you don't have one. If you have subscribed the Golden Service Package, put your user id here and your company's web name will be displayed on the top of charts. This makes your web site more serious and professional. By default, "www.TecStock.com" will be displayed.
tecstock_chart_period Define the chart period. Valid values are daily, weekly and monthly. By default, it is daily.
tecstock_chart_size Define the chart size. Valid values are tiny, small, medium, large, huge and wide. By default, it is huge.
tecstock_chart_scale Define the scale of the chart coordinates. Valid values are log and linear. By default, it is log.
tecstock_show_price_label Define whether or not to show peak/trough prices on the chart. Valid values are yes and no. By default, it is no.
tecstock_color_schema Define the name of predefined color schemas. The currently predefined color schema names are default, lightblue, wheatbrown, yellow, blackred, blackgray and monochrome. By default, it is default.
Define the start date and end date of the chart. The start date and end date have to be either blank (in this case, end date will be the current date and the start date will be automatically determined by the chart size), or given in the format of YYYY-MM-DD. By default, both of them are blank.

The Color Control Variables

What follows are the variables used to specify colors in the chart. The valid value is any hex color code like 0000ff.

tecstock_image_bg Define the image background color of charts.
tecstock_chart_fg Define the foreground color of charts.
tecstock_chart_bg Define the background color of charts.
tecstock_coord_line_color Define the color of coordinate lines in charts.
tecstock_price_color Define the color of advanced prices.
tecstock_price_bg Define the background color of the last price bar in charts.
tecstock_volume_color Define the volume color when the price is advancing.
tecstock_volume_border_color Define the volume border color when the price is advancing.
tecstock_declined_volume_color Define the volume color when the price is declining.
tecstock_declined_volume_border_color Define the volume border color when the price is declining.
tecstock_cyq_volume_color Define the volume color of the CYQ indicator.
tecstock_cyq_average_cost_color Define the average cost color of the CYQ indicator.

The Javascript Functions

There are only three simple functions defined in the API:

tecstock_addSubchartInd(name, params, position)
This is used to add a subchart indicator, where name is the name of indicator you want to add; params is a string of parameters of the indicator separated by comma, use, for example, "12,26,9" for MACD. You can find out parameters of the indicator you want to use in formula test. If you leave params as "" (an empty string), the default parameters of the indicator will be used; position is either "a" (above) or "b" (below). This indicates whether the indicator should be displayed above or below the main chart. The following Javascript function call adds the MACD indicator above the the main chart:
tecstock_addSubchartInd("MACD", "12,26,9", "a");

tecstock_addMainchartInd(name, params)
This is used to add an indicator in the main chart, where name is the name of the indicator you want to add; params is a string of indicator's parameters separated by comma. The following Javascript function call adds the simple Moving-Average indicator MA with parameters "30,50,200" in the main chart:
tecstock_addMainchartInd("MA", "30,50,200");

tecstock_getImageURL(symbol, reset_var, reset_ind)
This returns the image URL for the chart of symbol. The URL can be used as the src in the HTML img tag. Both reset_var and reset_ind are boolean parameters and indicate whether or not to reset all the variables and indicators after building the URL. While in most cases it is necessary to do the reset so that the previous chart configuration will not affect the next chart, there are scenarios where you do not want to do the reset. The following Javascript code displays the chart of MSFT:
var url = tecstock_getImageURL("MSFT", true, true);
document.write("<img src=", url, ">");

The API is defined in "http://www.tecstock.com/script/integration_api.js". All the web pages which use the integration API have to include the following line in the HTML header tag:

<script language='JavaScript' type='text/JavaScript'

Please note that the integration API does not cover all the color specification of indicators. This is because indicator colors are specified in formulas. If you think that some indicators provided by the system do not match the style of your charts, you can go ahead and design your custom indicators. The "demo" account has a custom indicator "RSI_2". You can compare if RSI_2 matches the chart color better than the standard RSI.


The following HTML and Javascript code demonstrate a simple example which uses the integration API and displays a daily chart of IBM. More comprehensive demos can be found in the integration overview.

<script language='JavaScript' type='text/JavaScript'
</header><body><script type="text/javascript">
tecstock_user_id = "";
tecstock_chart_period = "daily";
tecstock_chart_size = "large";
tecstock_chart_scale = "log";
tecstock_show_price_label = "yes";
tecstock_color_schema = "";
tecstock_start_date = ""; // start date will be determined by the chart size
tecstock_end_date = "";   // use the current date as the nd end date

tecstock_chart_fg = "000000";
tecstock_chart_bg = "f0f0f0";
tecstock_image_bg = "b0c8fa";
tecstock_coord_line_color = "e0e0e0";
tecstock_price_color = "000000";
tecstock_declined_price_color = "f80000";
tecstock_price_bg = "dcdcdc";
tecstock_volume_color = "becebe";
tecstock_volume_border_color = "a0b0a0";
tecstock_declined_volume_color = "f8b0a0";
tecstock_declined_volume_border_color = "da9282";
tecstock_cyq_volume_color = "becebe";
tecstock_cyq_average_cost_color = "bc7464";

tecstock_addMainchartInd("VOL", "5,30,60");  // add the volume chart in the main chart
tecstock_addMainchartInd("MA", "30,50,200"); // add MA in the main chart
var url = tecstock_getImageURL("IBM", true, true);
document.write("<img src=", url, ">");


©2020 www.TecStock.com