Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

257
Vistas
Displaying linechart using angular2-highcharts

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?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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:

  1. 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
  2. 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.

over 4 years ago · Santiago Trujillo Denunciar

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
        }]
      };
    }
   );
  }
}
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda