Getting Started

Steps for getting started with the FinancialChart in AngularJS applications:

  1. Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
  2. Include the Wijmo 5 directives in the app module:
    var app = angular.module('app', ['wj']);
  3. Add a controller to provide data and logic.
  4. Add a FinancialChart to the page and bind it to the data.
  5. Add some CSS to customize the chart's appearance.
<!DOCTYPE html> <html> <head> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- Configure SystemJS --> <script src="systemjs.config.js"></script> <link rel="stylesheet" type="text/css" href="bin/Devel/external/bootstrap/css/bootstrap.css" /> <script wj-src="wijmo" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.input" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart.analytics" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart.animation" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart.annotation" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart.finance" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart.finance.analytics" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <script wj-src="wijmo.chart.interaction" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <link href="bin/Devel/sources/styles/wijmo.css" rel="stylesheet" /> <script wj-src="wijmo.angular2" src="bin/Devel/loaders/wijmo.load.module.js" type="text/javascript"></script> <link href="src/styles/app.css" rel="stylesheet" /> <script> System.import('./src/app'); </script> </head> <body> <app-cmp> <wj-financial-chart [itemsSource]="data" [header]="header" bindingX="date"> <wj-financial-chart-series name="Open" binding="open"></wj-financial-chart-series> <wj-financial-chart-series name="Close" binding="close"></wj-financial-chart-series> </wj-financial-chart> </app-cmp> </body> </html>
// Angular import { Component, EventEmitter, Input, Inject, enableProdMode, NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from 'wijmo/wijmo.angular2.input'; import { WjChartModule } from 'wijmo/wijmo.angular2.chart'; import { WjChartAnimationModule } from 'wijmo/wijmo.angular2.chart.animation'; import { WjChartFinanceModule } from 'wijmo/wijmo.angular2.chart.finance'; import { WjChartAnnotationModule } from 'wijmo/wijmo.angular2.chart.annotation'; import { WjChartInteractionModule } from 'wijmo/wijmo.angular2.chart.interaction'; import { WjChartAnalyticsModule } from 'wijmo/wijmo.angular2.chart.analytics'; import { TabsModule } from './components/AppTab'; import { DataSvc } from './services/DataSvc'; // Sample components import { GettingStartedCmp } from './components/GettingStartedCmp'; export module FinancialChartIntro { 'use strict'; // The FinancialChartIntro application root component. @Component({ selector: 'app-cmp', templateUrl: 'src/app.html' }) export class AppCmp { constructor() { } } } @NgModule({ imports: [WjInputModule, WjChartModule, WjChartAnimationModule, WjChartFinanceModule, WjChartAnnotationModule, WjChartInteractionModule, WjChartAnalyticsModule, HttpModule,BrowserModule, FormsModule, TabsModule], declarations: [GettingStartedCmp,FinancialChartIntro.AppCmp], providers: [DataSvc], bootstrap: [FinancialChartIntro.AppCmp] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); import { Component, ViewChild, Inject} from '@angular/core'; import { DataSvc } from './../services/DataSvc'; //GettingStarted sample component @Component({ selector: 'getting-started-cmp', templateUrl: 'src/components/GettingStartedCmp.html' }) export class GettingStartedCmp { dataSvc: DataSvc; data: any[]; header: string; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.data = []; this.dataSvc = dataSvc; this.setDataSource(); this.header = 'Facebook, Inc. (FB)'; } private setDataSource() { this.dataSvc.getData().subscribe(data => { this.data = data; }); } }
/* set default chart style */ .wj-flexchart { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); padding: 8px; margin-bottom: 12px; }

Result (live):