Plotting JSON data with angular2-highchart

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.

Sanket · Answer 1 · 2016-07-28T10:06:35.883

3

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.

edited Jul 28 '16 at 10:06

answered Jul 28 '16 at 04:28

Sanket

19,295
10
71
82

2

As an addition to this answer, Highcharts may have data in format: [[1,15],[2,16],[3,18]], but [[[1,15],[2,16],[3,18]]] is not the correct format for your chart and the series will not be visible. – Grzegorz Blachliński Jul 28 '16 at 09:45
Thanks for the input Sanket and Grzegorz. – Vysh Jul 28 '16 at 15:42
With regards to the format inside the data.json file, I initially had it the way you have mentioned - [[1,15],[2,16],[3,18]]. It didn't make any difference and I was getting the same output. I saw another example where their data was in the format I have used here and hence I switched. And @Sanket, this example as given in the highcharts website works fine. However, when I try replacing the link with a local json file, I kept getting a 200 of for URL:data.json exception (http://stackoverflow.com/questions/38579646/response-with-status-200-ok). – Vysh Jul 28 '16 at 15:50
After a lot of trial and error, I came to this version of code which is at least able to display the contents of file via the template. – Vysh Jul 28 '16 at 15:51

score 0 · Answer 2 · answered Jul 29 '16 at 15:59

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.

Plotting JSON data with angular2-highchart

2 Answers2