I'm looking to integrate chart.js into my Angular 4 project. The plan is to retrieve data from a JSON file and display it on a graph. Everything seemed fine during compilation, but upon opening it in Chrome, I encountered an error stating "cannot read property 'map' of undefined". Can someone assist me in resolving this issue and explaining why it occurred? Below is my code in app.component.ts:
import {Component, OnInit} from '@angular/core';
import {trigger, state, style, transition, animate, keyframes} from
'@angular/animations';
import { Chart } from 'chart.js';
import { WeatherService } from './weather.service';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('myAnimation', [
state('small', style({transform: 'scale(1)', })),
state('large', style({transform: 'scale(2)', })),
// transition('small <=> large', animate('500ms ease-in' , style
({transform : ' translateY(40px)'}))),
transition('small <=> large', animate('700ms ease-in' , keyframes([
style ( { opacity: 0, transform : ' translateY(-75%)' , offset: 0})
//style ( { opacity: 1, transform : ' translateY(400px)', offset :
0.5}),
// style ( { opacity: 1, transform : ' translateY(0)', offset : 1})
]))),
]),
]
})
export class AppComponent implements OnInit {
state: String = 'small';
chart = [];
temp_max = [ ];
temp_min = [ ];
constructor(private weather: WeatherService) {}
ngOnInit() {
this.weather.dailyForecast()
.subscribe(res => {
let temp_min = res['list'];
let temp_max = res['list'];
let alldates = res['list'];
temp_min.map(res => res.main.temp_max)
temp_max.map(res => res.main.temp_min)
alldates.map(res => res.dt)
let weatherDates = []
alldates.forEach((res) => {
let jsdate = new Date(res * 1000)
weatherDates.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric'}))
})
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: weatherDates,
datasets: [
{
data: temp_max,
borderColor: '#3cba9f',
fill: false
},
{
data: temp_min,
borderColor: '#ffcc00',
fill: false
},
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}]
}
}
});
});
}