sfalise
commented
7 years ago //sfalise@hotmail.com
//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
}
}
],
};
};
}
Pauan
codegastudio
sabbaticaldev
marianturchyn
sumanth1801
Vyacheslav-Y
Can not get any events from the serial chart using the AmChartsDirective (imported in the module) out to the surrounding component. Regardless of what method I try, the Chrome Console always shows this exception: Uncaught TypeError: Cannot read property 'call' of undefined amcharts.js:3 a.inherits.b.fire @ amcharts.js:3 handleClick @ amcharts.js:205 (anonymous function) @ amcharts.js:203
This is my component code. This is based on the directive sample. I moved the makeChart code into the component because I thought it would make it easier to get the handler info into the component, but, event with it outside the scope of the Component (as in the sample), the results were the same.