Displaying linechart using angular2-highcharts

Question

I want to display a line chart from JSON data. I have used angular2-highcharts. The problem is that the chart is displayed without data. I think that the issue is from extracting data from JSON.

The JSON format looks like this:

[{"_id" : ObjectId("59049a7b223f1e21ee4ee23b"),"amount" : 1,"date" : 
 "Mon, 18 Dec 1995 18:28:35 GMT"},{"_id" : 
  ObjectId("59049a7b223f1e21ee4ee23b"),"amount" : 1,"date" : "Mon, 18 
  Dec 1995 19:28:35 GMT"}]

I need only the "amount" in the X value and the "date" in the Y value. Here is my code

ChartistJs.service.js

  import {Injectable} from '@angular/core';
  import { Headers, Http, RequestOptions, Response } from '@angular/http';
  import { Observable }     from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import { Data } from "./Data";
  import 'rxjs/add/operator/toPromise';

  private Url ='http://localhost:3000/transfer/chart'; 
  constructor (private http: Http) {}
  getData(){
  return this.http.get(this.Url)
             .toPromise()
             .then(response => response.json())
             .catch(this.handleError);
        }

ChartistJs.component.ts

 import {Component} from '@angular/core';
 import {ChartistJsService} from './chartistJs.service';
 import 'style-loader!./chartistJs.scss';
 import { Observable } from "rxjs/Observable";
 import { ChartModule } from 'angular2-highcharts';
 import 'rxjs/Rx';
 import {Observer} from 'rxjs/Observer';
 import {Http, Jsonp} from '@angular/http';

 @Component({
 selector: 'chartist-js',
 template: `
  <chart [options]="options"></chart>
 `,
 providers : [ChartistJsService]
   })

export class ChartistJs {
options: Object;
constructor(private _chartistJsService:ChartistJsService) {
var chartData = this._chartistJsService.getData(); 
this.options = {
        title : { text : 'simple chart' },
        xAxis: {
            type: 'category'
        },
        series: [{
          data: chartData

        }]
     };
  }
}

Can you help me how to deal with JSON data in Angular 2?

Community · Accepted Answer · 2017-05-23 12:02:17Z

1

As Pankaj points out you are trying to pass a promise as the data, not the actual data that the promise eventually resolves to. More broadly, though, you aren't really using the tooling that Angular provides for dealing with HTTP.

In general, I would recommend that you:

Get used to dealing with observables, which is what Angular uses natively, rather than converting everything back to promises (although I think they still show this in the docs); and
Lean into the asynchronous nature of the observables, using the AsyncPipe to resolve them into your templates and the objects that RxJS provides to manipulate the data flow.

More specifically, here's one way you could implement what you're currently trying to.

Service:

@Injectable()
class DataService {

  // acts as a pipe for the data that you can push new items into
  private dataSubject = ReplaySubject(1);

  // takes the subject and exposes the result, read-only
  chartData$ = this.dataSubject.asObservable();

  constructor (private http: Http) {}

  getData() {
    // GETs the data and pushes it into the subject
    this.http.get('http://localhost:3000/transfer/chart')
      .map(response => response.json())
      .subscribe(data => this.dataSubject.next(data));
  }
}

Component:

@Component({
  ... ,
  // resolves the chart options asynchronously in the template
  template: `
    <chart [options]="chartOptions$ | async"></chart>
  `
})
export class MyChartComponent implements OnInit {
  chartOptions$: Observable<any>;

  constructor(dataService: DataService) {
    // creates a new observable of the chart options
    this.chartOptions$ = this.dataService.chartData$
      .map(data => this.createChartOptions(data));
  }

  ngOnInit() {
    // triggers a fetch of the data to feed the observable
    this.dataService.getData();
  }

  private createChartOptions(data) {
    return {
      title: { text: 'simple chart' },
      xAxis: { type: 'category' },
      series: [{ data: data }],
    };
  }
}

You will probably need to do more to the JSON than just pass it as the series.data, but this hopefully gives you an idea of how to leverage the stream of events an observable can provide. I've written more about this on my blog, including a follow-up article on testing.

Also note that your components shouldn't be importing anything from '@angular/http' - leave that to the services, use them as a layer of abstraction from the source of the data - and you can load providers at the module, rather than component, level.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 29, 2017 at 22:18

jonrsharpe

123k31 gold badges277 silver badges488 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pankaj Parkar Over a year ago

You nailed it. I love your answer and blog as well +1 sir

takampika Over a year ago

Thanks for your reply! Have you any idea how to deal with the JSON. I still bloqued there:/

jonrsharpe Over a year ago

@takampika what do you mean "deal with the JSON"? What have you tried? Are you getting unexpected outputs? Errors? Give a minimal reproducible example.

takampika Over a year ago

I tried to display line charts. I need only the amount for the Yvalue and the date for the Xvalue from the JSON file (that I have written above)! I follow your code I have only a graphic without data!

jonrsharpe Over a year ago

@takampika then look at the Highcharts examples and your data and figure out how to make the series you need. Maybe start by manually creating the data to show the chart you want (so createChartOptions ignores its input), then work back from there.

|

Pankaj Parkar · Accepted Answer · 2017-04-29 21:34:36Z

0

Actually chartData variable does hold Promise returned by getData method. Where you should keep .then over the getData method calla and assign options with chartData like shown below.

It would be more better if you can do the same in ngOnInit lifecycle event.

Code

export class ChartistJs {
  options: Object;
  constructor(private _chartistJsService: ChartistJsService) {}
  ngOnInit() {
   this._chartistJsService.getData().then(
    (data) => {
      this.options = {
        title: {
          text: 'simple chart'
        },
        xAxis: {
          type: 'category'
        },
        series: [{
          data: data
        }]
      };
    }
   );
  }
}

edited Apr 29, 2017 at 21:34

answered Apr 29, 2017 at 21:29

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Displaying linechart using angular2-highcharts

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related