Graphing tools - Angular2

Question

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
}]
}
}

`angular2/...` is for beta versions `@angular/...` for RC.x versions. — Günter Zöchbauer, Jul 19 '16 at 16:47

score 5 · Accepted Answer · edited May 23 '17 at 12:09

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.

Graphing tools - Angular2

1 Answers1