import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import '@angular/compiler';
import { Component, Inject, enableProdMode, NgModule, AfterViewInit, 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 { WjChartInteractionModule } from '@grapecity/wijmo.angular2.chart.interaction';
import { DataService } from './app.data';
import * as wjChart from '@grapecity/wijmo.chart';
import * as wjChartInteraction from '@grapecity/wijmo.chart.interaction';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent implements AfterViewInit {
data: any[];
mouseAction: string;
interactiveAxes: string;
resetDisabled: boolean;
isTouch: boolean;
@ViewChild('theChart', { static: true }) theChart: wjChart.FlexChart;
@ViewChild('chartGestures', { static: true }) chartGestures: wjChartInteraction.ChartGestures;
//
constructor(@Inject(DataService) private dataService: DataService) {
this.data = dataService.getData();
this.mouseAction = 'Zoom';
this.interactiveAxes = 'XY';
this.isTouch = navigator.userAgent.match(/iPad/i) != null || /Android/i.test(navigator.userAgent);
setTimeout(() => {
this.chartGestures.posX = 0.5;
this.chartGestures.posY = 0.5;
this.chartGestures.scaleX = 0.5;
this.chartGestures.scaleY = 0.5;
}, 100);
}
//
ngAfterViewInit() {
this._disableBtn(200);
}
//
resetAxes() {
if (this.chartGestures) {
this.chartGestures.reset();
}
this._disableBtn();
}
//
rangeChanged() {
this.resetDisabled = false;
}
//
private _disableBtn(time?: number) {
window.setTimeout(() => {
this.resetDisabled = true;
}, time || 20);
}
}
//
@NgModule({
imports: [WjInputModule, WjChartModule, WjChartInteractionModule, 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 Zooming and Panning</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 class="form-group">
<wj-flex-chart #theChart [itemsSource]="data" bindingX="date" chartType="Candlestick">
<wj-flex-chart-series binding="high,low,open,close" name="Alphabet Inc" [symbolSize]="4">
</wj-flex-chart-series>
<wj-flex-chart-legend position="None"></wj-flex-chart-legend>
<wj-flex-chart-axis wjProperty="axisX" [axisLine]="false" (rangeChanged)="rangeChanged()">
</wj-flex-chart-axis>
<wj-flex-chart-axis wjProperty="axisY" (rangeChanged)="rangeChanged()"></wj-flex-chart-axis>
<wj-flex-chart-gestures #chartGestures [interactiveAxes]="interactiveAxes" [mouseAction]="mouseAction">
</wj-flex-chart-gestures>
</wj-flex-chart>
<wj-menu *ngIf="!isTouch" [(value)]="mouseAction" header="Mouse Action">
<wj-menu-item value="Zoom">Zoom</wj-menu-item>
<wj-menu-item value="Pan">Pan</wj-menu-item>
</wj-menu>
<wj-menu [(value)]="interactiveAxes" header="Interactive Axes">
<wj-menu-item value="X">X</wj-menu-item>
<wj-menu-item value="Y">Y</wj-menu-item>
<wj-menu-item value="XY">XY</wj-menu-item>
</wj-menu>
<button id="btnReset" class="btn btn-default" (click)="resetAxes()" [disabled]="resetDisabled">Reset
Zoom</button>
</div>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
getData() {
return [
{ date: new Date(2017, 2, 23), open: 841.39, high: 841.69, low: 833, close: 839.65 },
{ date: new Date(2017, 2, 22), open: 849.48, high: 855.35, low: 847, close: 849.8 },
{ date: new Date(2017, 2, 21), open: 870.06, high: 873.47, low: 847.69, close: 850.14 },
{ date: new Date(2017, 2, 20), open: 869.48, high: 870.34, low: 864.66, close: 867.91 },
{ date: new Date(2017, 2, 17), open: 873.68, high: 874.42, low: 868.37, close: 872.37 },
{ date: new Date(2017, 2, 16), open: 870.53, high: 872.71, low: 867.52, close: 870 },
{ date: new Date(2017, 2, 15), open: 867.94, high: 869.88, low: 861.3, close: 868.39 },
{ date: new Date(2017, 2, 14), open: 863.75, high: 867.58, low: 860.13, close: 865.91 },
{ date: new Date(2017, 2, 13), open: 860.83, high: 867.13, low: 860.82, close: 864.58 },
{ date: new Date(2017, 2, 10), open: 862.7, high: 864.23, low: 857.61, close: 861.4 },
{ date: new Date(2017, 2, 9), open: 853.69, high: 860.71, low: 852.67, close: 857.84 },
{ date: new Date(2017, 2, 8), open: 853.12, high: 856.93, low: 851.25, close: 853.64 },
{ date: new Date(2017, 2, 7), open: 847.26, high: 853.33, low: 845.52, close: 851.15 },
{ date: new Date(2017, 2, 6), open: 846.86, high: 848.94, low: 841.17, close: 847.27 },
{ date: new Date(2017, 2, 3), open: 848.94, high: 850.82, low: 844.7, close: 849.08 },
{ date: new Date(2017, 2, 2), open: 856.31, high: 856.49, low: 848.72, close: 849.85 },
{ date: new Date(2017, 2, 1), open: 851.38, high: 858, low: 849.02, close: 856.75 },
{ date: new Date(2017, 1, 28), open: 847.35, high: 848.83, low: 841.44, close: 844.93 },
{ date: new Date(2017, 1, 27), open: 844.95, high: 850.67, low: 843.01, close: 849.67 },
{ date: new Date(2017, 1, 24), open: 847.65, high: 848.36, low: 842.96, close: 847.81 },
{ date: new Date(2017, 1, 23), open: 851.08, high: 852.62, low: 842.5, close: 851 },
{ date: new Date(2017, 1, 22), open: 848, high: 853.79, low: 846.71, close: 851.36 },
{ date: new Date(2017, 1, 21), open: 847.99, high: 852.2, low: 846.55, close: 849.27 },
{ date: new Date(2017, 1, 17), open: 841.31, high: 846.94, low: 839.78, close: 846.55 },
{ date: new Date(2017, 1, 16), open: 838.5, high: 842.69, low: 837.26, close: 842.17 },
{ date: new Date(2017, 1, 15), open: 838.81, high: 841.77, low: 836.22, close: 837.32 },
{ date: new Date(2017, 1, 14), open: 839.77, high: 842, low: 835.83, close: 840.03 },
{ date: new Date(2017, 1, 13), open: 837.7, high: 841.74, low: 836.25, close: 838.96 },
{ date: new Date(2017, 1, 10), open: 832.95, high: 837.15, low: 830.51, close: 834.85 },
{ date: new Date(2017, 1, 9), open: 831.73, high: 831.98, low: 826.5, close: 830.06 },
{ date: new Date(2017, 1, 8), open: 830.53, high: 834.25, low: 825.11, close: 829.88 },
{ date: new Date(2017, 1, 7), open: 825.5, high: 831.92, low: 823.29, close: 829.23 },
{ date: new Date(2017, 1, 6), open: 820.92, high: 822.39, low: 814.29, close: 821.62 },
{ date: new Date(2017, 1, 3), open: 823.13, high: 826.13, low: 819.35, close: 820.13 },
{ date: new Date(2017, 1, 2), open: 815, high: 824.56, low: 812.05, close: 818.26 },
{ date: new Date(2017, 1, 1), open: 824, high: 824, low: 812.25, close: 815.24 },
{ date: new Date(2017, 0, 31), open: 819.5, high: 823.07, low: 813.4, close: 820.19 },
{ date: new Date(2017, 0, 30), open: 837.06, high: 837.23, low: 821.03, close: 823.83 },
{ date: new Date(2017, 0, 27), open: 859, high: 867, low: 841.9, close: 845.03 },
{ date: new Date(2017, 0, 26), open: 859.05, high: 861, low: 850.52, close: 856.98 },
{ date: new Date(2017, 0, 25), open: 853.55, high: 858.79, low: 849.74, close: 858.45 },
{ date: new Date(2017, 0, 24), open: 846.98, high: 851.52, low: 842.28, close: 849.53 },
{ date: new Date(2017, 0, 23), open: 831.61, high: 845.54, low: 828.7, close: 844.43 },
{ date: new Date(2017, 0, 20), open: 829.09, high: 829.24, low: 824.6, close: 828.17 },
{ date: new Date(2017, 0, 19), open: 829, high: 833, low: 823.96, close: 824.37 },
{ date: new Date(2017, 0, 18), open: 829.8, high: 829.81, low: 824.08, close: 829.02 },
{ date: new Date(2017, 0, 17), open: 830, high: 830.18, low: 823.2, close: 827.46 },
{ date: new Date(2017, 0, 13), open: 831, high: 834.65, low: 829.52, close: 830.94 },
{ date: new Date(2017, 0, 12), open: 828.38, high: 830.38, low: 821.01, close: 829.53 },
{ date: new Date(2017, 0, 11), open: 826.62, high: 829.9, low: 821.47, close: 829.86 },
{ date: new Date(2017, 0, 10), open: 827.07, high: 829.41, low: 823.14, close: 826.01 },
{ date: new Date(2017, 0, 9), open: 826.37, high: 830.43, low: 821.62, close: 827.18 },
{ date: new Date(2017, 0, 6), open: 814.99, high: 828.96, low: 811.5, close: 825.21 },
{ date: new Date(2017, 0, 5), open: 807.5, high: 813.74, low: 805.92, close: 813.02 },
{ date: new Date(2017, 0, 4), open: 809.89, high: 813.43, low: 804.11, close: 807.77 },
{ date: new Date(2017, 0, 3), open: 800.62, high: 811.44, low: 796.89, close: 808.01 },
{ date: new Date(2016, 11, 30), open: 803.21, high: 803.28, low: 789.62, close: 792.45 },
{ date: new Date(2016, 11, 29), open: 802.33, high: 805.75, low: 798.14, close: 802.88 },
{ date: new Date(2016, 11, 28), open: 813.33, high: 813.33, low: 802.44, close: 804.57 },
{ date: new Date(2016, 11, 27), open: 808.68, high: 816, low: 805.8, close: 809.93 },
{ date: new Date(2016, 11, 23), open: 808.01, high: 810.97, low: 805.11, close: 807.8 },
{ date: new Date(2016, 11, 22), open: 809.1, high: 811.07, low: 806.03, close: 809.68 },
{ date: new Date(2016, 11, 21), open: 815.72, high: 815.72, low: 805.1, close: 812.2 },
{ date: new Date(2016, 11, 20), open: 813.37, high: 816.49, low: 811, close: 815.2 },
{ date: new Date(2016, 11, 19), open: 809.28, high: 816.22, low: 804.5, close: 812.5 },
{ date: new Date(2016, 11, 16), open: 818.31, high: 819.2, low: 808.12, close: 809.84 },
{ date: new Date(2016, 11, 15), open: 817.36, high: 823, low: 812, close: 815.65 },
{ date: new Date(2016, 11, 14), open: 815.92, high: 824.26, low: 812.78, close: 817.89 },
{ date: new Date(2016, 11, 13), open: 812.39, high: 824.3, low: 811.94, close: 815.34 },
{ date: new Date(2016, 11, 12), open: 804.82, high: 811.35, low: 804.53, close: 807.9 },
{ date: new Date(2016, 11, 9), open: 799.3, high: 809.95, low: 798.05, close: 809.45 },
{ date: new Date(2016, 11, 8), open: 792.95, high: 799, low: 787.9, close: 795.17 },
{ date: new Date(2016, 11, 7), open: 779.95, high: 792, low: 773.53, close: 791.47 },
{ date: new Date(2016, 11, 6), open: 780.19, high: 785.28, low: 773.32, close: 776.18 },
{ date: new Date(2016, 11, 5), open: 770, high: 780, low: 766.97, close: 778.22 },
{ date: new Date(2016, 11, 2), open: 761.9, high: 770.5, low: 759, close: 764.46 },
{ date: new Date(2016, 11, 1), open: 778.55, high: 778.6, low: 753.36, close: 764.33 },
{ date: new Date(2016, 10, 30), open: 789.1, high: 791.51, low: 773.14, close: 775.88 },
{ date: new Date(2016, 10, 29), open: 788.38, high: 796.44, low: 785.34, close: 789.44 },
{ date: new Date(2016, 10, 28), open: 778.35, high: 799.74, low: 778.1, close: 785.79 },
{ date: new Date(2016, 10, 25), open: 782.61, high: 782.9, low: 778.19, close: 780.23 },
{ date: new Date(2016, 10, 23), open: 789.52, high: 789.52, low: 772.65, close: 779 },
{ date: new Date(2016, 10, 22), open: 788.99, high: 793.77, low: 783.74, close: 785 },
{ date: new Date(2016, 10, 21), open: 778.1, high: 786.55, low: 776.3, close: 784.8 },
{ date: new Date(2016, 10, 18), open: 787.17, high: 791.29, low: 775.35, close: 775.97 },
{ date: new Date(2016, 10, 17), open: 782.5, high: 788.9, low: 779.85, close: 786.16 },
{ date: new Date(2016, 10, 16), open: 770.42, high: 783.5, low: 766.33, close: 779.98 },
{ date: new Date(2016, 10, 15), open: 765.47, high: 780.24, low: 765.22, close: 775.16 },
{ date: new Date(2016, 10, 14), open: 771.76, high: 771.78, low: 743.59, close: 753.22 },
{ date: new Date(2016, 10, 11), open: 776.81, high: 777.29, low: 765.54, close: 771.75 },
{ date: new Date(2016, 10, 10), open: 810, high: 810.06, low: 768.23, close: 780.29 },
{ date: new Date(2016, 10, 9), open: 801.83, high: 811.71, low: 792.04, close: 805.59 },
{ date: new Date(2016, 10, 8), open: 802.03, high: 816.04, low: 799.62, close: 811.98 },
{ date: new Date(2016, 10, 7), open: 794.95, high: 805, low: 792.9, close: 802.03 },
{ date: new Date(2016, 10, 4), open: 771.3, high: 788.48, low: 771, close: 781.1 },
{ date: new Date(2016, 10, 3), open: 784.5, high: 790, low: 778.63, close: 782.19 },
{ date: new Date(2016, 10, 2), open: 806.76, high: 806.76, low: 785, close: 788.42 },
{ date: new Date(2016, 10, 1), open: 810.87, high: 813.96, low: 798.26, close: 805.48 },
{ date: new Date(2016, 9, 31), open: 822.43, high: 822.63, low: 808, close: 809.9 },
{ date: new Date(2016, 9, 28), open: 829.94, high: 839, low: 817, close: 819.56 },
{ date: new Date(2016, 9, 27), open: 823.01, high: 826.58, low: 814.61, close: 817.35 },
{ date: new Date(2016, 9, 26), open: 827.12, high: 827.71, low: 816.35, close: 822.1 },
{ date: new Date(2016, 9, 25), open: 838.5, high: 838.5, low: 825.3, close: 828.55 },
{ date: new Date(2016, 9, 24), open: 830.09, high: 837.94, low: 829.04, close: 835.74 },
{ date: new Date(2016, 9, 21), open: 820, high: 824.29, low: 818.31, close: 824.06 },
{ date: new Date(2016, 9, 20), open: 827.56, high: 828.46, low: 820.55, close: 821.63 },
{ date: new Date(2016, 9, 19), open: 824.52, high: 829.81, low: 823.2, close: 827.09 },
{ date: new Date(2016, 9, 18), open: 814.21, high: 828.81, low: 813.33, close: 821.49 },
{ date: new Date(2016, 9, 17), open: 805.99, high: 813.49, low: 803.83, close: 806.84 },
{ date: new Date(2016, 9, 14), open: 807.45, high: 810.09, low: 802.32, close: 804.6 },
{ date: new Date(2016, 9, 13), open: 806.07, high: 806.56, low: 798.62, close: 804.08 },
{ date: new Date(2016, 9, 12), open: 811.96, high: 814.5, low: 808.55, close: 811.77 },
{ date: new Date(2016, 9, 11), open: 814.17, high: 819.86, low: 807.37, close: 809.57 },
{ date: new Date(2016, 9, 10), open: 803.93, high: 817.38, low: 802.24, close: 814.17 },
{ date: new Date(2016, 9, 7), open: 805.93, high: 805.94, low: 796.82, close: 800.71 },
{ date: new Date(2016, 9, 6), open: 804.08, high: 806.94, low: 800.51, close: 803.08 },
{ date: new Date(2016, 9, 5), open: 806, high: 808.5, low: 800.71, close: 801.23 },
{ date: new Date(2016, 9, 4), open: 805, high: 806.5, low: 799.67, close: 802.79 },
{ date: new Date(2016, 9, 3), open: 802.55, high: 803.54, low: 796.23, close: 800.38 },
{ date: new Date(2016, 8, 30), open: 803.6, high: 808.09, low: 801.5, close: 804.06 },
{ date: new Date(2016, 8, 29), open: 807.23, high: 813.91, low: 800.86, close: 802.64 },
{ date: new Date(2016, 8, 28), open: 804.08, high: 810.25, low: 802.78, close: 810.06 },
{ date: new Date(2016, 8, 27), open: 801.83, high: 813.49, low: 801.83, close: 810.73 },
{ date: new Date(2016, 8, 26), open: 809.82, high: 810.08, low: 800.45, close: 802.65 },
{ date: new Date(2016, 8, 23), open: 815.14, high: 817, low: 812.73, close: 814.96 },
{ date: new Date(2016, 8, 22), open: 810, high: 819.06, low: 807.71, close: 815.95 },
{ date: new Date(2016, 8, 21), open: 801.26, high: 805.91, low: 796.03, close: 805.03 },
{ date: new Date(2016, 8, 20), open: 800, high: 802.75, low: 798.26, close: 799.78 },
{ date: new Date(2016, 8, 19), open: 801.11, high: 803.99, low: 793.56, close: 795.39 },
{ date: new Date(2016, 8, 16), open: 799.02, high: 799.02, low: 793.62, close: 797.97 },
{ date: new Date(2016, 8, 15), open: 790.01, high: 803.64, low: 788.66, close: 801.23 },
{ date: new Date(2016, 8, 14), open: 787.53, high: 796.33, low: 787.53, close: 790.46 },
{ date: new Date(2016, 8, 13), open: 794.01, high: 795.79, low: 784.33, close: 788.72 },
{ date: new Date(2016, 8, 12), open: 784.52, high: 800.17, low: 783.5, close: 798.82 },
{ date: new Date(2016, 8, 9), open: 798.77, high: 801.75, low: 788.05, close: 788.48 },
{ date: new Date(2016, 8, 8), open: 805.22, high: 808.42, low: 801.01, close: 802.84 },
{ date: new Date(2016, 8, 7), open: 807.93, high: 810.6, low: 803.72, close: 807.99 },
{ date: new Date(2016, 8, 6), open: 798.39, high: 810.89, low: 795.43, close: 808.02 },
{ date: new Date(2016, 8, 2), open: 795.27, high: 797.1, low: 793.26, close: 796.87 },
{ date: new Date(2016, 8, 1), open: 791.98, high: 792.89, low: 786.33, close: 791.4 },
{ date: new Date(2016, 7, 31), open: 789.6, high: 791.57, low: 787.2, close: 789.85 },
{ date: new Date(2016, 7, 30), open: 792.88, high: 798, low: 789.47, close: 791.92 },
{ date: new Date(2016, 7, 29), open: 793.05, high: 798.52, low: 790.32, close: 795.82 },
{ date: new Date(2016, 7, 26), open: 792.49, high: 799.4, low: 789.41, close: 793.22 },
{ date: new Date(2016, 7, 25), open: 792, high: 794.72, low: 787.23, close: 791.3 },
{ date: new Date(2016, 7, 24), open: 796.86, high: 798.46, low: 790.76, close: 793.6 },
{ date: new Date(2016, 7, 23), open: 800.48, high: 801, low: 795.99, close: 796.59 },
{ date: new Date(2016, 7, 22), open: 798.51, high: 799.3, low: 794.33, close: 796.95 },
{ date: new Date(2016, 7, 19), open: 799.79, high: 801.23, low: 796.88, close: 799.65 },
{ date: new Date(2016, 7, 18), open: 805.36, high: 808, low: 801.63, close: 802.75 },
{ date: new Date(2016, 7, 17), open: 800, high: 805.63, low: 796.3, close: 805.42 },
{ date: new Date(2016, 7, 16), open: 803.5, high: 804.26, low: 797, close: 801.19 },
{ date: new Date(2016, 7, 15), open: 807.21, high: 811.36, low: 804.03, close: 805.96 },
{ date: new Date(2016, 7, 12), open: 805.09, high: 807.19, low: 803.64, close: 807.05 },
{ date: new Date(2016, 7, 11), open: 810.47, high: 813.88, low: 806, close: 808.2 },
{ date: new Date(2016, 7, 10), open: 807.05, high: 810.88, low: 806.49, close: 808.49 },
{ date: new Date(2016, 7, 9), open: 804.49, high: 813.33, low: 804.06, close: 807.48 },
{ date: new Date(2016, 7, 8), open: 806, high: 807.6, low: 801.69, close: 805.23 },
{ date: new Date(2016, 7, 5), open: 800.11, high: 807.22, low: 797.81, close: 806.93 },
{ date: new Date(2016, 7, 4), open: 798.24, high: 800.2, low: 793.92, close: 797.25 },
{ date: new Date(2016, 7, 3), open: 796.47, high: 799.54, low: 793.02, close: 798.92 },
{ date: new Date(2016, 7, 2), open: 797.33, high: 802.32, low: 794.53, close: 800.12 },
{ date: new Date(2016, 7, 1), open: 786.67, high: 807.49, low: 785.04, close: 800.94 },
{ date: new Date(2016, 6, 29), open: 797.71, high: 803.94, low: 790, close: 791.34 },
{ date: new Date(2016, 6, 28), open: 768.84, high: 768.97, low: 759.09, close: 765.84 },
{ date: new Date(2016, 6, 27), open: 758.97, high: 764.45, low: 755.93, close: 761.97 },
{ date: new Date(2016, 6, 26), open: 757.52, high: 759.26, low: 752.75, close: 757.65 },
{ date: new Date(2016, 6, 25), open: 757.68, high: 759.82, low: 754.07, close: 757.52 },
{ date: new Date(2016, 6, 22), open: 757.32, high: 759.45, low: 752.66, close: 759.28 },
{ date: new Date(2016, 6, 21), open: 757, high: 758.15, low: 751.52, close: 754.41 },
{ date: new Date(2016, 6, 20), open: 754.05, high: 760.64, low: 754.05, close: 757.08 },
{ date: new Date(2016, 6, 19), open: 749.87, high: 756.59, low: 748.49, close: 753.41 },
{ date: new Date(2016, 6, 18), open: 737.91, high: 755.14, low: 736.51, close: 753.2 },
{ date: new Date(2016, 6, 15), open: 741, high: 741, low: 734.64, close: 735.63 },
{ date: new Date(2016, 6, 14), open: 733.94, high: 736.14, low: 730.59, close: 735.8 },
{ date: new Date(2016, 6, 13), open: 735.52, high: 735.52, low: 729.02, close: 729.48 },
{ date: new Date(2016, 6, 12), open: 731.92, high: 735.6, low: 727.5, close: 732.51 },
{ date: new Date(2016, 6, 11), open: 719.42, high: 728.93, low: 718.86, close: 727.2 },
{ date: new Date(2016, 6, 8), open: 710.56, high: 717.9, low: 708.11, close: 717.78 },
{ date: new Date(2016, 6, 7), open: 710.11, high: 710.17, low: 700.67, close: 707.26 },
{ date: new Date(2016, 6, 6), open: 699.84, high: 713, low: 699, close: 708.97 },
{ date: new Date(2016, 6, 5), open: 705.01, high: 708.12, low: 699.13, close: 704.89 },
{ date: new Date(2016, 6, 1), open: 705.1, high: 712.53, low: 703.73, close: 710.25 },
{ date: new Date(2016, 5, 30), open: 697.65, high: 703.77, low: 694.9, close: 703.53 },
{ date: new Date(2016, 5, 29), open: 694.26, high: 699.5, low: 692.68, close: 695.19 },
{ date: new Date(2016, 5, 28), open: 691.37, high: 692.74, low: 684.85, close: 691.26 },
{ date: new Date(2016, 5, 27), open: 682.49, high: 683.32, low: 672.66, close: 681.14 },
{ date: new Date(2016, 5, 24), open: 690.17, high: 705, low: 684.91, close: 685.2 },
{ date: new Date(2016, 5, 23), open: 710.55, high: 714.88, low: 700.25, close: 714.87 },
{ date: new Date(2016, 5, 22), open: 714.05, high: 714.21, low: 705.88, close: 710.47 },
{ date: new Date(2016, 5, 21), open: 710.05, high: 715.38, low: 704.66, close: 708.88 },
{ date: new Date(2016, 5, 20), open: 710.31, high: 715.87, low: 705.41, close: 706.13 },
{ date: new Date(2016, 5, 17), open: 721.39, high: 721.39, low: 701.12, close: 704.25 },
{ date: new Date(2016, 5, 16), open: 727.96, high: 730.39, low: 715.54, close: 724.25 },
{ date: new Date(2016, 5, 15), open: 734.92, high: 737.15, low: 731.31, close: 732.19 },
{ date: new Date(2016, 5, 14), open: 729.31, high: 736, low: 726.5, close: 733.25 },
{ date: new Date(2016, 5, 13), open: 729.82, high: 739, low: 729.82, close: 731.88 },
{ date: new Date(2016, 5, 10), open: 735.95, high: 739.64, low: 730.51, close: 733.19 },
{ date: new Date(2016, 5, 9), open: 737.07, high: 743.93, low: 736.5, close: 742.52 },
{ date: new Date(2016, 5, 8), open: 739.5, high: 743.81, low: 735.76, close: 742.93 },
{ date: new Date(2016, 5, 7), open: 733.27, high: 736.71, low: 730.8, close: 731.09 },
{ date: new Date(2016, 5, 6), open: 738.5, high: 738.5, low: 728.29, close: 730.06 },
{ date: new Date(2016, 5, 3), open: 741.49, high: 741.49, low: 733.91, close: 735.86 },
{ date: new Date(2016, 5, 2), open: 746.1, high: 747.3, low: 737, close: 744.27 },
{ date: new Date(2016, 5, 1), open: 748.47, high: 751.37, low: 744.34, close: 748.46 },
{ date: new Date(2016, 4, 31), open: 748.76, high: 753.48, low: 745.57, close: 748.85 },
{ date: new Date(2016, 4, 27), open: 737.51, high: 747.91, low: 737.01, close: 747.6 },
{ date: new Date(2016, 4, 26), open: 736, high: 741.1, low: 733, close: 736.93 },
{ date: new Date(2016, 4, 25), open: 735, high: 739.89, low: 732.6, close: 738.1 },
{ date: new Date(2016, 4, 24), open: 719.85, high: 734.2, low: 719.64, close: 733.03 },
{ date: new Date(2016, 4, 23), open: 719.98, high: 723.5, low: 716.94, close: 717.25 },
{ date: new Date(2016, 4, 20), open: 716.46, high: 727.7, low: 715.01, close: 721.71 },
{ date: new Date(2016, 4, 19), open: 718.3, high: 720.5, low: 710.3, close: 715.31 },
{ date: new Date(2016, 4, 18), open: 718.5, high: 725.57, low: 715.02, close: 721.78 },
{ date: new Date(2016, 4, 17), open: 731.06, high: 735.85, low: 718, close: 720.19 },
{ date: new Date(2016, 4, 16), open: 724.32, high: 732.68, low: 720, close: 730.3 },
{ date: new Date(2016, 4, 13), open: 726.62, high: 731.29, low: 723.51, close: 724.83 },
{ date: new Date(2016, 4, 12), open: 732, high: 735.37, low: 724.27, close: 728.07 },
{ date: new Date(2016, 4, 11), open: 740.52, high: 740.8, low: 727.9, close: 730.55 },
{ date: new Date(2016, 4, 10), open: 734.96, high: 740, low: 731.61, close: 739.38 },
{ date: new Date(2016, 4, 9), open: 726.7, high: 734.29, low: 723.5, close: 729.13 },
{ date: new Date(2016, 4, 6), open: 712.2, high: 725.99, low: 711.95, close: 725.18 },
{ date: new Date(2016, 4, 5), open: 715, high: 717.55, low: 709.45, close: 714.71 },
{ date: new Date(2016, 4, 4), open: 706.77, high: 715.05, low: 704.05, close: 711.37 },
{ date: new Date(2016, 4, 3), open: 712.5, high: 713.37, low: 707.33, close: 708.44 },
{ date: new Date(2016, 4, 2), open: 711.92, high: 715.41, low: 706.36, close: 714.41 },
{ date: new Date(2016, 3, 29), open: 704.12, high: 712.11, low: 703.78, close: 707.88 },
{ date: new Date(2016, 3, 28), open: 723.29, high: 729.26, low: 703.2, close: 705.06 },
{ date: new Date(2016, 3, 27), open: 725.32, high: 727.15, low: 709.08, close: 721.46 },
{ date: new Date(2016, 3, 26), open: 744.42, high: 745.59, low: 720.32, close: 725.37 },
{ date: new Date(2016, 3, 25), open: 735.35, high: 744.88, low: 735.1, close: 742.21 },
{ date: new Date(2016, 3, 22), open: 743.91, high: 753.92, low: 730.37, close: 737.77 },
{ date: new Date(2016, 3, 21), open: 777.31, high: 781.68, low: 771.55, close: 780 },
{ date: new Date(2016, 3, 20), open: 779.16, high: 779.66, low: 771.27, close: 774.92 },
{ date: new Date(2016, 3, 19), open: 790.5, high: 790.95, low: 770.27, close: 776.25 },
{ date: new Date(2016, 3, 18), open: 780.19, high: 788.55, low: 777.61, close: 787.68 },
{ date: new Date(2016, 3, 15), open: 775.5, high: 780.93, low: 774.93, close: 780 },
{ date: new Date(2016, 3, 14), open: 775.36, high: 779.61, low: 773.22, close: 775.39 },
{ date: new Date(2016, 3, 13), open: 770.31, high: 775.75, low: 764.59, close: 771.91 },
{ date: new Date(2016, 3, 12), open: 758.43, high: 764.92, low: 751.56, close: 764.32 },
{ date: new Date(2016, 3, 11), open: 765.45, high: 767.22, low: 757.34, close: 757.54 },
{ date: new Date(2016, 3, 8), open: 765.87, high: 767.13, low: 755.77, close: 759.47 },
{ date: new Date(2016, 3, 7), open: 765.32, high: 769.36, low: 757.5, close: 760.12 },
{ date: new Date(2016, 3, 6), open: 757.84, high: 768.42, low: 756.3, close: 768.07 },
{ date: new Date(2016, 3, 5), open: 758.13, high: 762.87, low: 755.6, close: 758.57 },
{ date: new Date(2016, 3, 4), open: 769.51, high: 772.44, low: 761.78, close: 765.12 },
{ date: new Date(2016, 3, 1), open: 757.16, high: 770.04, low: 755.2, close: 769.67 },
{ date: new Date(2016, 2, 31), open: 768.34, high: 769.08, low: 758.25, close: 762.9 },
{ date: new Date(2016, 2, 30), open: 768.21, high: 777.31, low: 767.58, close: 768.34 },
{ date: new Date(2016, 2, 29), open: 753.68, high: 767.18, low: 748.29, close: 765.89 },
{ date: new Date(2016, 2, 28), open: 756.17, high: 758.3, low: 752.04, close: 753.28 }
];
}
}
.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);
