Develop Reference

Convert row-data to sunburst chart data for Highcharts library

My Row-Data which I got from my MongoDB database. Now, I want to convert the below data to sunburst chart data. Can anyone help me?
These are my Input data array.
[
{
"globalId": "Chart Global",
"country": "India",
"state": "Gujarat",
"city": "Vadodara",
"mode": "traffic",
"value": 2.9
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Rajsthan",
"city": "Jaipur",
"mode": "traffic",
"value": 2.9
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "traffic",
"value": 100
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "population",
"value": 2000
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "animals",
"value": 5
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "birds",
"value": 0
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "trees",
"value": 0
}
]
I want data for the sunburst Chart for highcharts library
Does anyone have solutions?

As a start point you can use this function (I changed a little bit the data to see more effects):
function seqToBurstData(originalData, circleKeys){
const sunBurstData = [];
const valuePath2pointId = {}; // auxiliary data used to identify the parent id of a point
// get all the values for {dataPoint} from top key to {level} key, joined by '_'
// used to index nameLevel2pointId data, to ensure each point has a unique index value
const valuePath = (dataPoint, level) =>
Array.from({length: level}, (_, i) => dataPoint[circleKeys[i]]).join('_');
circleKeys.forEach(function(key, index){
const level = index + 1;
let currentValuePath = null, nValues = 0, sunBurstPoint;
for(const o of originalData){
const thisValuePath = valuePath(o, level);
if(thisValuePath !== currentValuePath){
currentValuePath = thisValuePath;
sunBurstPoint = {
id: level + '.' + nValues, // scheme similar to Highcharts examples for sunburst
parent: level === 1 ? null : valuePath2pointId[valuePath(o, level - 1)],
name: o[key],
level, // level not required but useful
...(level === circleKeys.length ? {value: o.value} : {}) // only for the final level
};
if(level < circleKeys.length){
valuePath2pointId[currentValuePath] = sunBurstPoint.id;
}
sunBurstData.push(sunBurstPoint);
nValues++;
}
else if(level === circleKeys.length){
sunBurstPoint.value += o.value;
}
}
});
return sunBurstData;
}
const originalData = [
{
"globalId": "Chart Global",
"first": "India",
"state": "Gujarat",
"city": "Vadodara",
"mode": "traffic",
"value": 59
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Rajasthan",
"city": "Jaipur",
"mode": "traffic",
"value": 59
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Rajasthan",
"city": "Ranthambore",
"mode": "tigers",
"value": 40
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "traffic",
"value": 100
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "population",
"value": 200
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "animals",
"value": 50
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "birds",
"value": 5
},
{
"globalId": "Chart Global",
"first": "India",
"state": "Delhi",
"city": "Delhi",
"mode": "trees",
"value": 5
}
];
const sunBurstData = seqToBurstData(originalData, ['first', 'state', 'city', 'mode']).
// add the "intro" key to change the point title according to the level
map(o=>({...o, intro: o.level === 4 ? 'The value of' : 'Total for'}));
Highcharts.chart('chart', {
chart: {
height: '100%'
},
title: {
text: ''
},
series: [{
type: 'sunburst',
data: sunBurstData,
name: sunBurstData[0].name,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}'
},
levels: [{
level: 1,
color: 'transparent'
}, {
level: 2,
colorByPoint: true
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: 0.3
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: -0.3
}
}]
}],
tooltip: {
headerFormat: '',
pointFormat: '{point.intro} <b>{point.name}</b> is <b>{point.value}</b>'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="chart"></div>

Create parent child structure from array of objects and list of dimension in javascript

I got sales data from mysql table group by state,city and product.
I used bellow query to get the data from MySql table
select state,city,product,sales from salesTable group by state,city,product;
And got bellow output from query,
[
{
"state": "S1",
"city": "CITY1",
"product": "P1",
"sales": 1000
},
{
"state": "S1",
"city": "CITY2",
"product": "P1",
"sales": 2000
},
{
"state": "S1",
"city": "CITY1",
"product": "P2",
"sales": 2000
},
{
"state": "S2",
"city": "CITY1",
"product": "P1",
"sales": 1000
},
{
"state": "S2",
"city": "CITY2",
"product": "P1",
"sales": 2000
},
{
"state": "S2",
"city": "CITY2",
"product": "P2",
"sales": 2000
},
{
"state": "S3",
"city": "CITY1",
"product": "P2",
"sales": 1000
},
{
"state": "S3",
"city": "CITY2",
"product": "P2",
"sales": 2000
}
]
Now I want to create parent child structure from dimensions=["state","city","product"]
where state is grand parent, city is parent(child of state) and product is child.
Where dimensions array should be dynamic, it might increase or decrease in length.
I need bellow output,
[
{
"sales": 5000,
"state": "S1",
"children": [
{
"sales": 3000,
"state": "S1",
"city": "CITY1",
"children": [
{
"sales": 1000,
"state": "S1",
"city": "CITY1",
"product": "P1"
},
{
"sales": 2000,
"state": "S1",
"city": "CITY1",
"product": "P2"
}
]
},
{
"sales": 2000,
"state": "S1",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S1",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S1",
"city": "CITY2",
"product": "P1"
}
]
}
]
}
]
},
{
"sales": 5000,
"state": "S2",
"children": [
{
"sales": 1000,
"state": "S2",
"city": "CITY1",
"children": [
{
"sales": 1000,
"state": "S2",
"city": "CITY1",
"product": "P1"
}
]
},
{
"sales": 4000,
"state": "S2",
"city": "CITY2",
"children": [
{
"sales": 4000,
"state": "S2",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S2",
"city": "CITY2",
"product": "P1"
},
{
"sales": 2000,
"state": "S2",
"city": "CITY2",
"product": "P2"
}
]
}
]
}
]
},
{
"sales": 3000,
"state": "S3",
"children": [
{
"sales": 1000,
"state": "S3",
"city": "CITY1",
"children": [
{
"sales": 1000,
"state": "S3",
"city": "CITY1",
"product": "P2"
}
]
},
{
"sales": 2000,
"state": "S3",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S3",
"city": "CITY2",
"children": [
{
"sales": 2000,
"state": "S3",
"city": "CITY2",
"product": "P2"
}
]
}
]
}
]
}
]

