Issue
I have complication in pushing the data that i have compute in typescript component into my chart.js code. when I check it in web interface with the chart.js the data do appear.
the data appear in the web view
code I use to call the data in web view
but when I use this.october (i.e) into the chart.js code. it didnt appear.
this is the code I used to subscribe and count the data
.subscribe((dataChart) => {
for (const e of dataChart) {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var str=e.strRequestDate; //Set the string in the proper format(best to use ISO format ie YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS)
var d=new Date(str); //converts the string into date object
// console.log(d)
var m=d.getMonth(); //get the value of month
//console.log(monthNames[m]) // Print the month name
if (monthNames[m] === "January"){
this.January++
}
if (monthNames[m] === "February"){
this.February++
}
if (monthNames[m] === "March"){
this.March++
}
if (monthNames[m] === "April"){
this.April++
}
if (monthNames[m] === "May"){
this.May++
}
if (monthNames[m] === "June"){
this.June++
}
if (monthNames[m] === "July"){
this.July++
}
if (monthNames[m] === "August"){
this.August++
}
if (monthNames[m] === "September"){
this.September++
}
if (monthNames[m] === "October"){
this.October++
}
if (monthNames[m] === "November"){
this.November++
}
if (monthNames[m] === "December"){
this.December++
}
}
// console.log(this.January) //checking if the value properly generated
},
(error) => {
console.error(error);
}
);
}
this is the code for chart.js within the same component with API that I count.
ngOnInit() {
var myChart = new Chart("myChart", {
type: 'line',
data: {
//labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
labels: ['October', 'November', 'December', 'January', 'February', 'March'],
datasets: [{
label: 'Monthly Record of IT SIR Request',
data: [this.October, this.November, this.December, this.January, this.February, this.March], <== this data return 0 in the chart
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(153, 0, 153, 0.2)',
'rgba(102, 255, 153, 0.2)',
'rgba(255, 51, 0, 0.2)',
'rgba(204, 0, 204, 0.2)',
'rgba(0, 0, 255, 0.2)',
'rgba(0, 153, 153, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(153, 0, 153, 1)',
'rgba(102, 255, 153, 1)',
'rgba(255, 51, 0, 1)',
'rgba(204, 0, 204, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 153, 153, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
}
lastly this is the error that i screenshot
Solution
I found an answer. i need to write the code within the subscribe in order for me to reuse the data that i have manipulate for the chart.js
this is the answer on how to make it work:
.subscribe((dataChart) => {
for (const e of dataChart) {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var str=e.strRequestDate; //Set the string in the proper format(best to use ISO format ie YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS)
var d=new Date(str); //converts the string into date object
// console.log(d)
var m=d.getMonth(); //get the value of month
//console.log(monthNames[m]) // Print the month name
if (monthNames[m] === "January"){
this.January++
}
if (monthNames[m] === "February"){
this.February++
}
if (monthNames[m] === "March"){
this.March++
}
if (monthNames[m] === "April"){
this.April++
}
if (monthNames[m] === "May"){
this.May++
}
if (monthNames[m] === "June"){
this.June++
}
if (monthNames[m] === "July"){
this.July++
}
if (monthNames[m] === "August"){
this.August++
}
if (monthNames[m] === "September"){
this.September++
}
if (monthNames[m] === "October"){
this.October++
}
if (monthNames[m] === "November"){
this.November++
}
if (monthNames[m] === "December"){
this.December++
}
}
var myChart = new Chart("myChart", {
type: 'line',
data: {
labels: ['October 2020', 'November 2020', 'December 2020', 'January 2021', 'February 2021', 'March 2021'],
datasets: [{
label: 'Monthly Record of IT SIR Request',
data: [this.October, this.November, this.December, this.January, this.February, this.March],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(153, 0, 153, 0.2)',
'rgba(102, 255, 153, 0.2)',
'rgba(255, 51, 0, 0.2)',
'rgba(204, 0, 204, 0.2)',
'rgba(0, 0, 255, 0.2)',
'rgba(0, 153, 153, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(153, 0, 153, 1)',
'rgba(102, 255, 153, 1)',
'rgba(255, 51, 0, 1)',
'rgba(204, 0, 204, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 153, 153, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
},