Visualization Module to Build Trading Strategy - First Acquaintance
Tags: visualization, trading, strategy, fmzquant
Published: 2024-05-09 09:04:27

Visual programming has always been an aspirational goal of software developers, even in the field of quantitative trading.
Because the method of "what you see is what you get" in visualization reduces the technical threshold of programming development greatly.
Users no longer have to deal with a pile of boring codes. They just use their imagination and logical thinking to focus on the business itself.
You can realize a program you want. Isn't it amazing?

Let's get into the visual programming field of quantitative trading strategy together!

### Visual programming of the initial FMZ Quant
After logging in to https://www.fmz.com, register your account (if you are already registered, log in directly) and click: Dashboard ->Strategy ->Add Strategy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwk5jc98vs0ve9avitdn.png)

We can see an initial visualization strategy.
It is only used to output the account asset information of the default configured exchange (the first exchange object added on the backtest or robot).
(See the figure below)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ws0nvctlxho165d2l4b.png)

### Before we start learning how to use visualization, we can understand some design concepts of visualization.
1. Splicing
If you look carefully, you can see that modules have tenon (concave) and mortise (convex), i.e. modules can "connect" and "be connected".
If two modules represent functional codes that can be connected, then the tenons and mortises of the two modules will be attracted together when you bring them close.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dia65bqpcvgxlps4oxy9.png)

2. Module setting and adjustment
Some modules have some special settable areas, for example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imtgisqzl4470kemvz9a.png)

You can drag the "Item" module on the left to the "Add" module, so that you can add a tenon (concave) position, thus adding a position for splicing text.
In this way, click the pinion to adjust and set the module.

3. Default input parameters of the module
Some modules need to input some parameters, which may be numeric values or strings.
If you do not add variables as input parameters of the module, the module will execute according to the default input parameters.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6fweg7o3qhgpvxt6cfb.png)

The square root calculation module like this outputs the calculation results of this module.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crwa9nvae0b71o9ak8fe.png)

As you can see, if the input parameter position defaults, the default value 9 will be used as the input parameter to calculate the square root of 9.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptc53into7q26isx74d6.png)

Of course, if you want to use a variable module as the input parameter, you can splice the variable module into the tenon (concave) position directly.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bs3gmvxwq48chobcp7x.png)

4. Operation
The module can be clicked and dragged with the left mouse button.
Modules can be copied with ctrl+c and pasted with ctrl+v, just as convenient as copying and pasting code or text.
The operation area can be scaled with the mouse wheel, and all modules will be scaled larger or smaller.
Click and drag the blank position in the operation area to move the operation area.
The trash bin on the right side records the recently deleted modules.
The most important thing is that after splicing the module strategy, don't forget to click "Save".

###Introduction to visualization tool module
You can see that there are many module classifications on the left side of the visual editing area, and there are many visual modules available in each classification project.

There are 11 categories.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr5ucbub1018nv2xa9c6.png)

Util module:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6rmoll9d8kukabkrl2k.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vf8qzsk0dqwzmifiqbf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqhe944tmev9dmby0c0d.png)

1. Output information:
This module is usually used together with the module of text class, as shown below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zccu3svxy6vf169j2m79.png)

You can enter a string in the text module, so that when you run the Output Information module, the string content in the text module will be printed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz574eqzaq1qhaqxrsx4.png)

Backtesting:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/424lw21lh6agjw5rpfc7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo0ko6npea0klollce2q.png)

Like JavaScript language code:
```
function main(){
    Log("Hello, Blockly!")
}
```
2. WeChat push:
This module has the same appearance as the "output information", which is different from the one that pushes information to WeChat bound to the current account at the same time.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/913jyeoyz8jd7kg2xlv7.png)

Like JavaScript language code:
```
function main () {
Log("WeChat Push!@")
}
```
3. Throw exception
Throwing exception module causes the program to issue an error, and then the program stops execution (without writing the exception handling code).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbltpvkjob5eloa16j84.png)

Similarly, in the JavaScript strategy, the main function executes the throw "string to output" function directly.
```
function main () {
    throw "The first sentence throws an exception to stop the program!"
}
```
Backtesting results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jk0mitllavg7zdpfeld.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/app2p94jjknjz3vto89j.png)

Generally, it is used more when debugging. For example, if you want the program to stop under certain conditions and print some data at that time for observation.
Or you can place an exception module in the code flow where problems may occur, let the program report errors, and find some errors.

4. Sleep
Sleep module

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5t6mf9vl5c7ia0ypyxe.png)

As in JavaScript strategy:
```
function main () {
    Sleep(1000 * 5)
}
```
Test the sleep module:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmcllgq7ny70h0l7k7mq.png)

Backtesting results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktucqurs5cgzn4xqwltg.png)

5. Print returns

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2w6kb1kw34rz58t5szi.png)

This module, just like the API function LogProfit on FMZ Quant Trading Platform, which prints the returns log and draws the return curve according to the input parameters automatically.

For example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbvur3caqatw5z7hk8u0.png)

The execution of the backtesting is shown in the figure below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/099v5coq1zr3t99t8xql.png)

The corresponding JavaScript strategy code is as follows:
```
function main () {
    LogProfit(1)
    Sleep(1000 * 5)
    LogProfit(2)
    Sleep(1000 * 5)
    LogProfit(3)
    Sleep(1000 * 5)
    LogProfit(2)
    Sleep(1000 * 5)
    LogProfit(5)
}
```
It can be spliced at any position where you want to output return information.

6. Loop

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvizqhe52jtxcf0a3r0j.png)

