Angular2-highcharts with observables in Angular 4 project

Question

I am trying to create a chart working with observables comming from http request, the following code is working with some fake datas I just would like to replace them by true datas comming from a backend-end script here's my code:

my app.ts:

export class MyVerticalchartComponent  {


   @Input() showMePartially: boolean;

  options: Object;

  constructor(public userService3: UserService3) {

       this.options = {
        title : { text : '' },
        chart: {  type: 'area' },
        legend: { enabled: false },
        credits: { enabled: false },
        xAxis: { type: 'datetime',
              //    startOnTick: true,
              //    endOnTick: true,
              //    tickInterval: 24 * 3600 * 1000,
            },
                  dateTimeLabelFormats: {
            second: '%H:%M:%S',
            minute: '%H:%M:%S',
            hour: '%H:%M:%S',
            day: '%H:%M:%S',
            week: '%H:%M:%S',
            month: '%H:%M:%S',
            year: '%H:%M:%S'
        },
        yAxis: { min: 0,
          max: 100 },
        plotOptions: {
          series: {
          //  pointStart: 0,
              color: '#648e59',
              fillOpacity: 0.8,
              fillColor: '#648e59'
                  }
        },
       series: [{
          name: 'Someone1',
          data: [],  // res.json
        }]
    };
  }

      public ngOnInit () {
      this.userService3.getData().subscribe((data) => {
       this.options.series[0].data.operating_details = data;
       console.log(data);
  });

} }

my app.html:

 <chart [options]="options">
      <series>
     </series>
  </chart>

my http service.ts:

export interface User3 {
 data: any;
}
const usersURL = 'http://my.super.backend.script.com';

@Injectable() export class UserService3 {

users3: Observable;

constructor (public http: Http) {

        getData() {

 const tick3$ = Observable.timer(100, 60000);

     return tick3$.flatMap(() => this.http.get(usersURL)).map(res => 
     res.json()).publishBehavior(<User3[]>[]).refCount();



 }
    }

my json looks like:

  "operating_details":[[1497837618,0],[1497837738,0],[1497837858,0],
  [1497837978,0],[1497838098,0],[1497838218,0],[1497838338,0],
  [1497838458,0],[1497838578,0],[1497838698,0],[1497838818,0],
  [1497838938,0],[1497839058,0],[1497839178,0],[1497839298,0],
  [1497839418,0],[1497839538,0],[1497839658,0],[1497839778,0]]

LLai · Accepted Answer · 2017-06-23T16:35:39.240

1

typically you would define a method in the service file that sets up the http request

getData(){
    return this.http.get(usersUrl)
        .map(res => res.json());
}

then in your component app.ts you would subscribe to the observable.

ngOnInit(){
    this.userService3.getData().subscribe(
        res => {
            this.options.series[0].data = res; // set series data to options object
        },
        err => {
            // error callback
        }
}

edited Jun 23 '17 at 16:35

answered Jun 21 '17 at 02:07

LLai

13,128
3
41
45

it doeasn't work, sorry I haven't time to test it before but it was looking good to me so in the service it works nice but in my component when I tried your code I've code an error: [ts] Property 'subscribe' does not exist on type 'void'. any – Emile Cantero Jun 23 '17 at 08:16
@EmileCantero sounds like the method you are calling from the component is not returning an observable. Sorry I realized I forgot the return statement in my answer. I will update it – LLai Jun 23 '17 at 13:11
I move on a lot now but I am still stocked: lookup my component: series: [{ name: 'Someone1', data: [], // res.json }] }; } public ngOnInit () { this.userService3.getData().subscribe((data) => { this.options.series[0].data.operating_details = data; }); } and my service: getData() { const tick3$ = Observable.timer(100, 60000); return tick3$.flatMap(() => this.http.get(usersURL)).map(res => res.json()).publishBehavior([]).refCount(); }..I update my post too – Emile Cantero Jun 23 '17 at 13:15
@EmileCantero do you need operating_details in this.options.series[0].data.operating_details? this.options.series[0].data should be your array of data right? – LLai Jun 23 '17 at 13:19
exactly my friend.. in my console.log() I get my object but I can't render it in my chart..looks like a path issue.. – Emile Cantero Jun 23 '17 at 13:20
@EmileCantero gotcha, so no errors now. it is just not rendering? – LLai Jun 23 '17 at 13:22
yes my console.log() return me "Object" from public ngOnInit () { this.userService3.getData().subscribe((data) => { this.options.series[0].data = data; console.log(data); }); ...I put away .operating_details to just this.options.series[0].data = data; – Emile Cantero Jun 23 '17 at 13:26
@EmileCantero since angular2-highcharts is just a wrapper for the highcharts library you will have to redraw the chart manually. I will update my answer – LLai Jun 23 '17 at 13:30
thanks for your help bro but it generate an error : MyVerticalchartComponent.html:5 ERROR TypeError: co.saveInstance is not a function, should I add saveInstance method in ngOnit? – Emile Cantero Jun 23 '17 at 13:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147466/discussion-between-llai-and-emile-cantero). – LLai Jun 23 '17 at 13:55

Angular2-highcharts with observables in Angular 4 project

1 Answers1