Mixing
How can we customise the series data object property names “name” & “y” as part of...
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are name & y.
And when I am trying to change these property names as vendor & rating then piechart is not loading in browser
I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.
app.component.ts
import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}And see in app.component.ts file data object set hard coded data but in my case that object data will come from rest api service in this format
[
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
]So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use vendor & rating instaed of name & y to display piechart?
app.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>
angular highcharts asked Jan 3 at 15:40
VenkiVenki
3792421
add a comment |
Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are name & y.
And when I am trying to change these property names as vendor & rating then piechart is not loading in browser
I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.
app.component.ts
import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}And see in app.component.ts file data object set hard coded data but in my case that object data will come from rest api service in this format
[
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
]So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use vendor & rating instaed of name & y to display piechart?
app.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>asked Jan 3 at 15:40
VenkiVenki
3792421
You will have to change the data format from "vendor" to "name" before using them in Highcharts. Take a look to the API
– Core972
Jan 3 at 16:08
Yeah I gone through but not getting clear-cut idea how we can modify base property names with our own names. if there is any sample code snippet it would really helpful for me @Core972.
– Venki
Jan 3 at 16:42
add a comment |
Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are name & y.
And when I am trying to change these property names as vendor & rating then piechart is not loading in browser
I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.
app.component.ts
import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}And see in app.component.ts file data object set hard coded data but in my case that object data will come from rest api service in this format
[
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
]So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use vendor & rating instaed of name & y to display piechart?
app.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>asked Jan 3 at 15:40
VenkiVenki
3792421
Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are name & y.
And when I am trying to change these property names as vendor & rating then piechart is not loading in browser
I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.
app.component.ts
import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}And see in app.component.ts file data object set hard coded data but in my case that object data will come from rest api service in this format
[
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
]So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use vendor & rating instaed of name & y to display piechart?
app.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}[
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
][
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
]<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart><highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>asked Jan 3 at 15:40
VenkiVenki
3792421
asked Jan 3 at 15:40
VenkiVenki
3792421
edited Jan 14 at 16:01
Venki
asked Jan 3 at 15:40
VenkiVenki
3792421
asked Jan 3 at 15:40
VenkiVenki
3792421
asked Jan 3 at 15:40
VenkiVenki
3792421
3792421
You will have to change the data format from "vendor" to "name" before using them in Highcharts. Take a look to the API
– Core972
Jan 3 at 16:08
Yeah I gone through but not getting clear-cut idea how we can modify base property names with our own names. if there is any sample code snippet it would really helpful for me @Core972.
– Venki
Jan 3 at 16:42
add a comment |
You will have to change the data format from "vendor" to "name" before using them in Highcharts. Take a look to the API
– Core972
Jan 3 at 16:08
Yeah I gone through but not getting clear-cut idea how we can modify base property names with our own names. if there is any sample code snippet it would really helpful for me @Core972.
– Venki
Jan 3 at 16:42
You will have to change the data format from "vendor" to "name" before using them in Highcharts. Take a look to the API
– Core972
Jan 3 at 16:08
You will have to change the data format from "vendor" to "name" before using them in Highcharts. Take a look to the API
– Core972
Jan 3 at 16:08
Yeah I gone through but not getting clear-cut idea how we can modify base property names with our own names. if there is any sample code snippet it would really helpful for me @Core972.
– Venki
Jan 3 at 16:42
Yeah I gone through but not getting clear-cut idea how we can modify base property names with our own names. if there is any sample code snippet it would really helpful for me @Core972.
– Venki
Jan 3 at 16:42
add a comment |
1 Answer
1
active
oldest
votes
Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.
However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).
Wrap code:
(function(H) {
H.wrap(H.Series.prototype, 'init', function(proceed) {
var tempArr = ,
tempObj,
key;
arguments[2].data.forEach((elem, i) => {
tempObj = {
name: elem.vendor,
y: elem.rating
};
for (key in elem) {
if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
tempObj[key] = elem[key];
}
}
tempArr[i] = tempObj;
});
arguments[2].data = tempArr;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/
API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
ANGULAR:
To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.
Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9
Another approach is to use plotOptions.series.keys and pass an array with only values.
Code:
series: [{
type: 'pie',
name: 'Browser share',
keys: ['name', 'y', 'sliced', 'selected'],
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8, true, true],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.keys
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(function). And I have updated my question please have a look.
– Venki
Jan 4 at 14:39
And to do work my code here I can ask to api team to modify property names fromvendor&ratingtoname&ythen it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.
– Venki
Jan 4 at 14:42
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
1
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you havethis.data = [{vendor: 'vendor', rating:1.23}]then you can map this data to chart likeseries: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]
– Danil Gudz
Jan 14 at 15:52
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
|
show 4 more comments
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
});
}
});
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%2f54025450%2fhow-can-we-customise-the-series-data-object-property-names-name-y-as-part%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
Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.
However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).
Wrap code:
(function(H) {
H.wrap(H.Series.prototype, 'init', function(proceed) {
var tempArr = ,
tempObj,
key;
arguments[2].data.forEach((elem, i) => {
tempObj = {
name: elem.vendor,
y: elem.rating
};
for (key in elem) {
if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
tempObj[key] = elem[key];
}
}
tempArr[i] = tempObj;
});
arguments[2].data = tempArr;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/
API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
ANGULAR:
To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.
Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9
Another approach is to use plotOptions.series.keys and pass an array with only values.
Code:
series: [{
type: 'pie',
name: 'Browser share',
keys: ['name', 'y', 'sliced', 'selected'],
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8, true, true],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.keys
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(function). And I have updated my question please have a look.
– Venki
Jan 4 at 14:39
And to do work my code here I can ask to api team to modify property names fromvendor&ratingtoname&ythen it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.
– Venki
Jan 4 at 14:42
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
1
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you havethis.data = [{vendor: 'vendor', rating:1.23}]then you can map this data to chart likeseries: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]
– Danil Gudz
Jan 14 at 15:52
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
|
show 4 more comments
Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.
However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).
Wrap code:
(function(H) {
H.wrap(H.Series.prototype, 'init', function(proceed) {
var tempArr = ,
tempObj,
key;
arguments[2].data.forEach((elem, i) => {
tempObj = {
name: elem.vendor,
y: elem.rating
};
for (key in elem) {
if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
tempObj[key] = elem[key];
}
}
tempArr[i] = tempObj;
});
arguments[2].data = tempArr;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/
API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
ANGULAR:
To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.
Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9
Another approach is to use plotOptions.series.keys and pass an array with only values.
Code:
series: [{
type: 'pie',
name: 'Browser share',
keys: ['name', 'y', 'sliced', 'selected'],
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8, true, true],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.keys
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(function). And I have updated my question please have a look.
– Venki
Jan 4 at 14:39
And to do work my code here I can ask to api team to modify property names fromvendor&ratingtoname&ythen it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.
– Venki
Jan 4 at 14:42
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
1
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you havethis.data = [{vendor: 'vendor', rating:1.23}]then you can map this data to chart likeseries: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]
– Danil Gudz
Jan 14 at 15:52
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
|
show 4 more comments
Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.
However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).
Wrap code:
(function(H) {
H.wrap(H.Series.prototype, 'init', function(proceed) {
var tempArr = ,
tempObj,
key;
arguments[2].data.forEach((elem, i) => {
tempObj = {
name: elem.vendor,
y: elem.rating
};
for (key in elem) {
if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
tempObj[key] = elem[key];
}
}
tempArr[i] = tempObj;
});
arguments[2].data = tempArr;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/
API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
ANGULAR:
To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.
Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9
Another approach is to use plotOptions.series.keys and pass an array with only values.
Code:
series: [{
type: 'pie',
name: 'Browser share',
keys: ['name', 'y', 'sliced', 'selected'],
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8, true, true],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.keys
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.
However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).
Wrap code:
(function(H) {
H.wrap(H.Series.prototype, 'init', function(proceed) {
var tempArr = ,
tempObj,
key;
arguments[2].data.forEach((elem, i) => {
tempObj = {
name: elem.vendor,
y: elem.rating
};
for (key in elem) {
if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
tempObj[key] = elem[key];
}
}
tempArr[i] = tempObj;
});
arguments[2].data = tempArr;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/
API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
ANGULAR:
To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.
Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9
Another approach is to use plotOptions.series.keys and pass an array with only values.
Code:
series: [{
type: 'pie',
name: 'Browser share',
keys: ['name', 'y', 'sliced', 'selected'],
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8, true, true],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/
API reference:
https://api.highcharts.com/highcharts/plotOptions.series.keys
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
edited Jan 7 at 8:52
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
answered Jan 4 at 8:21
Wojciech ChmielWojciech Chmiel
2,6261213
2,6261213
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(function). And I have updated my question please have a look.
– Venki
Jan 4 at 14:39
And to do work my code here I can ask to api team to modify property names fromvendor&ratingtoname&ythen it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.
– Venki
Jan 4 at 14:42
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
1
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you havethis.data = [{vendor: 'vendor', rating:1.23}]then you can map this data to chart likeseries: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]
– Danil Gudz
Jan 14 at 15:52
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
|
show 4 more comments
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(function). And I have updated my question please have a look.
– Venki
Jan 4 at 14:39
And to do work my code here I can ask to api team to modify property names fromvendor&ratingtoname&ythen it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.
– Venki
Jan 4 at 14:42
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
1
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you havethis.data = [{vendor: 'vendor', rating:1.23}]then you can map this data to chart likeseries: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]
– Danil Gudz
Jan 14 at 15:52
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(
function). And I have updated my question please have a look.– Venki
Jan 4 at 14:39
Thank you Wojciech Chmiel for your great response. This sample code snippet working perfecrly in javascript application but in my case I need to keep this logic into angular6 component file & while keeping this code getting many errors with self called function(
function). And I have updated my question please have a look.– Venki
Jan 4 at 14:39
And to do work my code here I can ask to api team to modify property names from
vendor & rating to name & y then it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.– Venki
Jan 4 at 14:42
And to do work my code here I can ask to api team to modify property names from
vendor & rating to name & y then it will wok fine as expected I hope. But in that case we may lose readability of response data at api side.– Venki
Jan 4 at 14:42
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
I updated my question of how to make it in Angular app. There you will also find a demo of the app. Check it: codesandbox.io/s/m4z0628xk9.
– Wojciech Chmiel
Jan 7 at 8:55
1
1
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you have
this.data = [{vendor: 'vendor', rating:1.23}] then you can map this data to chart like series: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]– Danil Gudz
Jan 14 at 15:52
@Venki, that's not the case to force api team to update prop names, you can map response from api call to a format that the highchart library requires: assuming you have
this.data = [{vendor: 'vendor', rating:1.23}] then you can map this data to chart like series: [{ name:'series', data: this.data.map(el => ({name: el.vendor, y: el.rating}))]– Danil Gudz
Jan 14 at 15:52
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
@Wojciech Chmiel, looks I am using different version of angular & your code snippet having angular 5 version. And even highcharts versions are different. So I need to cross verify that. Thank you Wojciech.
– Venki
Jan 14 at 16:06
|
show 4 more comments
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.
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%2f54025450%2fhow-can-we-customise-the-series-data-object-property-names-name-y-as-part%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
You will have to change the data format from "vendor" to "name" before using them in Highcharts. Take a look to the API
– Core972
Jan 3 at 16:08
Yeah I gone through but not getting clear-cut idea how we can modify base property names with our own names. if there is any sample code snippet it would really helpful for me @Core972.
– Venki
Jan 3 at 16:42