Loop module can wrap a series of spliced module combinations, allowing the module combinations to execute the loop.

Test:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9pds9e2n5j3rjhcdh1x.png)

Backtesting results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0n5lh9jxgx8iti42bzz.png)

We can see that the module combination consisting of "print returns" and "sleep" will be executed continuously after the loop module is wrapped.

7. Loop execution every N seconds

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbeciqnrsq1wzr6yp4ij.png)

The usage of this module is basically the same as that of the loop module. The only difference is that the module has its own sleep.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alxj5bi0gxq4n03h5bh4.png)

8. Precision processing

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8myjqel6wnzhq9mgzhr.png)

This module can be used when the variable module or numerical value needs to control the precision. The numerical value of the input parameter part will be output as the numerical value of the specified decimal place according to the settings.

For example, precision processing is performed on the value 3.1415926535897.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2eqmda0jmye8wdjr7g7.png)

Backtesting display:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k918xn88nkebwqox2i3y.png)

9. Clear Log

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnp8pmxqnebdo9jsexve.png)

It is used to clear logs. Some logs can be retained according to the input parameters.
As in the API document:
```
LogReset()
```
10. Clear return log

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pilxca80v5gx5qceb568.png)

It is used to clear the return log. Some logs can be retained according to the input parameters.
As in the API document:
```
LogProfitReset()
```
### The next are some frequently used tool modules
11. Function module for obtaining a certain attribute of the market

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r4cxzlmpxes43a5nyv6.png)

This tool module needs to be used together with the quotation module in the "Transaction Module Type", as shown in the figure:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i358u6po221usyg060v.png)

Use the output information module to output the latest transaction price of the latest ticker market:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1wxhamwfs20vfxkjkzv.png)

Backtesting display:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivqfgc725m34v16jdwf0.png)

Like JavaScript strategy code:
```
function main () {
    Log(exchange.GetTicker().Last)
}
```
12. The module that obtains the attribute of a bar of K-line data

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03357ewdhjbmsv81g6dt.png)

This module also needs to be used together with the K-line data acquisition module in the "Transaction Module Type".

First, we create a variable module named K-line.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbbl5ygxzidnpzsbnhnm.png)

Then we obtain the K-line data, use the K-line data module to obtain it, and assign the value to the variable module: "K-line".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ltj72wdjcuuku7dc0k1.png)

Then we use the list length module in the "List Module Type" to obtain the length of the K-line variable module, which is used to specify which bar on the K-line to obtain the data.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6z4qhyj54ml8s88r26w.png)

Splice them together, as shown in the figure:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9l5rlrwpkipk1rwu0c6.png)

The timestamp of the last K-line bar is printed when the backtest runs.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mea1utr2n4nubp0jbi19.png)

13. The module that obtains the data of an order in the order book

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4oa8m5vb6fji2o0662a.png)

It also needs to be used together with the "Get Depth Data module" in the "Transaction Module Type".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbyyh1jlv460vfoqrgpd.png)

The index is set to 0 and the selling order is set to obtain the information of the selling one order.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ij4etje71xeovvujcle9.png)

Like JavaScript strategy code:
```
function main () {
    Log(exchange.GetDepth().Asks[0])
}
```
14. Module for obtaining an attribute in asset information

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kho10zigc53hukl5r58.png)

This module needs to be used together with the module of obtaining asset information.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stotgtd6ipfttnxcmk2w.png)

For example: print the available currency of the current account

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjxwfrw5hrkongozn7tr.png)

Backtesting display:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpfnqj7r53f7jzfnnrat.png)

Like JavaScript strategy code:
```
function main () {
    Log(exchange.GetAccount().Stocks)
}
```
15. Module for obtaining an attribute in order data

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5e83xll5vze93vacyia.png)

This module is used to obtain the value of an attribute in the order data, such as the price or quantity of selling one in the order book (example of No.13).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpkas76knyzgiqapgylu.png)

Backtesting results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byct63i885zu2g58wv7l.png)

Like JavaScript strategy code:
```
function main () {
    Log(exchange.GetDepth().Asks[0].Price)
}
```
It can also be used to obtain an attribute in the order information returned by the "Query Order Details Module" (to be explained in the advanced chapter).

16. The module to obtain the attributes of a position in the position information

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neu2wxa04fmg0wd5f7qf.png)

Similarly, it should be used together with the "Get Futures Position Module". Note that the position data returned by the "Get Futures Position Module" is an array (list) that contains positions in different contracts and directions. Therefore, the index should be specified when using.

Having learned so much, let's combine a hedging operation, that is, hedging both short-term and forward contracts.

We make a positive arbitrage hedge, that is, open a short position contract for the forward contract, and open a long position contract for the recent contract.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysofvm4tvczoi5ksldqb.png)

Backtesting results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvds8urabwuc3oxlb3zy.png)

Examples of visualization strategies:

https://www.fmz.com/strategy/121404
https://www.fmz.com/strategy/129895
https://www.fmz.com/strategy/123904
https://www.fmz.com/strategy/122318
For more strategies, please refer to: https://www.fmz.com/square

Other articles in this series

- Visualization Module to Build Trading Strategies - In-depth (https://www.fmz.com/digest-topic/9509)
- Visualization Module to Build Trading Strategy - Advanced Understanding (https://www.fmz.com/digest-topic/4046)

The boring programming can be easily completed by building blocks. It's very interesting to try!

From: https://blog.mathquant.com/2022/12/12/visualization-module-to-build-trading-strategy-first-acquaintance.html