Updating chart.js in Angular
up vote
0
down vote
favorite
I want to create a chart by add labels and data from an API and update this one.
I create a method addData() in charts.component.ts that looks in this way:
addData(chart, labels_builds,labels_data){
chart.data.labels.push(labels_builds);
chart.data.datasets.data.forEach(dataset => {
dataset.data.push(labels_data);
});
chart.update();
}
This will be call here:
getMisraLintChart(projectVariantId: number,filterType : string, filterValue: string): void {
this.chartService.getMisraLintChart(projectVariantId, filterType, filterValue)
.subscribe(pageChart =>{
this.chartMisraLint = pageChart
this.addData(this.myChart,pageChart.build,pageChart.data);
})
}
In ngOnInit() i have this code:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ,
datasets: [{
label: '# of Total Messages',
data: ,
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
I get the error :ERROR TypeError: Cannot read property 'forEach' of undefined.
If anyone could push me in the right direction, it would be greatly appreciated!
javascript angular typescript web
asked Nov 21 at 13:26
Madalina
32
add a comment |
up vote
0
down vote
favorite
I want to create a chart by add labels and data from an API and update this one.
I create a method addData() in charts.component.ts that looks in this way:
addData(chart, labels_builds,labels_data){
chart.data.labels.push(labels_builds);
chart.data.datasets.data.forEach(dataset => {
dataset.data.push(labels_data);
});
chart.update();
}
This will be call here:
getMisraLintChart(projectVariantId: number,filterType : string, filterValue: string): void {
this.chartService.getMisraLintChart(projectVariantId, filterType, filterValue)
.subscribe(pageChart =>{
this.chartMisraLint = pageChart
this.addData(this.myChart,pageChart.build,pageChart.data);
})
}
In ngOnInit() i have this code:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ,
datasets: [{
label: '# of Total Messages',
data: ,
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
I get the error :ERROR TypeError: Cannot read property 'forEach' of undefined.
If anyone could push me in the right direction, it would be greatly appreciated!
javascript angular typescript web
asked Nov 21 at 13:26
Madalina
32
chart.data.datasets.data.forEach()data seems to be undefined I guess
– Marv
Nov 21 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 at 13:30
Should it bechart.data.datasets.forEach? Because you have named the parameter asdataset
– adiga
Nov 21 at 13:30
Yes. I want a chart based on API data and it should be updated based on the data it receives.
– Madalina
Nov 21 at 13:34
I put chart.data.datasets.forEach and i don't see the error anymore but my chart doesn't work.
– Madalina
Nov 21 at 13:41
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I want to create a chart by add labels and data from an API and update this one.
I create a method addData() in charts.component.ts that looks in this way:
addData(chart, labels_builds,labels_data){
chart.data.labels.push(labels_builds);
chart.data.datasets.data.forEach(dataset => {
dataset.data.push(labels_data);
});
chart.update();
}
This will be call here:
getMisraLintChart(projectVariantId: number,filterType : string, filterValue: string): void {
this.chartService.getMisraLintChart(projectVariantId, filterType, filterValue)
.subscribe(pageChart =>{
this.chartMisraLint = pageChart
this.addData(this.myChart,pageChart.build,pageChart.data);
})
}
In ngOnInit() i have this code:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ,
datasets: [{
label: '# of Total Messages',
data: ,
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
I get the error :ERROR TypeError: Cannot read property 'forEach' of undefined.
If anyone could push me in the right direction, it would be greatly appreciated!
javascript angular typescript web
asked Nov 21 at 13:26
Madalina
32
I want to create a chart by add labels and data from an API and update this one.
I create a method addData() in charts.component.ts that looks in this way:
addData(chart, labels_builds,labels_data){
chart.data.labels.push(labels_builds);
chart.data.datasets.data.forEach(dataset => {
dataset.data.push(labels_data);
});
chart.update();
}
This will be call here:
getMisraLintChart(projectVariantId: number,filterType : string, filterValue: string): void {
this.chartService.getMisraLintChart(projectVariantId, filterType, filterValue)
.subscribe(pageChart =>{
this.chartMisraLint = pageChart
this.addData(this.myChart,pageChart.build,pageChart.data);
})
}
In ngOnInit() i have this code:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ,
datasets: [{
label: '# of Total Messages',
data: ,
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
I get the error :ERROR TypeError: Cannot read property 'forEach' of undefined.
If anyone could push me in the right direction, it would be greatly appreciated!
javascript angular typescript web
javascript angular typescript web
asked Nov 21 at 13:26
Madalina
32
asked Nov 21 at 13:26
Madalina
32
asked Nov 21 at 13:26
Madalina
32
asked Nov 21 at 13:26
Madalina
32
asked Nov 21 at 13:26
Madalina
32
32
chart.data.datasets.data.forEach()data seems to be undefined I guess
– Marv
Nov 21 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 at 13:30
Should it bechart.data.datasets.forEach? Because you have named the parameter asdataset
– adiga
Nov 21 at 13:30
Yes. I want a chart based on API data and it should be updated based on the data it receives.
– Madalina
Nov 21 at 13:34
I put chart.data.datasets.forEach and i don't see the error anymore but my chart doesn't work.
– Madalina
Nov 21 at 13:41
add a comment |
chart.data.datasets.data.forEach()data seems to be undefined I guess
– Marv
Nov 21 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 at 13:30
Should it bechart.data.datasets.forEach? Because you have named the parameter asdataset
– adiga
Nov 21 at 13:30
Yes. I want a chart based on API data and it should be updated based on the data it receives.
– Madalina
Nov 21 at 13:34
I put chart.data.datasets.forEach and i don't see the error anymore but my chart doesn't work.
– Madalina
Nov 21 at 13:41
chart.data.datasets.data.forEach() data seems to be undefined I guess– Marv
Nov 21 at 13:29
chart.data.datasets.data.forEach() data seems to be undefined I guess– Marv
Nov 21 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 at 13:30
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 at 13:30
Should it be
chart.data.datasets.forEach? Because you have named the parameter as dataset– adiga
Nov 21 at 13:30
Should it be
chart.data.datasets.forEach? Because you have named the parameter as dataset– adiga
Nov 21 at 13:30
Yes. I want a chart based on API data and it should be updated based on the data it receives.
– Madalina
Nov 21 at 13:34
Yes. I want a chart based on API data and it should be updated based on the data it receives.
– Madalina
Nov 21 at 13:34
I put chart.data.datasets.forEach and i don't see the error anymore but my chart doesn't work.
– Madalina
Nov 21 at 13:41
I put chart.data.datasets.forEach and i don't see the error anymore but my chart doesn't work.
– Madalina
Nov 21 at 13:41
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Technically you receive this error because you never initialized this.myChart.data.datasets.data before looping over it. You've only typed it. You could fix that by setting a default array, like so:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: = // might as well,
datasets: [{
label: '# of Total Messages',
data: = , // <== note this part, the initialization
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
That being said, I am pretty sure this will not resolve your functional goal. I am pretty sure you don't want to add result elements from the server call based on the items already there; but just want to add them all. You're frankly looping the wrong data. So you'll also have to change the addData method. Like this:
addData(chart,
labels_builds = , // See comment below
labels_data = // added this as an alternative null check for your server data.
){
chart.data.labels = [
...chart.data.labels, // Check the ES6 spread operator, you'll like it.
...labels_builds // In essence in this case it means "every element of"
];
chart.data.datasets.data = [
...chart.data.datasets.data,
...labels_data
];
chart.update();
}
answered Nov 21 at 13:45
Arne
499212
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Technically you receive this error because you never initialized this.myChart.data.datasets.data before looping over it. You've only typed it. You could fix that by setting a default array, like so:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: = // might as well,
datasets: [{
label: '# of Total Messages',
data: = , // <== note this part, the initialization
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
That being said, I am pretty sure this will not resolve your functional goal. I am pretty sure you don't want to add result elements from the server call based on the items already there; but just want to add them all. You're frankly looping the wrong data. So you'll also have to change the addData method. Like this:
addData(chart,
labels_builds = , // See comment below
labels_data = // added this as an alternative null check for your server data.
){
chart.data.labels = [
...chart.data.labels, // Check the ES6 spread operator, you'll like it.
...labels_builds // In essence in this case it means "every element of"
];
chart.data.datasets.data = [
...chart.data.datasets.data,
...labels_data
];
chart.update();
}
answered Nov 21 at 13:45
Arne
499212
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
add a comment |
up vote
0
down vote
accepted
Technically you receive this error because you never initialized this.myChart.data.datasets.data before looping over it. You've only typed it. You could fix that by setting a default array, like so:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: = // might as well,
datasets: [{
label: '# of Total Messages',
data: = , // <== note this part, the initialization
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
That being said, I am pretty sure this will not resolve your functional goal. I am pretty sure you don't want to add result elements from the server call based on the items already there; but just want to add them all. You're frankly looping the wrong data. So you'll also have to change the addData method. Like this:
addData(chart,
labels_builds = , // See comment below
labels_data = // added this as an alternative null check for your server data.
){
chart.data.labels = [
...chart.data.labels, // Check the ES6 spread operator, you'll like it.
...labels_builds // In essence in this case it means "every element of"
];
chart.data.datasets.data = [
...chart.data.datasets.data,
...labels_data
];
chart.update();
}
answered Nov 21 at 13:45
Arne
499212
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Technically you receive this error because you never initialized this.myChart.data.datasets.data before looping over it. You've only typed it. You could fix that by setting a default array, like so:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: = // might as well,
datasets: [{
label: '# of Total Messages',
data: = , // <== note this part, the initialization
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
That being said, I am pretty sure this will not resolve your functional goal. I am pretty sure you don't want to add result elements from the server call based on the items already there; but just want to add them all. You're frankly looping the wrong data. So you'll also have to change the addData method. Like this:
addData(chart,
labels_builds = , // See comment below
labels_data = // added this as an alternative null check for your server data.
){
chart.data.labels = [
...chart.data.labels, // Check the ES6 spread operator, you'll like it.
...labels_builds // In essence in this case it means "every element of"
];
chart.data.datasets.data = [
...chart.data.datasets.data,
...labels_data
];
chart.update();
}
answered Nov 21 at 13:45
Arne
499212
Technically you receive this error because you never initialized this.myChart.data.datasets.data before looping over it. You've only typed it. You could fix that by setting a default array, like so:
ngOnInit() {
this.getFilters();
var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: = // might as well,
datasets: [{
label: '# of Total Messages',
data: = , // <== note this part, the initialization
backgroundColor:'#ffe4c9',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
,
scaleLabel: {
display: true,
labelString: 'Total Messages'
}
}]
,
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Builds'
}
}]
}
}
});
That being said, I am pretty sure this will not resolve your functional goal. I am pretty sure you don't want to add result elements from the server call based on the items already there; but just want to add them all. You're frankly looping the wrong data. So you'll also have to change the addData method. Like this:
addData(chart,
labels_builds = , // See comment below
labels_data = // added this as an alternative null check for your server data.
){
chart.data.labels = [
...chart.data.labels, // Check the ES6 spread operator, you'll like it.
...labels_builds // In essence in this case it means "every element of"
];
chart.data.datasets.data = [
...chart.data.datasets.data,
...labels_data
];
chart.update();
}
answered Nov 21 at 13:45
Arne
499212
answered Nov 21 at 13:45
Arne
499212
answered Nov 21 at 13:45
Arne
499212
answered Nov 21 at 13:45
Arne
499212
499212
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
add a comment |
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Thank you very much ! ES6 spread operator is so nice. The Xaxis looks oke from API data but Yaxis does not receive anything. In this form "...chart.data.datasets.data, ...labels_data" I get ERROR TypeError: Cannot read property 'concat' of undefined.
– Madalina
Nov 21 at 14:26
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
Then you most likely didn't use the whole answer; since either your labels_data or chart.data.labels is undefined; and my full solution provided both with defaults.
– Arne
Nov 21 at 15:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413085%2fupdating-chart-js-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
chart.data.datasets.data.forEach()data seems to be undefined I guess– Marv
Nov 21 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 at 13:30
Should it be
chart.data.datasets.forEach? Because you have named the parameter asdataset– adiga
Nov 21 at 13:30
Yes. I want a chart based on API data and it should be updated based on the data it receives.
– Madalina
Nov 21 at 13:34
I put chart.data.datasets.forEach and i don't see the error anymore but my chart doesn't work.
– Madalina
Nov 21 at 13:41