How can I access data in graph? - highcharts

Question

I am really confused. How can I access data in a graph?
The below data is getting from server in service:
{
"data": [
{
"Prev2WkAnsweredNotifcn": 0,
"CrntYearNotifiedNotifcn": 0,
"CrntWkAnsweredNotifcn": 0,
"Prev1WkAnsweredNotifcn": 0,
"Prev2WkNotifiedNotifcn": 0,
"CrntWkNotifiedNotifcn": 0,
"Prev1WkNotifiedNotifcn": 0,
"Closed": "Closed",
"Prev3WkNotifiedNotifcn": 0,
"Open": "Open",
"Prev3WkAnsweredNotifcn": 0,
"CrntMonthNotifiedNotifcn": 0
}
]
}
Service:
getPosts(): Observable<any> {
return this._http.get('EscalationGraphData/')
.map(res => res.json().data)
.do(data => console.log(data[0]) // eyeball results in the console
}
Final component --> Here I have to access data and need to show it:
import {Component} from 'angular2/core';
import {CHART_DIRECTIVES, Highcharts} from 'angular2-highcharts';
//import {IncidentGraphService} from './incident-graph-service.ts';
import {EscalatedRightSideData} from './escalated-right-side.component.ts';
import {HttpService} from './http.service.ts';
//<incident-right-side-data></incident-right-side-data>
#Component({
selector: 'escalation-graph-component',
directives: [CHART_DIRECTIVES , EscalatedRightSideData]//, IncidentRightSideData],
providers: [HttpService]
//providers :[IncidentGraphService]
styles: [`
chart {
display: block;
width: 600px;
height: 300px;
margin: 0;
}
`]
template: `
<div class="row">
<div class="col-md-5">
<chart [options]="options">
<series>
<point (select)="onPointSelect($event)"></point>
</series>
</chart>
`
})
export class EscalationGraphComponent {
response: Array<any>;
ngOnInit() {
this.onGetPosts();
}
constructor(private _httpService: HttpService) {
this.options = {
series: [
{
name:'Monitored'
data: [29.9, 71.5, 106.4, 129.2], //[data.CrntWkNotifiedNotifcn , data.Prev1WkNotifiedNotifcn , data.Prev2WkNotifiedNotifcn , data.Prev3WkNotifiedNotifcn]
allowPointSelect: true
},
{
name:'UnMonitored'
data: [10, 20, 30, 40], //[data.CrntWkAnsweredNotifcn , data.Prev1WkAnsweredNotifcn,data.Prev2WkAnsweredNotifcn , data.Prev3WkAnsweredNotifcn ]
allowPointSelect: true
},
],
credits:{enabled:false},
};
}
options: Object;
onPointSelect (e) {
this.point = e.context.y;
}
onGetPosts() {
this._httpService.getPosts()
.subscribe(
response => this.response = response,
console.log("response"),
error => console.log(error);
)
}
}
Data class to hold data:
export class GraphData {
Prev2WkAnsweredNotifcn: number;
CrntYearNotifiedNotifcn: number;
CrntWkAnsweredNotifcn: number;
Prev1WkAnsweredNotifcn: number;
Prev2WkNotifiedNotifcn: number;
CrntWkNotifiedNotifcn: number;
Prev1WkNotifiedNotifcn: number;
Prev3WkNotifiedNotifcn: number;
Prev3WkAnsweredNotifcn: number;
Prev3WkAnsweredNotifcn: number;
CrntMonthNotifiedNotifcn : number;
Open:string;
Closed :string;
}
I need to store data from server to a GraphData object. And later want to access that data into component in series ---> data. See commented code in component.