Maybe something like this. On the first iteration, we build the tree with temporal objects instead of arrays for easier distribution. On the second recursive iteration, we make arrays from temporal objects and calculate sales.
For unification, the topmost level also uses .children key and its .sales overall sum. This can be ignored by using result.children instead of result at the end.
const data = [
{ state: 'S1', city: 'CITY1', product: 'P1', sales: 1000 },
{ state: 'S1', city: 'CITY2', product: 'P1', sales: 2000 },
{ state: 'S1', city: 'CITY1', product: 'P2', sales: 2000 },
{ state: 'S2', city: 'CITY1', product: 'P1', sales: 1000 },
{ state: 'S2', city: 'CITY2', product: 'P1', sales: 2000 },
{ state: 'S2', city: 'CITY2', product: 'P2', sales: 2000 },
{ state: 'S3', city: 'CITY1', product: 'P2', sales: 1000 },
{ state: 'S3', city: 'CITY2', product: 'P2', sales: 2000 },
];
const dimensions = ['state', 'city', 'product'];
const childKey = dimensions[dimensions.length - 1];
const result = { children: Object.create(null) };
for (const entry of data) {
let parrent = null;
let current = result.children;
for (const dimension of dimensions) {
let slot = current[entry[dimension]];
if (!slot) {
slot = current[entry[dimension]] = Object.create(null);
slot.sales = dimension === childKey ? entry.sales : 0;
if (parrent) {
for (const [k, v] of Object.entries(parrent)) {
if (k !== 'children' && k !== 'sales') slot[k] = v;
}
}
slot[dimension] = entry[dimension];
if (dimension !== childKey) {
slot.children = Object.create(null);
}
}
parrent = slot;
current = slot.children;
}
}
normalizeAndSum(result, null);
console.log(JSON.stringify(result, null, ' '));
function normalizeAndSum(object, parent) {
if (object.children) {
object.children = Object.values(object.children);
for (const child of object.children) normalizeAndSum(child, object);
}
if (parent) {
parent.sales = parent.children.reduce((acc, { sales }) => acc + sales, 0);
}
}

