Currently, I am utilizing an npm package for chart creation, which can be found at the following link: https://www.npmjs.com/package/angular-highcharts
I have a specific interface set up and I aim to extract values from this interface to populate a line graph within the chart. My main goal is to display a line graph at this point in time.
After experimenting with different array methods, I discovered that initializing the array with hardcoded values works perfectly fine. However, my objective is to dynamically load values from a service into an interface and then transfer these values from the interface to the chart. What could be causing this issue?
Below is the contents of my component.ts file:
import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { WeatherstatsService } from '../weatherstats.service';
import 'rxjs/add/operator/map';
interface WeatherData {
id: any;
year: any;
measurement_type: string;
location: string;
month_or_season: string;
value?: any;
}
let datavalues: WeatherData [] = [];
@Component({
selector: 'weatherchart',
templateUrl: './weatherchart.component.html',
styleUrls: ['./weatherchart.component.css']
})
export class WeatherchartComponent implements OnInit {
constructor(private weatherstatsservice: WeatherstatsService) { }
title = "Title";
data: any;
datavalues = datavalues;
values: Array<number> = [];
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: this.title,
},
credits: {
enabled: false
},
series: [{
name: 'Line 1',
data: this.datavalues.year,
}]
});
// add point to chart serie
add() {
this.chart.addPoint(Math.floor(Math.random() * 10));
}
ngOnInit() {
this.weatherstatsservice.getWeatherData()
.subscribe(data => {
this.data = data.slice(0, 100);
if(this.data){
this.data.forEach( res => {
this.datavalues.push({
id: res.id,
year: res.year,
measurement_type: res.measurement_type,
location: res.location,
month_or_season: res.month_or_season,
value: res.value,
})
});
console.log(this.datavalues);
}
})
}
}