Trend Lines
Trend lines are used to represent trends in data and to examine the problems of prediction.
The following example indicates moving average trend based on the past prices. User can change the
period and type of the moving average line.
-
period: the calculation period of the moving average line.
-
type: the calculation type of the moving average line. This includes Simple, Weighted, Exponential and Triangular types.
<wj-financial-chart [header]="header"
[itemsSource]="data"
chartType="Line"
[symbolSize]="4"
bindingX="date">
<wj-financial-chart-series name="Close" binding="close"></wj-financial-chart-series>
<wj-flex-chart-moving-average binding="close"
[name]="movingAverageName"
[period]="movingAveragePeriod"
[type]="movingAverageType">
</wj-flex-chart-moving-average>
<wj-flex-chart-legend position="Top"></wj-flex-chart-legend>
<wj-flex-chart-axis wjProperty="axisY" position="Right"></wj-flex-chart-axis>
</wj-financial-chart>
<dl class="dl-horizontal">
<dt>Period</dt>
<dd>
<wj-input-number class="period" [value]="2" #inputPeriod (valueChanged)="periodChanged(inputPeriod)"
[min]="2"
[max]="data.length - 1"
[step]="1"
format="n0">
</wj-input-number>
</dd>
<dt>Type</dt>
<dd>
<wj-menu [(value)]="movingAverageType" header="Moving Average Type" #maMenu (itemClicked)="changeType(maMenu)">
<wj-menu-item value="Simple">Simple</wj-menu-item>
<wj-menu-item value="Weighted">Weighted</wj-menu-item>
<wj-menu-item value="Exponential">Exponential</wj-menu-item>
<wj-menu-item value="Triangular">Triangular</wj-menu-item>
</wj-menu>
</dd>
</dl>
import * as wjcInput from 'wijmo/wijmo.input';
import { Component, ViewChild, Inject} from '@angular/core';
import { DataSvc } from './../services/DataSvc';
//TrendLines sample component
@Component({
selector: 'trend-lines-cmp',
templateUrl: 'src/components/TrendLinesCmp.html'
})
export class TrendLinesCmp {
dataSvc: DataSvc;
data: any[];
header: string;
movingAverageName: string;
movingAveragePeriod: number;
movingAverageType: string;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.data = [];
this.dataSvc = dataSvc;
this.setDataSource();
this.header = 'Facebook, Inc. (FB)';
this.movingAveragePeriod = 2;
this.movingAverageType = 'Simple';
this.movingAverageName = 'Simple Moving Average';
}
changeType(maMenu) {
this.movingAverageName = maMenu.selectedValue + ' Moving Average';
}
periodChanged = (input: wjcInput.InputNumber) => {
if (input.value < input.min || input.value > input.max) {
return;
}
this.movingAveragePeriod = input.value;
};
private setDataSource() {
this.dataSvc.getData().subscribe(data => {
this.data = data;
});
}
}
Result (live):
- Period
-
- Type
-
Simple
Weighted
Exponential
Triangular