AlgoTraderAlgoTrader Documentation

Chapter 10. Client

10.1. HTML5
10.1.1. Header
10.1.2. Order Table
10.1.3. Transaction Table
10.1.4. Positions Table
10.1.5. Market Data Table
10.1.6. Column Selection and Grouping
10.1.7. CSV Export
10.1.8. Chart Widget
10.1.9. Technologies
10.1.10. HTML5 Custom Widgets
10.2. AlgoTrader Eclipse IDE
10.2.1. AlgoTrader Perspective
10.2.2. Strategy Wizard
10.2.3. AlgoTrader Configuration Editor
10.2.4. Esper Colorer

AlgoTrader provides different types of clients all of which are targeting a different audience and use case:

The AlgoTrader HTML 5 provides the following features.

When AlgoTrader server starts, it automatically opens the client.

To manually open the client, point the browser to one of the following URL.


Using the strategy selection menu located at the top of the screen (to the right), one can select either an aggregated view over the entire system or a strategy specific view.

When a single strategy is selected the client will show orders, transactions, positions and market data subscriptions related to the selected strategy only. When ALL is selected the client will show orders, transactions, positions and market data subscriptions for all strategies.

The header tiles show general figures (like Net Liquidity, Unrealized P&L, Cash, etc.). The default valuation currency is USD. You can change it by updating the misc.portfolioBaseCurrency value in the file.

If one opens a menu on top right corner (hamburger menu) one can see Settings link which opens the settings form. The following settings are available there:

  1. Tiles: one can configure the visibility of general figures in header

  2. Order defaults: default order related values like default quantity and default time-in-force

  3. Tables update throttling in ms - sets the update interval of all tables, e.g. if the interval is 333ms, the tables will buffer all data updates and only make display changes every 333ms. Increasing that parameter may help if the UI is displaying a lot of data (>100 rows) and becomes unresponsive, e.g. reacts slowly to clicking on buttons, sorting columns etc.

  4. Use Trading View historical data - when checked means that the historical data for chart will be coming from TradingView's own data source, if unchecked the chart will take historical data from data source the Algotrader back end is configured with

To open the general management form, click on the management menu on the top of the screen (to the left).

The management menu provides the following operations:

Notifications are displayed in the lower left hand side of the screen

In case of an Alert an icon will appear at the top right of the screen.

To open the list of all Alerts click on the bell icon. Alerts can be removed from the list by clicking on the close icon

It is possible to extend the HTML5 UI with custom widgets in order to visualize strategy specific data or let the user interact with strategy specific functionality (e.g. modify parameters or change the state of a strategy). the following screen shot shows an example of the custom widget in use by the Appendix B, Example Strategy "Box":

HTML5 custom widgets use WebSockets over STOMP to communicate with the strategy.

To integrate the HTML5 custom widget into the main HTML5 front end the following items need to be created inside the strategy. The examples are based on the Appendix B, Example Strategy "Box".


This file contains the layout of the main HTML5 screen including the HTML5 custom widget. The custom widget needs to be included similar to the following code snippet:

  <meta charset="utf-8">
  <script src="/charting_library/charting_library.min.js"></script>
  <script src=""></script>
  <script src=""></script>


<!-- strategy Column -->
<div class="col col-xs-2">
  <div class="row row-xs-12">
    <div class="col col-xs-12">
      <div id="box"></div>
<!-- End of strategy column -->

Please not that the total of all columns and the total of all rows needs to equal 12 (e.g. col-xs-5, col-xs-5 and col-xs-2).

As the code snippet shows it is necessary to also include the jquery and stomp JavaScript libraries.


This file contains the HTML code for the custom widget. Individual tags will be referenced by JavaScript code through tag ids.

<h3>Box Strategy</h3>
<table class="table table-striped ">
            <td id="box_state"></td>
<button id="box_terminate" class="btn btn-danger btn-xs" role="button">

This file contains the JavaScript code for the custom widget:

