Created a function within the component.ts file inside the constructor:
constructor(private _visitService: VisitService,) {
this._visitService.getchartData().subscribe(data => {
this.fetchedData = data
console.log("INSIDE SUBSCRIBE", this.fetchedData );
});
}
Works fine when using the data within the subscribe brackets {} like console.log did. However, if placed in a function outside like this:
constructor(
private _visitService: VisitService,
)
{
this.chartData = this.getData( );
this._visitService.getchartData().subscribe(data =>
{ this.fetchedData = data
console.log("INSIDE SUBSCRIBE", this.fetchedData );
});
}
ngOnInit() {
}
getData( ) {
console.log("INSIDE SUBSCRIBE", this.fetchedData );
var layoutColors = this._baConfig.get().colors;
var graphColor = this._baConfig.get().colors.custom.dashboardLineChart;
return {
dataProvider: [
{
date: "2012-07-30",
value:50
}, {
date: "2012-07-31",
value: 18
}, {
date: "2012-08-01",
value: 13
}, {
date: "2012-08-02",
value: 22
}, {
date: "2012-08-03",
value: 23
},
],
type: 'serial',
theme: 'blur',
marginTop: 15,
marginRight: 15,
responsive: {
'enabled': true
},
dataDateFormat: 'YYYY-MM-DD',
categoryField: 'date',
categoryAxis: {
parseDates: true,
gridAlpha: 0,
minHorizontalGap:100,
color: layoutColors.defaultText,
axisColor: layoutColors.defaultText
},
valueAxes: [
{
minVerticalGap: 50,
gridAlpha: 0,
color: layoutColors.defaultText,
axisColor: layoutColors.defaultText
}
],
graphs: [
/* {
id: 'g0',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value0',
fillAlphas: 1,
fillColorsField: 'lineColor'
},*/
{
id: 'g1',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: colorHelper.hexToRgbA(graphColor, 0.5),
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 1,
fillColorsField: 'lineColor'
}
],
chartCursor: {
categoryBalloonDateFormat: 'DD MM YYYY',
categoryBalloonColor: '#4285F4',
categoryBalloonAlpha: 0.7,
cursorAlpha: 0,
valueLineEnabled: true,
valueLineBalloonEnabled: true,
valueLineAlpha: 0.5
},
export: {
enabled: true
},
pathToImages: "http://cdn.amcharts.com/lib/3/images/",
chartScrollbar: {
graph: 'g1',
gridAlpha:0,
color:"#888888",
scrollbarHeight:25,
backgroundAlpha:0,
selectedBackgroundAlpha:0.1,
selectedBackgroundColor:"#888888",
graphFillAlpha:0,
autoGridCount:true,
selectedGraphFillAlpha:0,
graphLineAlpha:0.2,
graphLineColor:"#c2c2c2",
selectedGraphLineColor:"#888888",
selectedGraphLineAlpha:1
},
listeners: [{
method: function(e) {
e.chart.valueAxes[0].zoomToValues(30, 70);
}
}],
creditsPosition: 'bottom-right',
zoomOutButton: {
backgroundColor: '#fff',
backgroundAlpha: 0
},
zoomOutText: '',
/* pathToImages: layoutPaths.images.amChart*/
};
}
When trying to display it shows undefined. Is there a way to use a value extracted from subscribe inside other functions or methods? New to this and having trouble. Also attempted passing it to another variable but was unsuccessful.