import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import '@angular/compiler';
import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { WjChartModule } from '@grapecity/wijmo.angular2.chart';
import { WjChartFinanceModule } from '@grapecity/wijmo.angular2.chart.finance';
import { WjChartFinanceAnalyticsModule } from '@grapecity/wijmo.angular2.chart.finance.analytics';
import { DataService } from './app.data';
import * as wjCore from '@grapecity/wijmo';
import * as wjInput from '@grapecity/wijmo.input';
import * as wjChart from '@grapecity/wijmo.chart';
import * as wjFinancialChart from '@grapecity/wijmo.chart.finance';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
data: any[];
tooltip: string;
properties: any;
indicators: any;
selectedIndicator: string;
@ViewChild('theChart', { static: true }) theChart: wjFinancialChart.FinancialChart;
@ViewChild('indicatorChart', { static: true }) iChart: wjFinancialChart.FinancialChart;
//
constructor(@Inject(DataService) private dataService: DataService) {
this.data = dataService.getData();
this.tooltip = '<b>Date:{date:MMM dd}</b><br/>' +
'<table>' +
'<tr><td>high</td><td>{high:c}</td><tr/>' +
'<tr><td>low</td><td>{low:c}</td><tr/>' +
'<tr><td>open</td><td>{open:c}</td><tr/>' +
'<tr><td>close</td><td>{close:c}</td><tr/>' +
'</table>';
this.indicators = dataService.getIndicatorList();
this.selectedIndicator = this.indicators[0].abbreviation;
this.properties = {
// ATR, CCI, RSI, Williams %R
atrPeriod: 14,
cciPeriod: 20,
rsiPeriod: 14,
williamsRPeriod: 14,
// MACD
fastPeriod: 12,
slowPeriod: 26,
smoothingPeriod: 9,
macdStyles: { // named styles
macdLine: {
stroke: '#bfa554'
},
signalLine: {
stroke: '#bf8c54'
}
},
// Fast Stochastic
stochKPeriod: 14,
stochDPeriod: 3,
stochSmoothingPeriod: 1,
stochStyles: { // named styles
kLine: {
stroke: '#eddd46'
},
dLine: {
stroke: '#edb747'
}
}
};
}
//
chartRendered() {
this.iChart.axisX.min = this.theChart.axisX.actualMin;
this.iChart.axisX.max = this.theChart.axisX.actualMax;
}
//
fastSlowPeriodChanged() {
var data = this.data,
props = this.properties,
len, smoothing;
if (data.length <= 0) {
return;
}
len = data.length;
smoothing = props.smoothingPeriod;
props.fastPeriod = wjCore.clamp(props.fastPeriod, 2, Math.abs(len - smoothing));
props.slowPeriod = wjCore.clamp(props.slowPeriod, 2, Math.abs(len - smoothing));
}
//
smoothingPeriodChanged() {
var data = this.data,
props = this.properties,
len, max;
if (data.length <= 0) {
return;
}
len = data.length;
max = Math.max(props.fastPeriod, props.slowPeriod);
props.smoothingPeriod = wjCore.clamp(props.smoothingPeriod, 2, Math.abs(len - max));
}
//
stochKPeriodChanged() {
var data = this.data,
props = this.properties,
len, max;
if (data.length <= 0) {
return;
}
len = data.length;
max = Math.abs(len - props.stochDPeriod);
if (props.stochSmoothingPeriod > 1) {
max -= props.stochSmoothingPeriod;
}
props.stochKPeriod = wjCore.clamp(props.stochKPeriod, 2, max);
}
//
stochDPeriodChanged() {
var data = this.data,
props = this.properties,
len, max;
if (data.length <= 0) {
return;
}
len = data.length;
max = Math.abs(len - props.stochKPeriod);
if (props.stochSmoothingPeriod > 1) {
max -= props.stochSmoothingPeriod;
}
props.stochDPeriod = wjCore.clamp(props.stochDPeriod, 2, max);
}
//
stochSmoothingPeriodChanged(input: wjInput.InputNumber) {
var data = this.data,
props = this.properties,
len, max;
if (data.length <= 0 || input.value <= 1) {
return;
}
len = data.length;
max = Math.abs(len - props.stochKPeriod - props.stochDPeriod);
max = max || 1;
props.stochSmoothingPeriod = wjCore.clamp(input.value, 1, max);
}
//
atrPeriodChanged(input: wjInput.InputNumber) {
if (input.value < input.min || input.value > input.max) {
return;
}
this.properties.atrPeriod = input.value;
}
//
rsiPeriodChanged(input: wjInput.InputNumber) {
if (input.value < input.min || input.value > input.max) {
return;
}
this.properties.rsiPeriod = input.value;
}
//
cciPeriodChanged(input: wjInput.InputNumber) {
if (input.value < input.min || input.value > input.max) {
return;
}
this.properties.cciPeriod = input.value;
}
//
wrPeriodChanged(input: wjInput.InputNumber) {
if (input.value < input.min || input.value > input.max) {
return;
}
this.properties.williamsRPeriod = input.value;
}
}
//
@NgModule({
imports: [WjInputModule, WjChartModule, WjChartFinanceModule, WjChartFinanceAnalyticsModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo FlexChart Financial Indicators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<div id="settingsBody" class="panel-collapse collapse in">
<div class="panel-body">
<!-- Indicator Selector -->
<ul class="list-inline">
<li>
<label>Indicator Type</label>
<wj-combo-box [itemsSource]="indicators"
selectedValuePath="abbreviation"
displayMemberPath="name"
[(selectedValue)]="selectedIndicator">
</wj-combo-box>
</li>
</ul>
<!-- ATR Properties -->
<ul class="list-inline" *ngIf="selectedIndicator === 'atr'">
<li>
<label>Period</label>
<wj-input-number #iptAtrPeriod (valueChanged)="atrPeriodChanged(iptAtrPeriod)"
[value]="14"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.atrPeriod"
[step]="1" format="n0">
</wj-input-number>
</li>
</ul>
<!-- RSI Properties -->
<ul class="list-inline" *ngIf="selectedIndicator === 'rsi'">
<li>
<label>Period</label>
<wj-input-number #iptRsiPeriod (valueChanged)="rsiPeriodChanged(iptRsiPeriod)"
[value]="14"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.rsiPeriod"
[step]="1" format="n0">
</wj-input-number>
</li>
</ul>
<!-- CCI Properties -->
<ul class="list-inline" *ngIf="selectedIndicator === 'cci'">
<li>
<label>Period</label>
<wj-input-number #iptCciPeriod (valueChanged)="cciPeriodChanged(iptCciPeriod)"
[value]="20"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.cciPeriod"
[step]="1" format="n0">
</wj-input-number>
</li>
</ul>
<!-- Williams %R Properties -->
<ul class="list-inline" *ngIf="selectedIndicator === 'williamsR'">
<li>
<label>Period</label>
<wj-input-number #iptWRPeriod (valueChanged)="wrPeriodChanged(iptWRPeriod)"
[value]="14"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.williamsRPeriod"
[step]="1" format="n0">
</wj-input-number>
</li>
</ul>
<!-- MACD & MACD Histogram Properties -->
<ul class="list-inline" *ngIf="selectedIndicator === 'macd'">
<li>
<label>Fast Period</label>
<wj-input-number #fastPeriod
[(value)]="properties.fastPeriod"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.fastPeriod"
[step]="1" format="n0"
(valueChanged)="fastSlowPeriodChanged()">
</wj-input-number>
</li>
<li>
<label>Slow Period</label>
<wj-input-number [(value)]="properties.slowPeriod"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.slowPeriod"
[step]="1" format="n0"
(valueChanged)="fastSlowPeriodChanged()">
</wj-input-number>
</li>
<li>
<label>Signal Smoothing Period</label>
<wj-input-number [(value)]="properties.smoothingPeriod"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.smoothingPeriod"
[step]="1" format="n0"
(valueChanged)="smoothingPeriodChanged()">
</wj-input-number>
</li>
</ul>
<!-- Fast Stochastic Properties -->
<ul class="list-inline" *ngIf="selectedIndicator === 'stoch'">
<li>
<label>K Period</label>
<wj-input-number [(value)]="properties.stochKPeriod"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.stochKPeriod"
[step]="1" format="n0"
(valueChanged)="stochKPeriodChanged()">
</wj-input-number>
</li>
<li>
<label>D Period</label>
<wj-input-number [(value)]="properties.stochDPeriod"
[min]="2" [max]="data.length > 0 ? data.length - 1 : properties.stochDPeriod"
[step]="1" format="n0"
(valueChanged)="stochDPeriodChanged()">
</wj-input-number>
</li>
<li>
<label>Smoothing Period</label>
<wj-input-number #stochSmoothingInput [value]="1"
[min]="1" [max]="data.length > 0 ? data.length - 1 : properties.stochSmoothingPeriod"
[step]="1" format="n0"
(valueChanged)="stochSmoothingPeriodChanged(stochSmoothingInput)">
</wj-input-number>
</li>
</ul>
</div>
</div>
<!-- FinancialChart -->
<wj-financial-chart #theChart [itemsSource]="data" bindingX="date" [palette]="palette" [tooltipContent]="tooltip">
<wj-financial-chart-series binding="close" name="Box Inc"></wj-financial-chart-series>
<wj-flex-chart-legend position="Top"></wj-flex-chart-legend>
<wj-flex-chart-axis wjProperty="axisX" [labelAngle]="0" [axisLine]="true"></wj-flex-chart-axis>
</wj-financial-chart>
<!-- Indicators Chart -->
<wj-financial-chart #indicatorChart [itemsSource]="data" style="height: 200px" bindingX="date" [palette]="palette"
[tooltipContent]="tooltip" rendered="chartRendered()">
<wj-flex-chart-legend position="Bottom"></wj-flex-chart-legend>
<wj-flex-chart-axis wjProperty="axisX" [labelAngle]="0" [axisLine]="true"></wj-flex-chart-axis>
<wj-flex-chart-atr binding="high,low,open,close" name="ATR"
[period]="properties.atrPeriod"
[visibility]="selectedIndicator === 'atr' ? 'Visible' : 'Hidden'">
</wj-flex-chart-atr>
<wj-flex-chart-rsi binding="close" name="RSI"
[period]="properties.rsiPeriod"
[visibility]="selectedIndicator === 'rsi' ? 'Visible' : 'Hidden'">
</wj-flex-chart-rsi>
<wj-flex-chart-cci binding="high,low,open,close" name="CCI"
[period]="properties.cciPeriod"
[visibility]="selectedIndicator === 'cci' ? 'Visible' : 'Hidden'">
</wj-flex-chart-cci>
<wj-flex-chart-williams-r binding="high,low,open,close" name="Williams %R"
[period]="properties.williamsRPeriod"
[visibility]="selectedIndicator === 'williamsR' ? 'Visible' : 'Hidden'">
</wj-flex-chart-williams-r>
<wj-flex-chart-macd binding="close" name="MACD,Signal"
[styles]="properties.macdStyles"
[fastPeriod]="properties.fastPeriod"
[slowPeriod]="properties.slowPeriod"
[smoothingPeriod]="properties.smoothingPeriod"
[visibility]="selectedIndicator === 'macd' ? 'Visible' : 'Hidden'">
</wj-flex-chart-macd>
<wj-flex-chart-macd-histogram binding="close" name="MACD Histogram"
[fastPeriod]="properties.fastPeriod"
[slowPeriod]="properties.slowPeriod"
[smoothingPeriod]="properties.smoothingPeriod"
[visibility]="selectedIndicator === 'macd' ? 'Visible' : 'Hidden'">
</wj-flex-chart-macd-histogram>
<wj-flex-chart-stochastic binding="high,low,open,close" name="%K,%D"
[kPeriod]="properties.stochKPeriod"
[dPeriod]="properties.stochDPeriod"
[smoothingPeriod]="properties.stochSmoothingPeriod"
[visibility]="selectedIndicator === 'stoch' ? 'Visible' : 'Hidden'"
[styles]="properties.stochStyles">
</wj-flex-chart-stochastic>
</wj-financial-chart>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
getIndicatorList() {
return [
{ name: 'Average True Range', abbreviation: 'atr' },
{ name: 'Relative Strength Index', abbreviation: 'rsi' },
{ name: 'Commodity Channel Index', abbreviation: 'cci' },
{ name: 'Williams %R', abbreviation: 'williamsR' },
{ name: 'MACD', abbreviation: 'macd' },
{ name: 'Stochastic', abbreviation: 'stoch' }
];
}
//
getData() {
return [
{ "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 },
{ "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 },
{ "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 },
{ "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 },
{ "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 },
{ "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 },
{ "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 },
{ "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 },
{ "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 },
{ "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 },
{ "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 },
{ "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 },
{ "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 },
{ "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 },
{ "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 },
{ "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 },
{ "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 },
{ "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 },
{ "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 },
{ "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 },
{ "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 },
{ "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 },
{ "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 },
{ "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 },
{ "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 },
{ "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 },
{ "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 },
{ "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 },
{ "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 },
{ "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 },
{ "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 },
{ "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 },
{ "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 },
{ "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 },
{ "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 },
{ "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 },
{ "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 },
{ "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 },
{ "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 },
{ "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 },
{ "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 },
{ "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 },
{ "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 },
{ "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 },
{ "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 },
{ "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 },
{ "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 },
{ "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 },
{ "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 },
{ "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 },
{ "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 },
{ "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 },
{ "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 },
{ "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 },
{ "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 },
{ "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 },
{ "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 },
{ "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 },
{ "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 },
{ "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 },
{ "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 },
{ "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 },
{ "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 },
{ "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 },
{ "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 },
{ "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 },
{ "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 },
{ "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 },
{ "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 },
{ "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 },
{ "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 },
{ "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 },
{ "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 },
{ "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 },
{ "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 },
{ "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 },
{ "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 },
{ "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 },
{ "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 },
{ "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 },
{ "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 },
{ "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 },
{ "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 },
{ "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 },
{ "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 },
{ "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 },
{ "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 }
];
}
}
.wj-flexchart {
height: 300px;
}
body {
margin-bottom: 24pt;
}
(function (global) {
SystemJS.config({
transpiler: './plugin-typescript.js',
typescriptOptions: {
"target": "ES2022",
"module": "system",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
},
baseURL: 'node_modules/',
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'systemjs-plugin-css' }
},
paths: {
// paths serve as alias
'npm:': ''
},
packageConfigPaths: [
'/node_modules/*/package.json',
"/node_modules/@angular/*/package.json",
"/node_modules/@grapecity/*/package.json"
],
map: {
'core-js': 'https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js',
'typescript': 'https://cdnjs.cloudflare.com/ajax/libs/typescript/5.2.2/typescript.min.js',
"rxjs": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js",
'systemjs-plugin-css': 'https://cdn.jsdelivr.net/npm/systemjs-plugin-css@0.1.37/css.js',
'@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js',
'@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js',
'@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles',
'@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures',
'@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js',
'@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js',
'@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js',
'@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js',
'@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js',
'@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js',
'@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js',
'@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js',
'@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js',
'@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js',
'@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js',
'@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js',
'@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js',
'@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js',
'@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js',
'@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js',
'@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js',
'@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js',
'@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js',
'@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js',
'@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js',
'@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js',
'@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js',
'@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js',
'@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js',
'@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js',
'@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js',
'@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js',
'@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js',
'@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js',
'@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js',
'@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js',
'@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js',
'@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js',
'@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js',
'@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js',
'@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js',
'@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js',
'@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js',
'@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js',
'@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js',
'@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js',
"@grapecity/wijmo.angular2.chart.analytics": "npm:@grapecity/wijmo.angular2.chart.analytics/index.js",
"@grapecity/wijmo.angular2.chart.animation": "npm:@grapecity/wijmo.angular2.chart.animation/index.js",
"@grapecity/wijmo.angular2.chart.annotation": "npm:@grapecity/wijmo.angular2.chart.annotation/index.js",
"@grapecity/wijmo.angular2.chart.finance.analytics": "npm:@grapecity/wijmo.angular2.chart.finance.analytics/index.js",
"@grapecity/wijmo.angular2.chart.finance": "npm:@grapecity/wijmo.angular2.chart.finance/index.js",
"@grapecity/wijmo.angular2.chart.hierarchical": "npm:@grapecity/wijmo.angular2.chart.hierarchical/index.js",
"@grapecity/wijmo.angular2.chart.interaction": "npm:@grapecity/wijmo.angular2.chart.interaction/index.js",
"@grapecity/wijmo.angular2.chart.radar": "npm:@grapecity/wijmo.angular2.chart.radar/index.js",
'@grapecity/wijmo.angular2.chart.map': 'npm:@grapecity/wijmo.angular2.chart.map/index.js',
"@grapecity/wijmo.angular2.chart": "npm:@grapecity/wijmo.angular2.chart/index.js",
"@grapecity/wijmo.angular2.core": "npm:@grapecity/wijmo.angular2.core/index.js",
"@grapecity/wijmo.angular2.gauge": "npm:@grapecity/wijmo.angular2.gauge/index.js",
"@grapecity/wijmo.angular2.grid.detail": "npm:@grapecity/wijmo.angular2.grid.detail/index.js",
"@grapecity/wijmo.angular2.grid.filter": "npm:@grapecity/wijmo.angular2.grid.filter/index.js",
"@grapecity/wijmo.angular2.grid.grouppanel": "npm:@grapecity/wijmo.angular2.grid.grouppanel/index.js",
"@grapecity/wijmo.angular2.grid.search": "npm:@grapecity/wijmo.angular2.grid.search/index.js",
"@grapecity/wijmo.angular2.grid.multirow": "npm:@grapecity/wijmo.angular2.grid.multirow/index.js",
"@grapecity/wijmo.angular2.grid.sheet": "npm:@grapecity/wijmo.angular2.grid.sheet/index.js",
'@grapecity/wijmo.angular2.grid.transposed': 'npm:@grapecity/wijmo.angular2.grid.transposed/index.js',
'@grapecity/wijmo.angular2.grid.transposedmultirow': 'npm:@grapecity/wijmo.angular2.grid.transposedmultirow/index.js',
"@grapecity/wijmo.angular2.grid": "npm:@grapecity/wijmo.angular2.grid/index.js",
"@grapecity/wijmo.angular2.input": "npm:@grapecity/wijmo.angular2.input/index.js",
"@grapecity/wijmo.angular2.olap": "npm:@grapecity/wijmo.angular2.olap/index.js",
"@grapecity/wijmo.angular2.viewer": "npm:@grapecity/wijmo.angular2.viewer/index.js",
"@grapecity/wijmo.angular2.nav": "npm:@grapecity/wijmo.angular2.nav/index.js",
"@grapecity/wijmo.angular2.directivebase": "npm:@grapecity/wijmo.angular2.directivebase/index.js",
'@grapecity/wijmo.angular2.barcode.common': 'npm:@grapecity/wijmo.angular2.barcode.common/index.js',
'@grapecity/wijmo.angular2.barcode.composite': 'npm:@grapecity/wijmo.angular2.barcode.composite/index.js',
'@grapecity/wijmo.angular2.barcode.specialized': 'npm:@grapecity/wijmo.angular2.barcode.specialized/index.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'jszip': 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js',
"@angular/common/http": "https://cdn.jsdelivr.net/npm/@angular/common@16.2.6/fesm2022/http.mjs",
"@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@16.2.6/fesm2022/core.mjs",
"@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/platform-browser@16.2.6/fesm2022/platform-browser.mjs",
"@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@16.2.6/fesm2022/common.mjs",
"@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/compiler@16.2.6/fesm2022/compiler.mjs",
"@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/forms@16.2.6/fesm2022/forms.mjs",
"@angular/localize": "https://cdn.jsdelivr.net/npm/@angular/localize@16.2.6/fesm2022/localize.mjs",
"@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@16.2.6/fesm2022/platform-browser-dynamic.mjs",
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
"./src": {
defaultExtension: 'ts'
},
"node_modules": {
defaultExtension: 'js'
},
wijmo: {
defaultExtension: 'js',
}
}
});
})(this);