$.get("box.html", function(result){1

    $.get(document.documentURI + "rest/broker/url/ws", function(wsURI){ 
        var ws = new WebSocket(wsURI, "stomp"); 
        var stompClient = Stomp.over(ws);
        stompClient.connect({}, function(frame) {
            stompClient.subscribe('/topic/', function(message){
                var metrics = JSON.parse(message.body));
            }, { "activemq.retroactive" : true});
            $('#box_terminate').on('click', function(event) { 
                stompClient.send("", {})

Loads the html content


Populate the <div id="box"> tag inside index.html with the html content


Requests the WebSocket URI via REST call


Connects to STOMP of WebSocket


Subscribes for metrics updates of the strategy which are sent to the topic Setting {"activemq.retroactive" : true} will allow the custom widget to get the last metrics event from the topic upon subscription


Populates the content tags with the contents of the metrics events


Sets button actions. Clicking the terminate button will send an empty message to the topic.


The strategy service class is responsible for sending events to the custom widget and for processing incoming events from the custom widget.

Strategy service classes can send events to the custom widget by using the JsonTemplate available inside the strategy service. The following code snippet will send a box event to the topic

getJsonTemplate().convertAndSend("", box);

Strategy service class methods can be annotated with the JmsListener annotation in order to receive incoming events from the custom widget. The following code snippet will attache the terminateSeries method to the topic

@JmsListener(destination = "")

public void terminateSeries() {

To see the full source code of above examples please see the corresponding source code of the Appendix B, Example Strategy "Box". Additional HTML5 custom widgets are available inside the example strategies Appendix D, Example Strategy "IPO" and Appendix C, Example Strategy "Pairs Trading".

The AlgoTrader Eclipse IDE provides a perspective (AlgoTrader perspective) which is ideal for quantitative / none technical users of AlgoTrader as it hides all code related artifacts. In addition the AlgoTrader Eclipse IDE contains the Strategy Wizard and the AlgoTrader Configuration Editor.

See section Section 2.1, “Development Environment Installation” for instructions on how to install the AlgoTrader Eclipse IDE.

Quantitative users can use this perspective to modify configurations of the system and trading strategies and start the system with different configurations. Code artifacts (java classes, config files etc.) are not visible in this perspective. However all log-files and reports are shown.

The perspective shows AlgoTrader projects only, i.e. projects that have the AlgoTrader nature (ch.algotrader.quant.ui.algotradernature) defined inside the .project file:

<?xml version="1.0" encoding="UTF-8"?>

It offers the following main capabilities:

The AlgoTrader Configuration Editor provides an editor for AlgoTrader configuration files. For more information on the AlgoTrader configuration functionality please see: Chapter 26, Configuration and Preferences API and Section 4.5, “Strategy Groups”.

To open the AlgoTrader Configuration Editor, right click on an AlgoTrader project, then click the menu item AlgoTrader/Configuration. The AlgoTrader/Configuration menu will only be available if a file with the name applicationContext-client-xxx.xml exists in the project class path. If that file does not exits, the menu item will be disabled and the editor cannot be opened.

Furthermore, the AlgoTrader Configuration Editor behaves differently depending on the content of the applicationContext-client-xxx.xml file. If the configuration file contains strategy group definitions according to Section 4.5, “Strategy Groups” the editor will show three tabs.

The tab Strategy Group allows modification of strategy group definitions.

The image above shows a strategy group configuration file opened in the AlgoTrader Configuration Editor.

On the left hand side of the Strategy Group Tab all available configurations are list and grouped by their Config Class (e.g. Box for

The buttons "New" and "Edit" (1) can be used to add and modify individual configuration items.

The "New" and "Edit" dialog contains the following elements (for details visit: Section 4.5, “Strategy Groups”):

  • Name: the name of the .properties file

  • Config Class: the name of the ConfigBean linked to the .properties file

  • Service Template: The Spring Service Template to use

  • Engine Template: The Spring Esper Template to use

  • Engine Name: The name of the Esper Engine (not editable)

In addition it is possible to rename, duplicate and delete individual items (2). When selecting a configuration the corresponding .properties file will open in the lower part of the Strategy Group Tab (4)

On the right hand side of the Strategy Group Tab individual configurations can be added (5) to different strategy groups where they can be back tested in parallel. Items from the left hand side can be added to multiple groups on the right hand side. When adding an item to a strategy group an allocation weight has to be assigned. When adding multiple items to a strategy group the total weight of the strategy group must be 100%.

The right hand side of the Strategy Group Tab contains buttons to "Create", "Edit", "Rename" and "Delete" strategy groups (3). The button "Run" will start a backtest of the selected strategy group (see Section, “Starting Back Tests”)

Both lists in the Strategy Group Tab have moving (6), collapsing/expanding (7), sorting (8) and full text filtering (9) of items. Also there is a function to filter by selected strategy item (10). In addition it is possible to change the orientation between horizontal and vertical (11).

The tab Properties shows a list of all .properties file in the class path which can be edited here

When a property file is selected, the content of that file is shown in a table viewer. The table viewer has two columns: key and value.

The AlgoTrader Configuration Editor supports in-place editing of cells under value column.

In addition to the standard key=value pairs, the AlgoTrader Configuration Editor interprets special comments. These comments provide the AlgoTrader Configuration Editor with the information needed to display the key=value data (i.e. the type of data, the widget class it should use for an in-place editor etc.).


#{"type":"String","label":"Last name:"}
lastName = Mustermann

#{"type":"String","label":"First name:"}
surName = Joe

#{"type":"Date","required":"false","label":"Date of birth:"}
dateOfBirth = 1980-01-01    

The AlgoTrader Configuration Editor remembers association of each key=value pair with it's special comment. When the editor saves properties back to the .properties, all key=value pairs are written with their special comments.

Each special comment is essentially a JSON object with three attributes: type, required and label. All three attributes are optional.

The AlgoTrader Configuration Editor also supports separators/subtitles. To add a separator, a special comment needs to be defined in the Source tab as follows:

#{"type":"String","label":"Strategy Name"}


#{"type":"Integer","label":"Maximum Units"}

#{"type":"Integer","label":"Box Length (in Minutes)"}

#{"type":"Separator", "label":"Time Settings"}

#{"type":"Integer","label":"Last Day of Trading (6=Friday)"}

#{"type":"Integer","label":"Latest Hour on last Day to enter a new position"}

#{"type":"Integer","label":"Hour on last Day to terminate the series"}

The content of this properties file will be rendered in the Properties tab as follows:

As described in the Section 10.2.1, “AlgoTrader Perspective” section, it is possible to start a back test of a strategy by right clicking on the strategy and selecting AlgoTrader/Run Strategy (this option is only available for strategies that are not using strategy groups).

Back Tests can also be started from within the AlgoTrader Configuration Editor:

  • For strategies without strategy group definitions there is only one possible configuration that can be back tested. To start a back test please click the "Run" button at the top of the Properties tab.

  • For strategies with strategy group definitions multiple configurations exist which can be back tested separately. To start a back test please select the desired strategy group on the right hand side of the Strategy Group Tab and click the "Run" button.

AlgoTrader provides a custom Esper EPL Syntax Highlighter based on the Colorer Library.

Together with the Eclipse Colorer Plugin it provides the following features:

  • Automatic Code Outlining

  • Pairs/Brace Matching

  • Automatic Code Folding

  • Present different colors for:

    • Reserved Keywords

    • Symbols

    • Comments

    • Literals

    • Numbers


The Syntax Highlighter does not provide Code Completion or Syntax Checking!