Using data received from Backend in Angular Highchart
up vote
0
down vote
favorite
This is how I have been displaying data in a stacked column highchart in angular 5.
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
}, {
name: 'ABC',
data: [2, 2, 3, 2, 1]
}, {
name: 'MNP',
data: [3, 4, 4, 2, 5]
}, {
name: 'ASM',
data: [3, 5, 2, 3, 6]
}, {
name: 'BCC',
data: [2, 5, 3, 4, 6]
}]
Now, I have been trying that on initialization of this component I get data from backend and use it here. I am successful in getting data as shown below but dont know how to use it to display in high charts.
ngOnInit() {
this.metricService.getPluginMetrics().subscribe(data =>{
this.metricItems = data;
console.log(this.metricItems[0].value);
})
};
Data is fetched from a json file at backend to mock an API for now and then converted into string and this is how the data is being returned.
This is some of the content of JSON file.
[
{
"name": "DEF",
"value": [10, 20, 40, 60, 60],
"type": "",
"timestamp": 1533822125000
},
{
"name": "ABC",
"value": [5, 3, 4, 7, 2, 6],
"type": "",
"timestamp": 1533822125000
}
]
At the angular frontend the object for MetricItem is
export interface MetricItem {
name: string;
value: string;
type: string;
timestamp: string;
}
Also I tried to replace
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
},.......
with
series: [{
name: this.metricItems[0].name,
data: this.metricItems[0].value
}
But this has no effect and chart is not displayed. Could you please tell how to approach this.
EDIT: As @Core972 suggested in comments I replaced
title: {
text: 'Stacked Consumption chart'
}
with this
title: {
text: this.metricItems[0].name
}
but the chart is not displayed.
angular highcharts
asked Nov 4 at 9:49
Shaurya
1187
|
show 2 more comments
up vote
0
down vote
favorite
This is how I have been displaying data in a stacked column highchart in angular 5.
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
}, {
name: 'ABC',
data: [2, 2, 3, 2, 1]
}, {
name: 'MNP',
data: [3, 4, 4, 2, 5]
}, {
name: 'ASM',
data: [3, 5, 2, 3, 6]
}, {
name: 'BCC',
data: [2, 5, 3, 4, 6]
}]
Now, I have been trying that on initialization of this component I get data from backend and use it here. I am successful in getting data as shown below but dont know how to use it to display in high charts.
ngOnInit() {
this.metricService.getPluginMetrics().subscribe(data =>{
this.metricItems = data;
console.log(this.metricItems[0].value);
})
};
Data is fetched from a json file at backend to mock an API for now and then converted into string and this is how the data is being returned.
This is some of the content of JSON file.
[
{
"name": "DEF",
"value": [10, 20, 40, 60, 60],
"type": "",
"timestamp": 1533822125000
},
{
"name": "ABC",
"value": [5, 3, 4, 7, 2, 6],
"type": "",
"timestamp": 1533822125000
}
]
At the angular frontend the object for MetricItem is
export interface MetricItem {
name: string;
value: string;
type: string;
timestamp: string;
}
Also I tried to replace
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
},.......
with
series: [{
name: this.metricItems[0].name,
data: this.metricItems[0].value
}
But this has no effect and chart is not displayed. Could you please tell how to approach this.
EDIT: As @Core972 suggested in comments I replaced
title: {
text: 'Stacked Consumption chart'
}
with this
title: {
text: this.metricItems[0].name
}
but the chart is not displayed.
angular highcharts
asked Nov 4 at 9:49
Shaurya
1187
1
Post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 9:53
Just to be sure it's a data problem, could you add a title to the chart parameters and look if the title appear. Also Highcharts require data as numbers so check ifthis.metricItems[0].valueare really numbers and not strings.
– Core972
Nov 4 at 9:55
@Core972 As I mentioned this.metricItems[0].value are actually string. I tried to do JSON.parse() but to no avail.
– Shaurya
Nov 4 at 9:58
@Core972 I replaced the title with one of the parameters of the data received but the whole chart is not displayed.
– Shaurya
Nov 4 at 10:14
@Shaurya no, you said that the JSON contains"value": [10, 20, 40, 60, 60]. So it's not a string. It's an array of numbers. Again, post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 10:49
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This is how I have been displaying data in a stacked column highchart in angular 5.
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
}, {
name: 'ABC',
data: [2, 2, 3, 2, 1]
}, {
name: 'MNP',
data: [3, 4, 4, 2, 5]
}, {
name: 'ASM',
data: [3, 5, 2, 3, 6]
}, {
name: 'BCC',
data: [2, 5, 3, 4, 6]
}]
Now, I have been trying that on initialization of this component I get data from backend and use it here. I am successful in getting data as shown below but dont know how to use it to display in high charts.
ngOnInit() {
this.metricService.getPluginMetrics().subscribe(data =>{
this.metricItems = data;
console.log(this.metricItems[0].value);
})
};
Data is fetched from a json file at backend to mock an API for now and then converted into string and this is how the data is being returned.
This is some of the content of JSON file.
[
{
"name": "DEF",
"value": [10, 20, 40, 60, 60],
"type": "",
"timestamp": 1533822125000
},
{
"name": "ABC",
"value": [5, 3, 4, 7, 2, 6],
"type": "",
"timestamp": 1533822125000
}
]
At the angular frontend the object for MetricItem is
export interface MetricItem {
name: string;
value: string;
type: string;
timestamp: string;
}
Also I tried to replace
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
},.......
with
series: [{
name: this.metricItems[0].name,
data: this.metricItems[0].value
}
But this has no effect and chart is not displayed. Could you please tell how to approach this.
EDIT: As @Core972 suggested in comments I replaced
title: {
text: 'Stacked Consumption chart'
}
with this
title: {
text: this.metricItems[0].name
}
but the chart is not displayed.
angular highcharts
asked Nov 4 at 9:49
Shaurya
1187
This is how I have been displaying data in a stacked column highchart in angular 5.
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
}, {
name: 'ABC',
data: [2, 2, 3, 2, 1]
}, {
name: 'MNP',
data: [3, 4, 4, 2, 5]
}, {
name: 'ASM',
data: [3, 5, 2, 3, 6]
}, {
name: 'BCC',
data: [2, 5, 3, 4, 6]
}]
Now, I have been trying that on initialization of this component I get data from backend and use it here. I am successful in getting data as shown below but dont know how to use it to display in high charts.
ngOnInit() {
this.metricService.getPluginMetrics().subscribe(data =>{
this.metricItems = data;
console.log(this.metricItems[0].value);
})
};
Data is fetched from a json file at backend to mock an API for now and then converted into string and this is how the data is being returned.
This is some of the content of JSON file.
[
{
"name": "DEF",
"value": [10, 20, 40, 60, 60],
"type": "",
"timestamp": 1533822125000
},
{
"name": "ABC",
"value": [5, 3, 4, 7, 2, 6],
"type": "",
"timestamp": 1533822125000
}
]
At the angular frontend the object for MetricItem is
export interface MetricItem {
name: string;
value: string;
type: string;
timestamp: string;
}
Also I tried to replace
series: [{
name: 'DEF',
data: [5, 3, 4, 7, 2]
},.......
with
series: [{
name: this.metricItems[0].name,
data: this.metricItems[0].value
}
But this has no effect and chart is not displayed. Could you please tell how to approach this.
EDIT: As @Core972 suggested in comments I replaced
title: {
text: 'Stacked Consumption chart'
}
with this
title: {
text: this.metricItems[0].name
}
but the chart is not displayed.
angular highcharts
angular highcharts
asked Nov 4 at 9:49
Shaurya
1187
asked Nov 4 at 9:49
Shaurya
1187
edited Nov 4 at 10:11
asked Nov 4 at 9:49
Shaurya
1187
asked Nov 4 at 9:49
Shaurya
1187
asked Nov 4 at 9:49
Shaurya
1187
1187
1
Post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 9:53
Just to be sure it's a data problem, could you add a title to the chart parameters and look if the title appear. Also Highcharts require data as numbers so check ifthis.metricItems[0].valueare really numbers and not strings.
– Core972
Nov 4 at 9:55
@Core972 As I mentioned this.metricItems[0].value are actually string. I tried to do JSON.parse() but to no avail.
– Shaurya
Nov 4 at 9:58
@Core972 I replaced the title with one of the parameters of the data received but the whole chart is not displayed.
– Shaurya
Nov 4 at 10:14
@Shaurya no, you said that the JSON contains"value": [10, 20, 40, 60, 60]. So it's not a string. It's an array of numbers. Again, post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 10:49
|
show 2 more comments
1
Post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 9:53
Just to be sure it's a data problem, could you add a title to the chart parameters and look if the title appear. Also Highcharts require data as numbers so check ifthis.metricItems[0].valueare really numbers and not strings.
– Core972
Nov 4 at 9:55
@Core972 As I mentioned this.metricItems[0].value are actually string. I tried to do JSON.parse() but to no avail.
– Shaurya
Nov 4 at 9:58
@Core972 I replaced the title with one of the parameters of the data received but the whole chart is not displayed.
– Shaurya
Nov 4 at 10:14
@Shaurya no, you said that the JSON contains"value": [10, 20, 40, 60, 60]. So it's not a string. It's an array of numbers. Again, post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 10:49
1
1
Post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 9:53
Post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 9:53
Just to be sure it's a data problem, could you add a title to the chart parameters and look if the title appear. Also Highcharts require data as numbers so check if
this.metricItems[0].value are really numbers and not strings.– Core972
Nov 4 at 9:55
Just to be sure it's a data problem, could you add a title to the chart parameters and look if the title appear. Also Highcharts require data as numbers so check if
this.metricItems[0].value are really numbers and not strings.– Core972
Nov 4 at 9:55
@Core972 As I mentioned this.metricItems[0].value are actually string. I tried to do JSON.parse() but to no avail.
– Shaurya
Nov 4 at 9:58
@Core972 As I mentioned this.metricItems[0].value are actually string. I tried to do JSON.parse() but to no avail.
– Shaurya
Nov 4 at 9:58
@Core972 I replaced the title with one of the parameters of the data received but the whole chart is not displayed.
– Shaurya
Nov 4 at 10:14
@Core972 I replaced the title with one of the parameters of the data received but the whole chart is not displayed.
– Shaurya
Nov 4 at 10:14
@Shaurya no, you said that the JSON contains
"value": [10, 20, 40, 60, 60]. So it's not a string. It's an array of numbers. Again, post a complete minimal example reproducing the issue.– JB Nizet
Nov 4 at 10:49
@Shaurya no, you said that the JSON contains
"value": [10, 20, 40, 60, 60]. So it's not a string. It's an array of numbers. Again, post a complete minimal example reproducing the issue.– JB Nizet
Nov 4 at 10:49
|
show 2 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53139522%2fusing-data-received-from-backend-in-angular-highchart%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
1
Post a complete minimal example reproducing the issue.
– JB Nizet
Nov 4 at 9:53
Just to be sure it's a data problem, could you add a title to the chart parameters and look if the title appear. Also Highcharts require data as numbers so check if
this.metricItems[0].valueare really numbers and not strings.– Core972
Nov 4 at 9:55
@Core972 As I mentioned this.metricItems[0].value are actually string. I tried to do JSON.parse() but to no avail.
– Shaurya
Nov 4 at 9:58
@Core972 I replaced the title with one of the parameters of the data received but the whole chart is not displayed.
– Shaurya
Nov 4 at 10:14
@Shaurya no, you said that the JSON contains
"value": [10, 20, 40, 60, 60]. So it's not a string. It's an array of numbers. Again, post a complete minimal example reproducing the issue.– JB Nizet
Nov 4 at 10:49