Plotting JSON data with angular2-highchart - json

Question

I want to plot data in a JSON file using angular2-highcharts.
Let's say there are X and Y values in the JSON file in the following format:
[[[1,15],[2,16],[3,18]]]. The code is as follows.
#Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
template:`{{sample}}
<center> <chart [options]="options"></chart></center>`
})
export class AppComponent {
public sample;
options:Object;
constructor(public http : Http) {
http.get('data.json')
.map(res => res.json())
.subscribe(data =>this.sample=JSON.parse(JSON.stringify(data || null)),
err=>console.log(err),
() => console.log('Completed')); {}
console.log(this.sample);
this.options = {
title : { text : 'Sample Curve' },
series: [
{ data: this.sample,
color:'red'},]
}
}
}
I get the values of data in the .json file and display it as a part of the template and the correct values seem to get printed. However, my highchart plot is empty. Since i am equally new to Javascript and typescript, I probably am not making full use of some answers here already.

Answer 1

You are trying to implement simple line chart.
Line Chart expects data to be in this formats-
[29.9, 71.5, 106.4, 129.2] or [[1,15],[2,16],[3,18]]
whereas your json structure is in this format
[[[1,15],[2,16],[3,18]]]
You can try like this-
Import JSONP_PROVIDERS-
import {JSONP_PROVIDERS, Jsonp} from '#angular/http';
providers: [JSONP_PROVIDERS],
In html template-
<chart [options]="options1"></chart>
In your component-
options1: Object;
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options1 = {
title : { text : 'AAPL Stock Price' },
series : [{
name : 'AAPL',
data : res.json(),
tooltip: {
valueDecimals: 2
}
}]
};
});
See if this helps.

Answer 2

Okay, so, the options for the chart component needs to be set within the subscribe method as in the above example Sanket has posted. I was not giving it within subscribe. The value stored in this.sample goes back to what it was initialized to once outside the subscribe method.I still don't understand why the values get printed correctly in the template portion though.