For Angular2 - here are step by step instructions on how to get ZoomCharts running within the angular-seed application. Note that they only describe the steps to get a sample running within the seed application, not the steps required to build fully functional component.
1. Copy zoomcharts.d.ts
file into /tools/manual_typings/project/
folder.
2. Modify the zoomcharts.d.ts
file to support CommonJS/SystemJS module system by adding at the top of it these lines:
declare module "ZoomCharts" {
export = ZoomCharts;
}
3. In the tools\project.config.ts
file add this line into the constructor (of course, using CDN is optional) to register the library with SystemJS loader:
this.addPackagesBundles([{
name: "ZoomCharts",
path: "https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"
}]);
4. Create a new component for the chart, for example, /src/client/app/home/zc-pie-chart.component.ts
/// <reference path="../../../../tools/manual_typings/project/zoomcharts.d.ts" />
import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { PieChart } from "ZoomCharts";
@Component({
moduleId: module.id,
selector: "zc-pie-chart",
template: "<div #container>PieChart is being initialized...</div>"
})
export class ZcPieChart implements AfterViewInit {
@ViewChild("container")
private container: ElementRef;
ngAfterViewInit() {
var x = new PieChart({
container: this.container.nativeElement,
assetsUrlBase: System.paths["ZoomCharts"] + "/../assets/",
data: [{
url: "https://zoomcharts.com/dvsl/data/pie-chart/browsers.json",
}]
});
}
}
5. Register the component in the module (in this sample case, home.module.ts
):
import { ZcPieChart } from './zc-pie-chart.component';
..
declarations: [..other components.., ZcPieChart],
..
6. Add it to the view, for example, home.component.html
:
<zc-pie-chart></zc-pie-chart>