Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Graphing tools - Angular2

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
}]
}
}
like image 943
Vysh Avatar asked Jul 18 '16 21:07

Vysh


People also ask

Which chart is best for Angular?

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.

Does Angular material have charts?

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.

What is ng2 chart?

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.

Is ng2-charts open-source?

The ng2-charts module is an open-source JavaScript library, and it is exclusively built for Angular 2+ and available via npm.


1 Answers

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.

like image 76
nardecky Avatar answered Sep 30 '22 15:09

nardecky