Comments (15)
@codegastudio You need to use npm install amcharts/amcharts3-angular2 --save
from amcharts3-angular2.
I'm having this same issue. Is there any workaround?
from amcharts3-angular2.
//[email protected]
//this is my component code:
import { Component, OnInit, Input, OnChanges, ChangeDetectorRef } from "@angular/core";
import { EmitterService } from "./emitter.service";
import PlotData from "./plot-data";
interface Configuration {
dataProvider: Array<PlotData>;
fillColors: string;
}
@Component({
selector: "amchart-xyplot",
template: `
<!--<amCharts [id]="id" [options]="chart" (click)="clicked($event)" style="width: 600px; height: 400px;"></amCharts>-->
<amCharts [id]="id" [options]="chart" style="width: 600px; height: 400px;"></amCharts>
`
})
export class ChartComponent implements OnChanges {
@Input() id: string;
name: string;
description: string;
chartData = [
{
"date": "",
"ay": 0.0,
"by": 0.0
}
];
// private chart: any;
private chart: any = this.makeChart({
dataProvider: this.chartData,
fillColors: "green",
});
ngOnChanges()
{
EmitterService.get(this.id).subscribe((value: any) => this.handleResourceSelection(value));
}
handleResourceSelection(value: any) {
this.name = value.name;
this.description = value.description;
this.chart = JSON.parse(JSON.stringify(this.chart));
this.chart.dataProvider = value.data;
}
clickedHandler = function(event: any) {
alert("Caught Event");
}
public makeChart(config: Configuration):any {
return {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"dataProvider": config.dataProvider,
"listeners": [{
"event": "clickGraphItem",
"method": function (event: any) {
alert("caught event in makechart");
}
},
{
"event": "clickGraph",
"method": this.clickedHandler
}],
"chartCursor": {
"cursorColor":"#0000FF",
},
"chartScrollbar": {
"autoGridCount": true,
},
"mouseWheelZoomEnabled": true,
"categoryAxis": {
"parseDates": true,
"equalSpacing": true,
"minorGridEnabled": true,
"inside": true,
"guides": [{
"fillColor": "#00CC00",
"inside": false,
"fillAlpha": 0.2,
"lineAlpha": 0
}],
},
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left"
}],
"graphs": [
{
"id":"g1",
"lineColor": "#00CC00",
"valueField": "ay",
"dashLength": 3,
"bullet": "round",
"balloonText": "<b><span style='font-size:14px;'>[[value]]</span></b>",
"balloon":{
"drop":true
}
},
{
"id":"g2",
"lineColor": "#FF0000",
"valueField": "by",
"dashLength": 3,
"bullet": "square",
"balloonText": "<b><span style='font-size:14px;'>[[value]]</span></b>",
"balloon":{
"drop":true
}
}
],
};
};
}
from amcharts3-angular2.
Hi @sfalise,
Sorry for taking so long to get back to you on this.
There was a bug in amcharts3-angular2
that caused the listeners
to not work.
This bug has been fixed in version 1.0.1
, please upgrade and then try again.
from amcharts3-angular2.
Pauan,
Thanks, I'll give this a try in the morning.
I was just attempting to implement amcharts directive in angular-cli, is there anything special I need to do in that configuration to get it to work (have you tested amcharts with angular-cli?)
Thanks,
Steve
Steve Falise
[email protected]:[email protected]
540-207-0199
From: Pauan [email protected]
Sent: Saturday, October 22, 2016 10:31:40 PM
To: amcharts/amcharts3-angular2
Cc: Steven Falise; Mention
Subject: Re: [amcharts/amcharts3-angular2] Component unable to catch any amchart events (#2)
Hi @sfalisehttps://github.com/sfalise,
Sorry for taking so long to get back to you on this.
There was a bug in amcharts3-angular2 that caused the listeners to not work.
This bug has been fixed in version 1.0.1, please upgrade and then try again.
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com//issues/2#issuecomment-255565805, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AEdmU9rLG7EMPZZaYczeMQ3NKcRviYt-ks5q2scMgaJpZM4KYpeS.
from amcharts3-angular2.
Nope...no change. Still cannot get a listener callback or an inline handler to work.
public makeChart(config: Configuration):any {
return {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"dataProvider": config.dataProvider,
"listeners": [{
"event": "clickGraphItem",
"method": function (event: any) {
alert("caught event in makechart");
}
},
Steve Falise
[email protected]:[email protected]
540-207-0199
From: steven falise [email protected]
Sent: Sunday, October 23, 2016 5:51:45 PM
To: amcharts/amcharts3-angular2
Subject: Re: [amcharts/amcharts3-angular2] Component unable to catch any amchart events (#2)
Pauan,
Thanks, I'll give this a try in the morning.
I was just attempting to implement amcharts directive in angular-cli, is there anything special I need to do in that configuration to get it to work (have you tested amcharts with angular-cli?)
Thanks,
Steve
Steve Falise
[email protected]:[email protected]
540-207-0199
From: Pauan [email protected]
Sent: Saturday, October 22, 2016 10:31:40 PM
To: amcharts/amcharts3-angular2
Cc: Steven Falise; Mention
Subject: Re: [amcharts/amcharts3-angular2] Component unable to catch any amchart events (#2)
Hi @sfalisehttps://github.com/sfalise,
Sorry for taking so long to get back to you on this.
There was a bug in amcharts3-angular2 that caused the listeners to not work.
This bug has been fixed in version 1.0.1, please upgrade and then try again.
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com//issues/2#issuecomment-255565805, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AEdmU9rLG7EMPZZaYczeMQ3NKcRviYt-ks5q2scMgaJpZM4KYpeS.
from amcharts3-angular2.
To update, I ran:
npm install amcharts3-angular2 --save
has this changed?
Steve Falise
[email protected]:[email protected]
540-207-0199
From: steven falise [email protected]
Sent: Monday, October 24, 2016 11:19:45 AM
To: amcharts/amcharts3-angular2
Subject: Re: [amcharts/amcharts3-angular2] Component unable to catch any amchart events (#2)
Nope...no change. Still cannot get a listener callback or an inline handler to work.
public makeChart(config: Configuration):any {
return {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"dataProvider": config.dataProvider,
"listeners": [{
"event": "clickGraphItem",
"method": function (event: any) {
alert("caught event in makechart");
}
},
Steve Falise
[email protected]:[email protected]
540-207-0199
From: steven falise [email protected]
Sent: Sunday, October 23, 2016 5:51:45 PM
To: amcharts/amcharts3-angular2
Subject: Re: [amcharts/amcharts3-angular2] Component unable to catch any amchart events (#2)
Pauan,
Thanks, I'll give this a try in the morning.
I was just attempting to implement amcharts directive in angular-cli, is there anything special I need to do in that configuration to get it to work (have you tested amcharts with angular-cli?)
Thanks,
Steve
Steve Falise
[email protected]:[email protected]
540-207-0199
From: Pauan [email protected]
Sent: Saturday, October 22, 2016 10:31:40 PM
To: amcharts/amcharts3-angular2
Cc: Steven Falise; Mention
Subject: Re: [amcharts/amcharts3-angular2] Component unable to catch any amchart events (#2)
Hi @sfalisehttps://github.com/sfalise,
Sorry for taking so long to get back to you on this.
There was a bug in amcharts3-angular2 that caused the listeners to not work.
This bug has been fixed in version 1.0.1, please upgrade and then try again.
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com//issues/2#issuecomment-255565805, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AEdmU9rLG7EMPZZaYczeMQ3NKcRviYt-ks5q2scMgaJpZM4KYpeS.
from amcharts3-angular2.
@sfalise Try deleting the node_modules/amcharts3-angular2
folder and then run npm install
again. Npm sometimes has issues with upgrading git repositories.
from amcharts3-angular2.
npm install amcharts3-angular2 --save return an 404 error for me
from amcharts3-angular2.
Hello,
Sorry to up this issue but listeners seems to not work in 1.0.1.
I use anglar-cli (the last release).
I had try many ways find on the web to test listeners but no one call any method.
zoomOutOnDataUpdate not work too.
Uncaught TypeError: Cannot read property 'call' of undefined
"listeners": [{
"event": "init",
"method": function (event: any) {
alert("caught event in makechart");
}
}]
StackTrace
amcharts.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
at b.a.inherits.b.fire (amcharts.js:1)
at b.dispDUpd (amcharts.js:19)
at b.onDataUpdated (serial.js:2)
at b.initChart (serial.js:2)
at b.measureMargins (serial.js:1)
at b.onDataUpdated (serial.js:2)
at b.parsePartSerialData (amcharts.js:40)
at b.parseSerialData (amcharts.js:40)
at b.parseData (serial.js:6)
at b.initChart (serial.js:2)
at b.afterWrite (amcharts.js:18)
at b.write (amcharts.js:18)
at amcharts.js:1
at d.handleLoad (amcharts.js:1)
Regards
from amcharts3-angular2.
If i configure like this
"listeners": [{
"event": "rendered",
"method": this.test()
}]
...
test():void {
console.log("test");
}
i can see message log but i had the following errors too and i can't handle event.
amcharts.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
at b.a.inherits.b.fire (amcharts.js:1)
at b.dispDUpd (amcharts.js:19)
at b.onDataUpdated (serial.js:2)
at b.initChart (serial.js:2)
at b.measureMargins (serial.js:1)
at b.onDataUpdated (serial.js:2)
at b.parsePartSerialData (amcharts.js:40)
at b.parseSerialData (amcharts.js:40)
at b.parseData (serial.js:6)
at b.initChart (serial.js:2)
at b.afterWrite (amcharts.js:18)
at b.write (amcharts.js:18)
at amcharts.js:1
at d.handleLoad (amcharts.js:1)
Potentially unhandled rejection [1] TypeError: Cannot read property 'call' of undefined
at b.a.inherits.b.fire (https://www.amcharts.com/lib/3/amcharts.js:1:1087)
at b.dispDUpd (https://www.amcharts.com/lib/3/amcharts.js:19:2593)
at b.onDataUpdated (https://www.amcharts.com/lib/3/serial.js:2:1982)
at b.initChart (https://www.amcharts.com/lib/3/serial.js:2:1586)
at b.measureMargins (https://www.amcharts.com/lib/3/serial.js:1:3161)
at b.onDataUpdated (https://www.amcharts.com/lib/3/serial.js:2:1959)
at b.parsePartSerialData (https://www.amcharts.com/lib/3/amcharts.js:40:5410)
at b.parseSerialData (https://www.amcharts.com/lib/3/amcharts.js:40:3538)
at b.parseData (https://www.amcharts.com/lib/3/serial.js:6:4077)
at b.initChart (https://www.amcharts.com/lib/3/serial.js:2:1564)
at b.afterWrite (https://www.amcharts.com/lib/3/amcharts.js:18:2162)
at b.write (https://www.amcharts.com/lib/3/amcharts.js:18:382)
at b.validateNow (https://www.amcharts.com/lib/3/amcharts.js:19:4108)
at AmChartsDirective.ngOnChanges (http://localhost:4200/vendor.bundle.js:115993:32)
at Wrapper_AmChartsDirective.ngDoCheck (/AmchartModule/AmChartsDirective/wrapper.ngfactory.js:41:20)
from amcharts3-angular2.
This error happens when "this" changes context, the workaround to this is to pass context through variable.
let that = this; // context
...
"listeners": [{
"event": "rendered",
"method": function (event: any) {
that.test(event);
}
}]
...
test(event):void {
console.log("test", event);
}
from amcharts3-angular2.
I'm still facing the issue. Is there a solution for this problem?
from amcharts3-angular2.
@codegastudio @meiraleal @sumanth1801 Can you please share your full code in a codepen, gist, or git repo, so I can take a look?
from amcharts3-angular2.
@Pauan https://codepen.io/VyacheslavY/pen/xaqPPv
from amcharts3-angular2.
Related Issues (20)
- Gantt Chart displays wrong date in small screens
- Exporting of PNG,jpg,pdf,xlsx etc not working in angular 7 HOT 5
- Large data with specified colors for column chart displays different color
- Update dependencies to Angular 8 HOT 1
- Issue using angular universal
- Not able to Change Gantt Chart display view from Monthly to Daily HOT 3
- I don't want ChartScrollbar, I want browser scrollbar to be displayed in amcharts Gantt
- How to add dynamically New Value axis and graph in Angular 6 by using Amchart 3
- Update dependencies to Angular 9 and support Ivy HOT 20
- ERROR TypeError: this.chart.panels[0].addLabel is not a function
- License key integration in live project HOT 1
- this.checkTouchDuration is not a function (pie chart)
- amcharts 2.2.5 not compatible with angular 9.1.13 and HOT 1
- Support for angular version 13 HOT 1
- Support for Angular v14 HOT 1
- Support for Angular v15 HOT 1
- Support for Angular 16 HOT 1
- Feature Request - Angular 17 upgrade HOT 1
- Amcharts isn't loading when I have no internet connection HOT 4
- Not rendering on Angular Material Tabs HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts3-angular2.