I am relatively new to web applications and hence am just beginning to use Angular2 (have NOT used angularJS) and Typescript. I am trying to use Zingchart to plot a graph. I went through the 5 min quick start as well as the tutorial in the angular2 page and got a decent idea of how it works. I followed the instructions on the Zingchart page to create a chart on the webpage using the two tools (https://blog.zingchart.com/2016/03/16/angular-2-example-zingchart/). However, I seem to be having issues. 1) I am not able to import AfterView from @angular/core. Although the page says that I must be using angular2/core I am using @angular/core as the source folder to import modules from. angular2/core is not getting recognized. 2) When there are functions bound to the zingchart object (example - zingchart.render(), zingchart.exec()), there is an error that says zingchart cannot be found. I am not sure what is going on wrong here either.
import { Component, NgZone, AfterViewInit, OnDestroy } from '@angular/core';
class Chart {
id: String;
data: Object;
height: any;
width: any;
constructor(config: Object) {
this.id = config['id'];
this.data = config['data'];
this.height = config['height'] || 300;
this.width = config['width'] || 600;
}
}
@Component({
selector : 'zingchart',
inputs : ['chart'],
template : `
<div id='{{chart.id}}'></div>
`
})
class ZingChart implements AfterViewInit, OnDestroy {
chart : Chart;
constructor(private zone:NgZone) {
}
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
zingchart.render({
id : this.chart['id'],
data : this.chart['data'],
width : this.chart['width'],
height: this.chart['height']
});
});
}
ngOnDestroy() {
zingchart.exec(this.chart['id'], 'destroy');
}
}
//Root Component
@Component({
selector: 'my-app',
directives: [ZingChart],
template: `
<zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart>
`,
})
export class App {
charts : Chart[];
constructor() {
this.charts = [{
id : 'chart-1',
data : {
type : 'line',
series : [{
values :[2,3,4,5,3,3,2]
}],
},
height : 400,
width : 600
}]
}
}
FusionCharts is one of the leading open-source Angular chart libraries available. This is because it fulfills your data visualization needs and seamlessly integrates into your web applications. It also makes it easy to build your visualizations.
You can create Angular charts like Pie, Bar, Area, Line, Point, Stacked, Donut, Scatter, Gauge, Polar, Treemap, Stock, Financial, Geospatial Maps and more for your mobile or web apps.
ng2-charts gives you a baseChart directive that can be applied on an HTML canvas element. Open app.component.html in a code editor and replace the content with the following lines of code: src/app/app.component.html.
The ng2-charts module is an open-source JavaScript library, and it is exclusively built for Angular 2+ and available via npm.
Full disclosure, I'm a member of the ZingChart team.
1)"I am not able to import AfterView from @angular/core. Although the page says that I must be using angular2/core I am using @angular/core as the source folder"
By not complying with the instructions from the blog post you have broken the syntax for Angular 2 when this post was written. The Angular 2 syntax for importing functions and their names changed from 2.0.0 beta 9 (the version for which this was written) and 2.0.0 RC0 (the minimum version I assume you’re using). If you want to use the existing code as we have it, you’ll have to use the import
statements we wrote and the version of Angular 2 that we used (2.0.0 beta 9).
We’re in the process of writing an updated blog post for Angular 2.0.0 RC4 which will include how to use the new @angular
symbols you said you’re trying to import
2) For event bindings there is a good explanation on another stackoverflow post here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With