object to fill highstock failing

[GrizzlyProgrammer]

Hello.

I found a rather unusual problem when using the highstock in my code. Here's what I have

` import { Component, OnInit } from '@angular/core'; import { Ng2Highstocks } from 'ng2-highcharts'; import { ChartdataService } from './../../services/chartdata/chartdata.service'; //import { ChartTimedData } from './../../services/chartdata/chartdata';

@Component({ selector: 'app-chart', templateUrl: './chart.component.html', styleUrls: ['./chart.component.css'] })

export class ChartComponent implements OnInit {

public errorMessage: string = '';
public chart: any;
public chartStock = {
        rangeSelector: {
          selected: 1
        },
        title: {
          text: 'Time Data Series Example'
        },
        series: {
          name: 'Indicador',
          data: [],
          tooltip: {
            valueDecimals: 2
          }
        }
      };

constructor(private chartService: ChartdataService) {

}

ngOnInit(){
    this.fillChart();       
}

public fillChart(){
    this.chartService.getAll().toPromise().then( 
        crt => {
            this.chart=crt;
            this.chart.values.forEach (item => {
                console.log(this.chartStock);
                this.chartStock.series.data.push([item.date, item.value]);
            });
        },
        err => this.errorMessage = err
    );
}

} `

The issue is, when I execute console.log(this.chartStock); the output says that rangeSelector has an object, and so does title. But series appears to be null.

However, if I change "series" to "series1", "serie" or even whatever randomized word you may think (I used "potato"), the field seems to be an obect with name, data and tooltip fields. And since to make it work, I have to use an object with specific names for the fields, this turns out to be a real problem.

However, series is not null if I declare chartStock public and static... which is actually pretty weird.

Any ideas for this reason to happen? Cause I have none.

I add the link with an example from other page, just in case it helps somehow.

https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/client/app/charts/charts.component.ts

Thanks in advance!

[Bigous]

Hi @GrizzlyProgrammer ,

Could you fork the angular2-seed example that you linked or this other running example with ng cli and change it so I can see the problem occurring?

tks

[Bigous]

Looking it back again, i see that you never change the root object. And highcharts looks for it to change the graphics.

try this:

public fillChart(){
   const self = this;
    this.chartService.getAll().toPromise().then( 
        crt => {
            self.chart=crt;
            self.chartStock = {
                rangeSelector: {
                 selected: 1
               },
               title: {
                 text: 'Time Data Series Example'
               },
               series: {
                 name: 'Indicador',
                 data: [],
                 tooltip: {
                   valueDecimals: 2
                 }
               }
             };
            self.chart.values.forEach (item => {
                console.log(self.chartStock);
                self.chartStock.series.data.push([item.date, item.value]);
            });
        },
        err => self.errorMessage = err
    );
}

[Bigous]

Closing it. If you need some help, let me know.