Javascript grouping [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm receiving data from an Angular service as follow:
{
"data": [
{
"country": "Germany",
"iso": "de",
"city": "Berlin",
"zone": "2",
},
{
"country": "Germany",
"iso": "de",
"city": "Frankfurt",
"zone": "5",
},
{
"country": "USA",
"iso": "us",
"city": "Chicago",
"zone": "18",
},
{
"country": "USA",
"iso": "us",
"city": "New York",
"zone": "16",
},
{
"country": "USA",
"iso": "us",
"city": "San Francisco",
"zone": "54",
}
}
I would like to transform these data so I can use the AutoComplete PrimeNG widget which require the following data format as input:
groupedByCountry = [
{
label: 'Germany', value: 'de',
items: [
{label: 'Berlin', value: '2'},
{label: 'Frankfurt', value: '5'}
]
},
{
label: 'USA', value: 'us',
items: [
{label: 'Chicago', value: '18'},
{label: 'New York', value: '16'},
{label: 'San Francisco', value: '54'}
]
}
];
I'm not doing JavaScript on a daily basis and haven't be able to do this transformation so far. If someone could assist it would be appreciated

this should work:
let input = JSON.parse(`[
{
"country": "Germany",
"iso": "de",
"city": "Berlin",
"zone": "2"
},
{
"country": "Germany",
"iso": "de",
"city": "Frankfurt",
"zone": "5"
},
{
"country": "USA",
"iso": "us",
"city": "Chicago",
"zone": "18"
},
{
"country": "USA",
"iso": "us",
"city": "New York",
"zone": "16"
},
{
"country": "USA",
"iso": "us",
"city": "San Francisco",
"zone": "54"
}
]`)
const res = Object.values(input.reduce((acc, el)=>{
if(!acc[el.country]){
acc[el.country] = {
label: el.country,
value: el.iso,
items: [
{
label: el.city,
value: el.zone
}
]
}
} else {
acc[el.country].items.push({
label: el.city,
value: el.zone
})
}
return acc;
}, {}))
console.log(res)
in few words:
create a Map like country -> object
for each element of the array, if in the map that country already exists, then just push the new element, otherwise create it

How to convert the objects inside an array into a specific format

I have an API which is formatted like:
[
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
]
I need to convert it into this format:
localizedData = [
{
text: "India",
value: 4
},
{
text: "United Kingdom",
value: 59
}
];
How can I do that?

Assuming you want to map name property to text, and id property to value.
const source = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
const localizedData = source.map(item => ({text: item.name, value: item.id}));
console.log(localizedData )
Learning about the Array.prototype.map() will help you next time.

It will help you-----
var results = data;
var arr = [], item;
for (var i = 0, len = results.length; i < len; i++) {
item = results[i];
arr.push({username: item.username, description: item.description,
name:
item.name});
}

Say your result array is:
const res = { "id": 4, "code": "IN", "name": "India", "recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80", "updatedBy": "Sini " }, { "id": 59, "code": "UK", "name": "United Kingdom", "recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D", "updatedBy": "sinju " } }
All you need to do is:
const res2 = res.map(a => ({text: a.name, value: a.id}));
That should work

You can try this.
const data = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
const localizedData = [];
for(i=0;i< data.length;i++){
localizedData.push({text : data[i].name, value : data[i].id})
}
console.log(localizedData)

Try this :
Solution 1 :
var jsonObj = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
jsonObj.map((obj) => {
obj["value"] = obj["id"];
obj["text"] = obj["name"];
delete obj.id;
delete obj.code;
delete obj.name;
delete obj.recordVersion;
delete obj.updatedBy;
});
console.log(jsonObj);
Solution 2 :
const jsonObj = [
{
"id": 4,
"code": "IN",
"name": "India",
"recordVersion": "6CB5C760-E145-4FFA-AC63-FAF5F36B6C80",
"updatedBy": "Sini "
},
{
"id": 59,
"code": "UK",
"name": "United Kingdom",
"recordVersion": "3512B084-8DB7-48F6-9E01-C0861E2A128D",
"updatedBy": "sinju "
}
];
const res = [];
for (var i of jsonObj) {
res.push({value : i.id, text : i.name});
}
console.log(res);

angular js : set option value after filling options in select

I have a web service which has result like:
{
"selectedStateId": "1",
"selectedCityId": "1",
"selectedAreaId": "1",
"states": [{
"stateId": "1",
"stateName": "Gujarat"
}, {
"stateId": "2",
"stateName": "Rajasthan"
}],
"cities": [{
"cityId": "1",
"stateId": "1",
"cityName": "Ahmedabad"
}, {
"cityId": "2",
"stateId": "1",
"cityName": "Surat"
}],
"areas": [{
"areaId": "1",
"cityId": "1",
"areaName": "thaltej"
}, {
"areaId": "2",
"cityId": "1",
"areaName": "Maninagar"
}, {
"areaId": "3",
"cityId": "1",
"areaName": "Naranpura"
}]
}
Now, I want to bind arrays of states, cities and areas to three different select and set its value using stateId, cityId and areaId that are member of parent object.
Two questions:
how to set values of three different selects ?
How can we achieve (1) if we have array of the objects, the one I have created above ?
Thanks.
Edit: I guess the first two answers got some misunderstanding.. So, changed my data representation. I want to set selectedStateId to be set into select element of states, selectedCityId to be set into select element of cities, and so on.. Now, I guess you should be clear what I am asking for..

Here I have created a plunker for you. Please have a look at it with html having 3 selects
<select>....</select>
"http://plnkr.co/edit/LaypSCATZyQxLHYHjgnB?p=preview"

Alright if you want to create three select from above array each for area , city and states then do following :
Your above response goes like this :
$scope.items = response;
//set default . I am setting first state as default
$scope.selectedstate = response.states[0];
Let's say for states it would be
<select
ng-options="state.stateName as state.label for state in items.states track by state.stateId"
ng-model="selectedstate">
Follow same process for area and city.
For your reference https://docs.angularjs.org/api/ng/directive/ngOptions . Angular way of doing this.

Yet another way with ng-options instead ng-repeat
angular.module('app',[]).controller('ctrl',function($scope){
$scope.data = {
"selectedStateId": "1",
"selectedCityId": "1",
"selectedAreaId": "1",
"states": [{
"stateId": "1",
"stateName": "Gujarat"
}, {
"stateId": "2",
"stateName": "Rajasthan"
}],
"cities": [{
"cityId": "1",
"stateId": "1",
"cityName": "Ahmedabad"
}, {
"cityId": "2",
"stateId": "1",
"cityName": "Surat"
}],
"areas": [{
"areaId": "1",
"cityId": "1",
"areaName": "thaltej"
}, {
"areaId": "2",
"cityId": "1",
"areaName": "Maninagar"
}, {
"areaId": "3",
"cityId": "1",
"areaName": "Naranpura"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="data.selectedStateId" ng-options="s.stateId as s.stateName for s in data.states" ></select>
<select ng-model="data.selectedCityId" ng-options="c.cityId as c.cityName for c in data.cities" ></select>
<select ng-model="data.selectedAreaId" ng-options="a.areaId as a.areaName for a in data.areas" ></select>
</div>

Okay I am trying to answer my own question. for those who expect detailed explanation:
Answer for question 1:
To set selected value for select element, we just need to set ng-selectedproperty to optionas below:
Suppose my response is:
$scope.x = {
"selectedStateId": "1",
"selectedCityId": "1",
"selectedAreaId": "1",
"states": [{
"stateId": "1",
"stateName": "Gujarat"
}, {
"stateId": "2",
"stateName": "Rajasthan"
}],
"cities": [{
"cityId": "1",
"stateId": "1",
"cityName": "Ahmedabad"
}, {
"cityId": "2",
"stateId": "1",
"cityName": "Surat"
}],
"areas": [{
"areaId": "1",
"cityId": "1",
"areaName": "thaltej"
}, {
"areaId": "2",
"cityId": "1",
"areaName": "Maninagar"
}, {
"areaId": "3",
"cityId": "1",
"areaName": "Naranpura"
}]
};
Then, in html, we can write like:
<select>
<option ng-selected="{{state.stateId == x.selectedStateId}}" ng-repeat="state in x.states" value="{{state.stateId}}">{{state.stateName}}</option>
</select>
<select>
<option ng-selected="{{city.cityId == x.selectedCityId}}" ng-repeat="city in x.cities" value="{{city.cityId}}">{{city.cityName}}</option>
</select>
<select>
<option ng-selected="{{area.areaId == x.selectedAreaId}}" ng-repeat="area in x.areas" value="{{area.areaId}}">{{area.areaName}}</option>
</select>
Answer for question 2:
Suppose, we have array of this object, say,
$scope.list = [{
"stateId": "1",
"cityId": "1",
"areaId": "1",
"states": [{
"stateId": "1",
"stateName": "Gujarat"
}, {
"stateId": "2",
"stateName": "Rajasthan"
}],
"cities": [{
"cityId": "1",
"stateId": "1",
"cityName": "Ahmedabad"
}, {
"cityId": "2",
"stateId": "1",
"cityName": "Surat"
}],
"areas": [{
"areaId": "1",
"cityId": "1",
"areaName": "thaltej"
}, {
"areaId": "2",
"cityId": "1",
"areaName": "Maninagar"
}, {
"areaId": "3",
"cityId": "1",
"areaName": "Naranpura"
}]
},
{
"stateId": "2",
"cityId": "2",
"areaId": "2",
"states": [{
"stateId": "1",
"stateName": "Gujarat"
}, {
"stateId": "2",
"stateName": "Rajasthan"
}],
"cities": [{
"cityId": "1",
"stateId": "1",
"cityName": "Ahmedabad"
}, {
"cityId": "2",
"stateId": "1",
"cityName": "Surat"
}],
"areas": [{
"areaId": "1",
"cityId": "1",
"areaName": "thaltej"
}, {
"areaId": "2",
"cityId": "1",
"areaName": "Maninagar"
}, {
"areaId": "3",
"cityId": "1",
"areaName": "Naranpura"
}]
},
{
"stateId": "1",
"cityId": "2",
"areaId": "3",
"states": [{
"stateId": "1",
"stateName": "Gujarat"
}, {
"stateId": "2",
"stateName": "Rajasthan"
}],
"cities": [{
"cityId": "1",
"stateId": "1",
"cityName": "Ahmedabad"
}, {
"cityId": "2",
"stateId": "1",
"cityName": "Surat"
}],
"areas": [{
"areaId": "1",
"cityId": "1",
"areaName": "thaltej"
}, {
"areaId": "2",
"cityId": "1",
"areaName": "Maninagar"
}, {
"areaId": "3",
"cityId": "1",
"areaName": "Naranpura"
}]
}];
In this case, we need a wrapper to wrap all the selects so that we can iterate list over it.
So, I took a simple <div>..</div> that will do in my case, as below:
<div ng-repeat="x in list">
<select>
<option ng-selected="{{state.stateId == x.stateId}}" ng-repeat="state in x.states" value="{{state.stateId}}">{{state.stateName}}</option></select>
<select>
<option ng-selected="{{city.cityId == x.cityId}}" ng-repeat="city in x.cities" value="{{city.cityId}}">{{city.cityName}}</option></select>
<select>
<option ng-selected="{{area.areaId == x.areaId}}" ng-repeat="area in x.areas" value="{{area.areaId}}">{{area.areaName}}</option></select>
</div>