Updating chart.js in Angular
0
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 '18 at 13:26
MadalinaMadalina
267
add a comment |
0
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 '18 at 13:26
MadalinaMadalina
267
chart.data.datasets.data.forEach()data seems to be undefined I guess
– Marv
Nov 21 '18 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 '18 at 13:30
Should it bechart.data.datasets.forEach? Because you have named the parameter asdataset
– adiga
Nov 21 '18 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 '18 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 '18 at 13:41
add a comment |
0
0
0
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 '18 at 13:26
MadalinaMadalina
267
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 '18 at 13:26
MadalinaMadalina
267
asked Nov 21 '18 at 13:26
MadalinaMadalina
267
asked Nov 21 '18 at 13:26
MadalinaMadalina
267
asked Nov 21 '18 at 13:26
MadalinaMadalina
267
asked Nov 21 '18 at 13:26
MadalinaMadalina
267
267
chart.data.datasets.data.forEach()data seems to be undefined I guess
– Marv
Nov 21 '18 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 '18 at 13:30
Should it bechart.data.datasets.forEach? Because you have named the parameter asdataset
– adiga
Nov 21 '18 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 '18 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 '18 at 13:41
add a comment |
chart.data.datasets.data.forEach()data seems to be undefined I guess
– Marv
Nov 21 '18 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 '18 at 13:30
Should it bechart.data.datasets.forEach? Because you have named the parameter asdataset
– adiga
Nov 21 '18 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 '18 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 '18 at 13:41
chart.data.datasets.data.forEach() data seems to be undefined I guess– Marv
Nov 21 '18 at 13:29
chart.data.datasets.data.forEach() data seems to be undefined I guess– Marv
Nov 21 '18 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 '18 at 13:30
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 '18 at 13:30
Should it be
chart.data.datasets.forEach? Because you have named the parameter as dataset– adiga
Nov 21 '18 at 13:30
Should it be
chart.data.datasets.forEach? Because you have named the parameter as dataset– adiga
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 at 13:41
add a comment |
1 Answer
1
active
oldest
votes
0
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 '18 at 13:45
ArneArne
569212
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 '18 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 '18 at 15:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 '18 at 13:45
ArneArne
569212
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 '18 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 '18 at 15:04
add a comment |
0
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 '18 at 13:45
ArneArne
569212
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 '18 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 '18 at 15:04
add a comment |
0
0
0
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 '18 at 13:45
ArneArne
569212
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 '18 at 13:45
ArneArne
569212
answered Nov 21 '18 at 13:45
ArneArne
569212
answered Nov 21 '18 at 13:45
ArneArne
569212
answered Nov 21 '18 at 13:45
ArneArne
569212
569212
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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 15:04
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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 '18 at 13:29
Do you want a chart based on API data, and update chart if data changes?
– Maihan Nijat
Nov 21 '18 at 13:30
Should it be
chart.data.datasets.forEach? Because you have named the parameter asdataset– adiga
Nov 21 '18 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 '18 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 '18 at 13:41