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
• 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 colors are able to be overwritten by the strategy

Implementation

Enable from within 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.

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

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

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

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:{},
  indicatorResults:{},
  report:{},
  roundtrips:{},
  trades:{}
}

IndicatorResults Object

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

SubChart Object

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

Dataset Object

Object dataset:{
  type:"bars",
  name:"histogram",
  range:[],
  colors:[],
  data:[{...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