You are viewing documentation for an older version. For current documentation - click here.
Adding trendlines

Trend lines are horizontal lines spanning the chart canvas. They aid in interpretation of data with respect to some pre-determined value. For example, if you are monitoring a stock's price, you can add trend lines to show yesterday's closing price or support/resistance levels.

You can add trend lines/zones to all the data streaming charts in FusionWidgets XT.

For each trend line on the chart, you need to define a <line> element under the <trendLines> element as under:

<trendLines>
  <line startValue="895" color="FF0000" displayvalue="Average"/>
</trendLines>
"trendlines": [
    {
      "line": [
        {
          "startvalue": "895",
          "color": "FF0000",
          "displayvalue": "Average"
        }
      ]
    }
  ]
 
An example
 
Here, we're going to add a trend line to our previous Google Stock Monitor example, indicating previous day's closing value. To do so, you'll have to add the following:
  
<chart caption="Stock Price Monitor" subCaption="Google" dataStreamURL="StockPrice.asp" refreshInterval="60" numberPrefix="$" setAdaptiveYMin="1" xAxisName="Time" showRealTimeValue="1" labelDisplay="Rotate" slantLabels="1">
  <categories/>
  <dataset seriesName="Google" showValues="0"/>
  <trendlines>
    <line startValue="32.45" displayValue="Opening" color="0372AB"/>
  </trendlines>
  <styles>
    <definition>
      <style type="font" name="captionFont" size="14"/>
    </definition>
    <application>
      <apply toObject="Realtimevalue" styles="captionFont"/>
    </application>
  </styles>
</chart>
{
  "chart": {
    "caption": "Stock Price Monitor",
    "subcaption": "Google",
    "datastreamurl": "StockPrice.asp",
    "refreshinterval": "60",
    "numberprefix": "$",
    "setadaptiveymin": "1",
    "xaxisname": "Time",
    "showrealtimevalue": "1",
    "labeldisplay": "Rotate",
    "slantlabels": "1"
  },
  "categories": [
    {}
  ],
  "dataset": [
    {
      "seriesname": "Google",
      "showvalues": "0"
    }
  ],
  "trendlines": [
    {
      "line": [
        {
          "startvalue": "32.45",
          "displayvalue": "Opening",
          "color": "0372AB"
        }
      ]
    }
  ],
  "styles": {
    "definition": [
      {
        "type": "font",
        "name": "captionFont",
        "size": "14"
      }
    ],
    "application": [
      {
        "toobject": "Realtimevalue",
        "styles": "captionFont"
      }
    ]
  }
}

Here, we've added a trend line with value (specified as startValue) as 32.45 and given it a label of Opening. Also, we've specified its color.

When you now run the chart, you'll see the trend line as under. Since the chart has no data initially, therefore the chart limits are 0-100.

 
However, when real time feeds come in and chart limits adjust to the same, the trend lines also automatically acquire new positions, as shown under:
 
 
During real-time update of the chart, if any trend line values fall out of chart axis limits, they do not show up on the chart. However, if the charts limits later adjust to accommodate the trend line values, they will then automatically re-appear.
 
Creating slanted trend lines

The data-streaming charts also allow you to create slanted trend lines by setting:

<line startValue='33' endValue='34.3' displayValue='Prediction' color='FF5904' dashed='1'/>
"line": [
        {
          "startvalue": "33",
          "startvalue": "34.3",
          "displayvalue": "Prediction",
          "color": "FF5904",
          "dashed": "1" 
        }
      ]

As you can see here, we've specified both the startValue and endValue attributes for the trend line. The values specified for these attributes should be within the limits of chart axis.

The above trend line will result in something as under:

 
Creating trend zones

You can also create trend zones by setting:

<line startValue='32.7' endValue='34.3' displayValue='Sell' isTrendZone='1' alpha='15' color='FF5904'/>
"line": [
        {
          "startvalue": "32.7",
          "startvalue": "34.3",
          "displayvalue": "Sell",
          "istrendzone": "1",
          "alpha": "15",    
          "color": "FF5904"
           
        }
      ]

For a trend zone, you need to specify both the startValue and endValue. Additionally, you need to set isTrendZone='1'.

This will result in something as under: