Feature: Visualize Indicators

[In development] specification for the development of the feature to visualize indicators while backtesting in Gekko

Objectives

Create a feature to visualize market indicators which is robust enough so that:

• data visualizations can be implemented in indicators,
• data visualizations can be implimented from within a strategy,
• there is default support for plain result.result values in indicators where it has not been implemented,
• graphs can include multiple datasets and styles,
• some properties such as graph height and colors can be overwritten by the strategy,
• full backward compatibility for all platforms

Implementation

Enable Visualization from Strategy

When adding an indicator inside a strategy, the visualization properties can be passed into the addIndicator method.

this.addIndicator("myRSI","RSI",{Object config},{Object visualization})

In the case where default settings are to be used, just a true boolean will enable the visualization. The default value for enableVisualization is false, so unless this is defined there will be no visualization shown.

this.addIndicator("myRSI","RSI",{Object config},{Boolean enableVisualization})

The default properties of the visualization, such as height, color, lineWidth, range, etc, can be over-written from within the strategy when creating the indicator.

this.addIndicator("myPPO","PPO",{Object config},{
    height:200,
    histogram:{
        colors:["#00ff00","#ff0000"]
    }
})

Implement Visualization in Indicator

Support for default result.result values can be added for all indicators, though more sophisticated indicators can optionally implement a visualization which includes multiple datasets drawn in different styles on the same graph.

Inside the constructor method of the indicator, the visualization and datasets are defined:

this.viz = new Visualization({
	location: "subgraph", // subgraph / primary
	title: "PPO"
})
this.viz.addDataset({
	name:"histogram",
	type:"bars",
	range:[100,0],
	colors:["#00ff00","#ff0000"]
})
this.viz.addDataset({
	name:"long",
	type:"line",
	range:false,
})
this.viz.addDataset({
	name:"short",
	type:"line",
	range:false,
})

Then in the update method of the indicator, the datapoints are added. Values are automatically mapped to the simulated time of the current tick.

this.viz.addDatapoint("histogram",{
	result:0, // value to chart
	color:0 // color index
})
this.viz.addDatapoint("long",{
	result:0
})
this.viz.addDatapoint("short",{
	result:0
})

Data Model

In the Vue frontend application, there is a chart data model at: Root > App > Backtester > Result > ResultSummary > Chart

The chart object has a data property inside of it, which looks like this:

<chart>.data:{
  candles:{},
  visualizations:{},
  report:{},
  roundtrips:{},
  trades:{}
}

Visualizations Object

{
  primary:[{...Object dataset}], // contains indicators which are drawn on the main chart
  subgraphs:[{...Object subgraph}] // contains sub charts which are drawn below in lister order
}

Subgraph Object

Object subgraph:{
  title:"Stoch RSI",
  name:"stochRSI",
  height: 200,
  datasets:[{...Object dataset}]
}

Dataset Object

Object dataset:{
  type:"bars",
  name:"histogram",
  range:[],
  colors:[],
  datapoints:[{...Object datapoint}]
}

Properties

• type : One of a set of compatible D3 graph types
• name : The name/identifier of the dataset
• range : Array of min/max values ie. [0,100], or for auto-scale set to false
• colors : (optional) Colors to be selected by datapoints in the set by index

Datapoint Object

Object datapoint:{
  result: 0,
  date: {Object moment},
  color: 0
}