Technical Indicators in JQuery Chart widget

EjChart control supports 10 types of technical indicators.

Bind data to render the indicator

You can bind the series dataSource to the indicator by setting the specific series name to the indicator by using the indicators.seriesName property.

  • javascript
  • $("#container").ejChart({
                  //  ...
                  //Initializing Series
                  series:[{
                      dataSource: chartData,
                      xName: "xDate",
                      high: "High",
                      low: "Low",
                      open: "Open",
                      close: "Close", 
                      //Set name to series
                      name: 'Hilo',
                      //  ...
                }],
    
                //Initializing Indicators    
                indicators: [{
                    //Set Hilo series dataSource to indicator using seriesName
                    seriesName: "Hilo",
                    //  ...
    	     }],
                //  ...
         });

    Also, you can add data to the indicator directly by using the dataSource option of the indicator.

  • javascript
  • $("#container").ejChart({
                //  ...
                //Initializing Indicators    
                indicators: [{
                       //Add dataSource to indicator directly
                        dataSource: chartData,
                        xName: "xDate",
                        high: "High",
                        low: "Low",
                        open: "Open",
                        close: "Close",                
                        //  ...
    	       }],
                //  ...
         });

    Indicator Types

    Accumulation Distribution

    To create an Accumulation Distribution indicator, set the indicators.type as “accumulationdistribution”. Accumulation Distribution require ‘volume’ field additionally with the dataSource to calculate the signal line.

  • javascript
  • $("#container").ejChart({
                 // Initializing Series
                  series:[{
                           name: "Hilo",
                           dataSource: chartData,
                           xName: "xDate",
                           high: "High",
                           low: "Low",
                           open: "Open",
                           close: "Close",
                           //Add additional volume field to data source for accumulation distribution
                           volume: "Volume",
                           //  ...
                       }],
                   //Initializing Indicators    
                   indicators: [{
                         seriesName: "Hilo",
                         //Set indicator type
                         type: "accumulationdistribution", 
                         //  ...
    	        }],
                // ...   
            });

    Accumulation Distribution

    Click here to view the Accumulation Distribution indicator online demo sample.

    Average True Range (ATR)

    You can create an ATR indicator by setting the indicators.type as “atr” in the indicators.

  • javascript
  • $("#container").ejChart({
                // ...
                //Initializing Indicators    
                indicators: [{
                     //Set indicator type
                     type: "atr", 
                     //  ...
    	      }],
                // ...   
            });

    ATR

    Click here to view the ATR indicator online demo sample.

    Bollinger Band

    Bollinger Band indicator is created by setting the indicators.type as “bollingerband”. It contains three lines, namely upper band, lower band and signal line. Bollinger Band default value of the period is 14 and standardDeviations is 2.

  • javascript
  • $("#container").ejChart({
                 // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: " bollingerband", 
                       //  ...
    	         }],
                // ...   
            });

    Bollinger Band

    Click here to view the Bollinger Band indicator online demo sample.

    Exponential Moving Average (EMA)

    To render an EMA indicator, you have to set the indicators.type as “ema”.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "ema", 
                       //  ...
    	         }],
                // ...   
            });

    EMA

    Click here to view the EMA indicator online demo sample.

    Momentum

    Momentum Technical indicator is created by setting the indicators.type as “momentum”. The momentum indicator renders two lines, namely upper band and signal line. Upper band always rendered at the value 100 and the signal line is calculated based on the momentum of the data.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "momentum", 
                       //  ...
    	         }],
                // ... 
            });

    Momentum

    Click here to view the Momentum indicator online demo sample.

    Moving Average Convergence Divergence (MACD)

    To render an MACD indicator, you have to set the indicators.type as “macd”. MACD indicator contains MACD line, Signal line and Histogram column. Histogram is used to differentiate MACD and signal line. The color and width of MACD Line can be customized using fill and width property.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "macd", 
                       //  ...
    	         }],
                // ...  
            });

    MACD

    Click here to view the MACD indicator online demo sample.

    macdType

    By using the macdType enumeration property, you can change the MACD rendering as line, histogram or both.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       type: "macd", 
                       //Set MACD draw type
                       macdType: "histogram", 
                       //  ...
    	         }],
                // ...  
            });

    MACD Type

    Relative Strength Index (RSI)

    To render the RSI indicator, set the indicators.type as “rsi”. It contains three lines, namely upper band, lower band and signal line. Upper and lower band always render at value 70 and 30 respectively and signal line is calculated based on the RSI formula.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "rsi",
                       //  ...
    	         }],
                // ...
            });

    RSI

    Click here to view the RSI indicator online demo sample.

    Simple Moving Average (SMA)

    To render the SMA indicator, you should specify the indicators.type as “sma”.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "sma",
                       //  ...
    	         }],
                // ...
            });

    SMA

    Click here to view the SMA indicator online demo sample.

    Stochastic

    For the Stochastic indicator, you need to set the indicators.type as “stochastic”. The Stochastic indicator renders four lines namely, upper line,
    lower line, stochastic line and the signal line. Upper line always rendered at value 80 and the lower line is rendered at value 20. Stochastic and Signal Lines are calculated based on the stochastic formula.

  • javascript
  • $("#container").ejChart({
                // ...            
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "stochastic",
                       //  ...
    	         }],
                // ...  
            });

    Stochastic

    Click here to view the stochastic indicator online demo sample.

    Triangular Moving Average (TMA)

    To render the TMA indicator, you should specify the indicators.type as “tma”.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //Set indicator type
                       type: "tma",
                       //  ...
    	         }],
                // ...  
            });

    TMA

    Click here to view the TMA indicator online demo sample.

    Enable Tooltip

    To display the indicator tooltip, use visible option of the indicators-tooltip.
    Also, you can change and customize the tooltip color, border, format and font properties similar to the series tooltip.

  • javascript
  • $("#container").ejChart({
                // ...             
                 //Initializing Indicators    
                  indicators: [{
                       //  ...
                       tooltip: {
                            //Enable tooltip for indicator
                            visible: true
                          },
    	         }],
                // ...  
            });

    Tooltip

    Indicators dPeriod

    The dPeriod value for stochastic indicator.

  • javascript
  • $("#container").ejChart({
               indicators :[{ dPeriod : 4}]
    
            });

    Indicators enableAnimation

    Enables/disables the enableAnimation

  • javascript
  • $("#container").ejChart({
                indicators :[{ enableAnimation :  true}]
    
            });

    Indicators AnimationDuration

    Specifies animationDuration for indicator rendering.

  • javascript
  • $("#container").ejChart({
                 indicators :[{ animationDuration:2000}]
    
            });

    Indicators fill

    [fill] (../api/ejchart#members:indicators-fill) color of the technical indicator.

  • javascript
  • $("#container").ejChart({
                     indicators :[{ fill : "#ff0000"}]
    
            });

    Indicators histogram

    Options to customize the [histogram] (../api/ejchart#members:indicators-histogram)in MACD indicator.

    Indicators histogram border

    Options to customize the histogram [border] (../api/ejchart#members:indicators-histogram-border) in MACD indicator.

    Indicators histogram border color

    Color of the histogram border in MACD indicator.

  • javascript
  • $("#container").ejChart({
                    indicators :[{ histogram : {border: {color: "#ff0000"}}}]
    
            });

    Indicators histogram border width

    Controls the width of histogram border line in MACD indicator.

  • javascript
  • $("#container").ejChart({
                  indicators :[{ histogram : {border: {width: 2}}}]
    
            });

    Indicators histogram border fill

    fill color of histogram columns in MACD indicator.

  • javascript
  • $("#container").ejChart({
                    indicators :[{ histogram : {fill: "#ff0000"}}]
    
            });

    Indicators histogram border opacity

    Opacity of histogram columns in MACD indicator.

  • javascript
  • $("#container").ejChart({
                 indicators :[{ histogram : {opacity: 0.5}}]
    
            });

    Indicators kPeriod

    Specifies the kPeriod in stochastic indicator.

  • javascript
  • $("#container").ejChart({
    
        indicators :[{ kPeriod : 4}]
                            
    });

    Indicators longPeriod

    Specifies the long period in MACD indicator.

  • javascript
  • $("#container").ejChart({
    
        indicators :[{ longPeriod :  14"}]
                            
    });

    Indicators lowerLine

    Options to customize the lower line in indicators.

    Indicators lowerLine fill

    Color of lower line

  • javascript
  • $("#container").ejChart({
    
       
         indicators :[{ lowerLine : {fill: "#ff0000"}}]
                            
    });

    Indicators lowerLine width

    Width of the lower line.

  • javascript
  • $("#container").ejChart({
    
       
        indicators :[{ lowerLine : {width: 3}}]
                            
    });

    Indicators Period

    Specifies period value in indicator.

  • javascript
  • $("#container").ejChart({
    
       
          indicators :[{ period : 20}]
                            
    });

    Indicators PeriodLine

    Options to customize the periodLinein indicators.

    Indicators PeriodLine fill

    fill color of period line in indicator.

  • javascript
  • $("#container").ejChart({
    
       
         indicators :[{ periodLine : {fill: "#ff0000"}}]
                            
    });

    Indicators PeriodLine width

    Widthof the period line in indicators.

  • javascript
  • $("#container").ejChart({
    
       
         indicators :[{ periodLine : {width: 3}}]
                            
    });

    Indicators Short Period

    Specifies the shortPeriodin MACD indicator.

  • javascript
  • $("#container").ejChart({
    
       
         indicators :[{ shortPeriod :  14"}]
                            
    });

    Indicators standardDeviations

    Specifies the standardDeviations value for Bollinger band indicator.

  • javascript
  • $("#container").ejChart({
    
       
       indicators :[{ standardDeviations : 3}]
                            
    });

    Indicators tooltip

    Options to customize the [tooltip] (../api/ejchart#members:indicators-tooltip)

    Indicators tooltip border color

    Border color of [indicator tooltip] (../api/ejchart#members:indicators-tooltip-border-color)

  • javascript
  • $("#container").ejChart({
    
       
       indicators :[{ tooltip :{border : { color :"#0000ff"}} }]
                            
    });

    Indicators tooltip border width

    [Border width] (../api/ejchart#members:indicators-tooltip-border-width)of indicator tooltip.

  • javascript
  • $("#container").ejChart({
    
       
      indicators :[{ tooltip :{border : { width :2}} }]
                            
    });

    Indicators tooltip duration

    Specifies the animation duration of indicator tooltip.

  • javascript
  • $("#container").ejChart({
    
       
      indicators :[{ tooltip :{duration : "300ms"}}]
                            
    });

    Indicators tooltip enableAnimation

    Enables/disables the tooltip animation

  • javascript
  • $("#container").ejChart({
    
       
      indicators :[{ tooltip :{enableAnimation : false}}]
                            
    });

    Indicators tooltip Opacity

    [Opacity] (../api/ejchart#members:indicators-tooltip-opacity)of indicator tooltip.

  • javascript
  • $("#container").ejChart({
    
       
      indicators :[{ tooltip :{opacity : 0.5}}]
                            
    });

    Indicators tooltip visible

    [visible] (../api/ejchart#members:indicators-tooltip-visible) property Controls the visibility of indicator tooltip.

  • javascript
  • $("#container").ejChart({
    
       
      indicators :[{ tooltip :{visible : true}}]
                            
    });

    Indicators trigger

    trigger value of MACD indicator.

  • javascript
  • $("#container").ejChart({
    
       
     indicators :[{ trigger :  14}]
                            
    });

    Indicators UpperLine

    Options to customize the upper line in indicators

    Indicators UpperLine fill

    Fill color of the upper line in indicators

  • javascript
  • $("#container").ejChart({
    
       
     indicators :[{ upperLine : {fill: "#ff0000"}}]
                            
    });

    Indicators UpperLine width

    Width of the upperLine in indicators.

  • javascript
  • $("#container").ejChart({
    
       
    indicators :[{ upperLine : {width: 3}}]
                            
    });

    Indicators width

    Width of the indicator line.

  • javascript
  • $("#container").ejChart({
    
       
     indicators :[{ width :  3}]
                            
    });

    Indicators xAxisName

    Name of the horizontal axis used for indicator. xAxisName property is used when x axis name is not specified.

  • javascript
  • $("#container").ejChart({
    
       
    indicators :[{ xAxisName :  "xAxis"}]
                            
    });

    Indicators yAxisName

    Name of the vertical axis used for indicator. yAxisNameproperty is used when y axis name is not specified

  • javascript
  • $("#container").ejChart({
    
       
    indicators :[{ yAxisName :  "yAxis"}]
                            
    });