Welcome to the Wijmo FlexChart, a TypeScript and HTML5 chart you can build into an Angular 2 application. In this video, we'll learn how to:
- Configure Visual Studio 2015
- Use NPM to get Angular2 and accompanying libraries
- How to setup project structure for development
- Build an Angular 2 component
- Display a Wijmo FlexChart bound to some generic data
If you haven't already downloaded Wijmo, get your fully-featured watermarked trial now.
Code Snips
app.ts
///
import { Component, View, Inject } from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { bootstrap } from 'angular2/platform/browser';
import { DataSvc } from './DataSvc';
import * as wjNg2Chart from 'wijmo/wijmo.angular2.chart';
@Component({
selector: 'app',
templateUrl: 'src/app.html',
directives: [CORE_DIRECTIVES, wjNg2Chart.WjFlexChart, wjNg2Chart.WjFlexChartAxis, wjNg2Chart.WjFlexChartLegend,
wjNg2Chart.WjFlexChartDataLabel, wjNg2Chart.WjFlexChartSeries, wjNg2Chart.WjFlexChartLineMarker]
})
export class AppCmp {
// generate some random data
countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
data: { country: string, downloads: number, sales: number, expenses: number }[];
protected dataSvc: DataSvc;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.data = this.dataSvc.getData(this.countries);
}
}
bootstrap(AppCmp, [DataSvc]);
app.html DataSvc.ts
import { Injectable } from 'angular2/core';
// Common data service
@Injectable()
export class DataSvc {
// data used to generate random items
getData(countries: string[]): any[] {
var data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
}
Script references in default.html
<script>// <![CDATA[<br/> System.config({<br/> packages: {<br/> 'src': {<br/> defaultExtension: 'js',<br/> },<br/> },<br/> });<br/> <br/>// ]]></script>
<script>// <![CDATA[<br/> System.import('/src/app');<br/> <br/>// ]]></script>
Transcript
Welcome to Getting Started with FlexChart using Wijmo and Angular 2. I’m Ross Dederer, Development Relations at GrapeCity. Today we’re going to walk through how to add Wijmo FlexChart to a new application. In this video, we’ll be using Visual Studio 2015 with Intellisense and TypeScript, but you can use command line or other editors. First, create a new application using Visual Studio’s HTML Application with TypeScript project template. I’ll call it FlexChartAngular2. Next, remove the index.html, app.ts, and app.css files. Go to TypeScript project settings and specify CommonJS as the project module system. To get Angular 2 and its libraries, add a package.json file to the root of our app. Copy the contents found in the Angular 2 quickstart manual. That instructs Visual Studio to get the libraries automatically. Place all libraries in node_modules. Add a default.html page to the root of the project. Add references to Angular 2 and libraries as described in the quickstart manual. Add references to Wijmo controls and the angular2 interop file. Add references to any CSS files, as well. Configure systemJS. Place the Angular 2 component in the src folder. Next we’ll configure the project structure. Open the project in Windows File Explorer next to the Wijmo download package. Add two folders to scripts: one called vendor, and one called definitions. Definitions will describe the API of the internal modules contain the Wijmo controls. Vendors will contain the code for the controls themselves. Copy the Wijmo.Angular2 interop JS file into the Vendors location from the Interop Wijmo package. Copy the d.ts files from interop into a newly created folder in node_modules called Wijmo. Finally, copy the base style. Go back to Visual Studio and include everything in styles and scripts into the project. Note that we didn’t include the Wijmo folder from node_modules. Now that our project is set up, add the app component to the src folder. Add a new typescript class and a companion template. We can remove the html code. Import a few Angular2 modules into our component. A Data Service is required to get the data, so create a new TS class and import that, as well. We’re ready to import Wijmo FlexChart. First, define decorators and MetaData so that the component can be placed anywhere that it’s called in the markup. Expose the directives to our component from Wijmo FlexChart. We’ll define our decorators and MetaData such that it will place this component anywhere were it sees app, loading the markup found in src/app.html. Finally, we’ll expose some directives to our component from Wijmo’s FlexChart. Next, create a class and call the data service to load data into FlexChart. Finally, bootstrap the app. Define AppCmp as the application root component. Expose DataSvc service to it. The dataSvc is still empty, so build the Model and generate random data to use in the Chart.Add the component placeholder to default.html and provide any additional styling for the component. The last and final step is to tell TypeScript to ignore experimental decorators. Run the application.
Read more about Angular 2 and Wijmo
GrapeCity