Angular2-highcharts with observables in Angular 4 project

I am trying to create a chart working with observables coming from http request, the following code is working with some fake datas I just would like to replace them by true datas coming 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: [
        [1497837618,0],[1497837738,0],[1497837858,0],[1497837978,0],[1497838098,0],[1497838218,0],[1497838338,0],[1497838458,0]    ],
        }]
    };
}

}`

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<User3[]>; constructor (public http: Http) { const tick3$ = Observable.timer(100, 60000); this.users3 = tick3$.flatMap(() => 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]]`

[Papamilo]

@PascalTemel you right you right

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { UserService3 } from '../user3.service';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'my-daydetail',
  templateUrl: './my-daydetail.component.html',
  styleUrls: ['./my-daydetail.component.css']
})
export class MyDaydetailComponent implements OnDestroy, OnInit {



    // Içi je crée un un import depuis le composent appliV2.html
    @Input() showMePartially: boolean;



    options: any;
    data: number;
    chart: any;
    // Ici j'importe la variable Subscription de l'api Rxjs que je stock dans une variable
    dataSubscription: Subscription;


     constructor(public userService3: UserService3) {

           this.options = {
            chart: {  type: 'pie',
                     plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,  },
       //     legend: { enabled: false },
            credits: { enabled: false },
             tooltip: {
   //     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
                enabled: false,
         //      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            }
          }
        },


            series: [{
              name: 'Dispo',
              data: {}
            }]
        };
    }

   // onPointSelect (e) {
     // this.point = e.context.y;
   // }

   saveInstance(chartInstance) {
    this.chart = chartInstance;
     console.log(chartInstance);
}

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




}

[Fank]

@Papamilo i fixed your syntax highlighting take a look at this https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code