im trying to show data in bar highcharts.. the bar highcart should be only 2 bar and both of the bar had data ..
so here the explanation...
i have 2 categories bar chart, and both of categories have a sub categories.
to be clear here is the data of categories :
the first category :
scategori 1-1, scategori 2-1,scategori3-1
and here is the second category :
scategori 1-2,scategori 2-2,scategori 3-2,scategori 4-2,scategori 5-2,scategori 6-2
and here is the example that i want to achieve :
and both of data comes from this json data :
[{
"name": "scategories 1-1",
"color": "#1E4585",
"data": [
{
"y": 40,
"total": 40,
"data": "1",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 2-1",
"color": "#600AB5",
"data": [
{
"y": 40,
"total": 40,
"data": "2",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 3-1",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 1-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 2-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 3-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 4-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 5-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},
{
"name": "scategories 6-2",
"color": "#0DB9D0",
"data": [
{
"y": 20,
"total": 20,
"data": "3",
"name": "National",
"drilldown": "3",
"next": "level2"
}
]
},]
and when I tried the data json above to the script of highchart . the result is not like what I want..
here is the result of my try:
can someone help me to achieve what I want to achieve or to make the result is same like what Ico want
You need to use the stack property and create two stacks. Example:
var series = [{
stack: 'A',
...
},
{
stack: 'B',
...
}
];
Live demo: http://jsfiddle.net/BlackLabel/0fbrac5g/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
Related
I have searched a lot regarding filter of product data using checkbox but couldn't able to find the right answer for my issue.
Problem: I'm making a product filter page using checkbox in react but could not found the proper way to filter the true value of object key.
ie. I have to only filter object key value === true. Below array object is after checkbox selection before the selection it will be falsy value.
const category = [
{
"type":"Color",
"options":[
{
"key":"Red",
"value":true
},
{
"key":"Blue",
"value":false
},
{
"key":"Green",
"value":true
}
]
},
{
"type":"Gender",
"options":[
{
"key":"Men",
"value":true
},
{
"key":"Women",
"value":false
}
]
},
{
"type":"Price",
"options":[
{
"key":"0 - Rs. 250",
"from":0,
"to":250,
"value":false
},
{
"key":"Rs. 251 - 450",
"from":251,
"to":450,
"value":true
},
{
"key":"Rs. 451 & above",
"from":451,
"to":"Number.MAX_VALUE",
"value":false
}
]
},
{
"type":"Type",
"options":[
{
"key":"Polo",
"value":false
},
{
"key":"Hoodie",
"value":false
},
{
"key":"Basic",
"value":true
}
]
}
]
const productData = [
{
"id": 1,
"name": "Black Polo",
"type": "Polo",
"price": 250,
"currency": "INR",
"color": "Black",
"gender": "Men",
"quantity": 3
},
{
"id": 2,
"name": "Blue Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Blue",
"gender": "Women",
"quantity": 3
},
{
"id": 3,
"name": "Pink Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Pink",
"gender": "Women",
"quantity": 6
},
{
"id": 4,
"name": "Black Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Black",
"gender": "Men",
"quantity": 2
},
{
"id": 5,
"name": "Green Polo",
"type": "Polo",
"price": 250,
"currency": "INR",
"color": "Green",
"gender": "Men",
"quantity": 1
},
{
"id": 6,
"name": "Green Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Green",
"gender": "Women",
"quantity": 1
},
{
"id": 7,
"name": "Blue Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Blue",
"gender": "Women",
"quantity": 2
},
{
"id": 8,
"name": "Black Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Black",
"gender": "Women",
"quantity": 5
}]
Now,I need filtered product data from the above category data and product-data.
Here's my Codesandbox link for this.
Hi i'm very confused foreach array to array but this 1 index,I already did a lot of research about foreach object in Javascript and I tried many ways but nothing works. let me clarify what json what i want achieve :
[
{
"name": "Data1",
"color" : "#4473C2",
"data": [
{
"y": 10,
"total":100,
"md": "1",
"name": "Region 1",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
},{
"y": 20,
"total":100,
"md": "1",
"name": "Region 2",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
},{
"y": 10,
"total":100,
"md": "1",
"name": "Region 3",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
},{
"y": 30,
"total":100,
"md": "1",
"name": "Region 4",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
}
]
}
,{
"name": "Data2",
"color" : "#EB7D30",
"data": [
{
"y": 95,
"total":100,
"md": "1",
"name": "Region 1",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
},{
"y": 95,
"total":100,
"md": "1",
"name": "Region 2",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
},{
"y": 95,
"total":100,
"md": "1",
"name": "Region 3",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
},{
"y": 95,
"total":100,
"md": "1",
"name": "Region 4",
"drillup" : 'level2',
"drilldown" : "3",
"next" : "level3"
}
]
}
]
and I tried to do foreach based on some finding of my research but the result wasn't like what I want or like what I'm try to achieve .. and here is the script that I tried :
and this output json from my code =>
[
{
"name": "Data 1",
"color": "#4473C2",
"data": [
{
"y": 23.89,
"total": 124,
"name": "Region 1",
"next": "level_3",
"drilldown": 22
}
]
},
{
"name": "Data 1",
"color": "#EB7D30",
"data": [
{
"y": 18.52,
"total": 40,
"name": "Region 2",
"next": "level_3",
"drilldown": 16
}
]
},
{
"name": "Data 1",
"data": [
{
"y": 12.88,
"total": 51,
"name": "Region 3",
"next": "level_3",
"drilldown": 10
}
]
},
{
"name": "Data 1",
"data":[
{
"y": 7.12,
"total": 28,
"name": "Region 4",
"next": "level_3",
"drilldown": 14
}
]
},
{
"name": "Data 2",
"data": [
{
"y": 94.44,
"total": 17,
"name": "Region 1",
"next": "level_3",
"drilldown": 22
}
]
},
{
"name": "Data 2",
"data": [
{
"y": 100,
"total": 11,
"name": "Region 2",
"next": "level_3",
"drilldown": 16
}
]
},
{
"name": "Data 2",
"data": [
{
"y": 90.91,
"total": 10,
"name": "Region 3",
"next": "level_3",
"drilldown": 10
}
]
},
{
"name": "Data 2",
"data": [
{
"y": 100,
"total": 2,
"name": "Region 4",
"next": "level_3",
"drilldown": 14
},
]
},]
can some one help me to achieve the data that i want ? thanks
From what I've understood, the json you want has an array of objects in the data part plus the name and color parts are unique.
While the json you are getting also has an array of objects in the data part but it has only 1 object in each data part plus the name part is not unique.
Here's a possible solution:
dataRegularSecondary.forEach((k,y) => {
let returnDataHasIt = false;
for( let i=0; returnData[i]; i++ )
{
if(returnData[i]['name'] == k.name) // if returnData already has that name
{
// so appending to data only
returnData[i]['data'].push({
y: k.y,
total: k.total_ada,
name: k.name_label,
next: k.next,
drilldown: k.drilldown
});
returnDataHasIt = true;
break;
}
}
if( !returnDataHasIt ) // if returnData did not have that name
{
// adding a new item to returnData
returnData.push({
name: k.name,
color: color_arr[idx++],
data: [{
y: k.y,
total: k.total_ada,
name: k.name_label,
next: k.next,
drilldown: k.drilldown
}]
});
}
});
first You have to understand difference between javascript object and
json for this refer this
And you can convert json to javascript object by using JSON.parse()
I have a d3 visualization that has a JSON object similar to the following where I would like to average up the value of score on the lowest nodes and dynamically add that average to the parent node above...and so on. It doesn't look like d3 has an easy method to do this. What I'd like is to have the final JSON output look like the second example.
{
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "B1-C1",
"children": [
{
"name": "B1-C1-D1",
"children": [
{
"name": "B1-C1-D1-E1",
"value": 30,
"score": 0.8
},
{
"name": "B1-C1-D1-E2",
"value": 35,
"score": 0.5
}
]
},
{
"name": "B1-C1-D2",
"children": [
{
"name": "B1-C1-D2-E1",
"value": 31,
"score": 0.4
},
{
"name": "B1-C1-D2-E2",
"value": 23,
"score": 0.7
}
]
}
]
}
]
}
]
}
What I'd like the final JSON object to look like:
{
"name": "A1",
"scoreAvg": 0.625,
"children": [
{
"name": "B1",
"scoreAvg": 0.625,
"children": [
{
"name": "B1-C1",
"scoreAvg": 0.625,
"children": [
{
"name": "B1-C1-D1",
"scoreAvg": 0.7,
"children": [
{
"name": "B1-C1-D1-E1",
"value": 30,
"score": 0.8
},
{
"name": "B1-C1-D1-E2",
"value": 35,
"score": 0.6
}
]
},
{
"name": "B1-C1-D2",
"scoreAvg": 0.55,
"children": [
{
"name": "B1-C1-D2-E1",
"value": 31,
"score": 0.4
},
{
"name": "B1-C1-D2-E2",
"value": 23,
"score": 0.7
}
]
}
]
}
]
}
]
}
You can use a recursive function:
const obj = {
"name": "A1",
"children": [{
"name": "B1",
"children": [{
"name": "B1-C1",
"children": [{
"name": "B1-C1-D1",
"children": [{
"name": "B1-C1-D1-E1",
"value": 30,
"score": 0.8
},
{
"name": "B1-C1-D1-E2",
"value": 35,
"score": 0.5
}
]
},
{
"name": "B1-C1-D2",
"children": [{
"name": "B1-C1-D2-E1",
"value": 31,
"score": 0.4
},
{
"name": "B1-C1-D2-E2",
"value": 23,
"score": 0.7
}
]
}
]
}]
}]
}
function getWithAverageScore(objToRecurse) {
// If I have a score I am already done
if (objToRecurse.score) {
return objToRecurse;
}
// Otherwise, I get my children with their average score
const children = objToRecurse.children.map(getWithAverageScore);
return {
...objToRecurse,
children,
// And I set my scoreAvg to their average (score or scoreAvg)
scoreAvg: children.reduce((total, { score, scoreAvg }) => total + (score || scoreAvg), 0) / children.length
};
}
console.log(JSON.stringify(getWithAverageScore(obj), null, 2))
let o = {
"name": "A1",
"children": [
{
"name": "B1",
"children": [
{
"name": "B1-C1",
"children": [
{
"name": "B1-C1-D1",
"children": [
{
"name": "B1-C1-D1-E1",
"value": 30,
"score": 0.8
},
{
"name": "B1-C1-D1-E2",
"value": 35,
"score": 0.5
}
]
},
{
"name": "B1-C1-D2",
"children": [
{
"name": "B1-C1-D2-E1",
"value": 31,
"score": 0.4
},
{
"name": "B1-C1-D2-E2",
"value": 23,
"score": 0.7
}
]
}
]
}
]
}
]
};
function avgUp(object){
object.avgScore = 0;
if(object.children){
for(child of object.children){
object.avgScore += avgUp(child);
}
object.avgScore = object.avgScore /Math.max(1,object.children.length);
return object.avgScore;
}else{
return object.score;
}
}
avgUp(o);
console.log(JSON.stringify(o));
I have a JSON object and I need to convert it into another JSON structure, using Javascript function.
My input JSON is:
{
"id": 116,
"name": "flow",
"op_start": 9,
"op_start_type": "web_hook",
"style": {
"x": 41,
"y": 35,
"width": 250,
"height": 250
},
"modules": {
"web_hook": {
"8": {
"id": 8,
"request_body": "auth",
"name": "nameew",
"op_success": null,
"op_failure": null,
"op_success_type": null,
"op_failure_type": null,
"style": {
"x": 628,
"y": 70,
"width": 250,
"height": 250
}
},
"9": {
"id": 9,
"request_body": "auth",
"name": "testontest",
"op_success": 1,
"op_failure": null,
"op_success_type": "ring",
"op_failure_type": null,
"style": {
"x": 438,
"y": 140,
"width": 250,
"height": 250
}
}
},
"ring": {
"1": {
"id": 1,
"request_body": "auth",
"name": "testontest",
"op_success": null,
"op_failure": null,
"op_success_type": null,
"op_failure_type": null,
"style": {
"x": 438,
"y": 140,
"width": 250,
"height": 250
}
}
}
}
}
and the desired output is:
{
"nodes": [
{
"name": "flow",
"id": 116,
"x": 41,
"y": 35,
"width": 250,
"inputConnectors": [],
"outputConnectors": [
{
"name": "op_start"
}
]
},
{
"name": "web_hook",
"id": 8,
"x": 628,
"y": 70,
"inputConnectors": [
{
"name": "iA"
}
],
"outputConnectors": [
{
"name": "op_success"
},
{
"name": "op_failure"
}
],
"width": 250
},
{
"name": "ring",
"id": 9,
"x": 438,
"y": 140,
"inputConnectors": [
{
"name": "iA"
}
],
"outputConnectors": [
{
"name": "op_success"
}
],
"width": 250
}
],
"connections": [
{
"source": {
"nodeID": 116,
"connectorIndex": 0
},
"dest": {
"nodeID": 8,
"connectorIndex": 0
}
},
{
"source": {
"nodeID": 8,
"connectorIndex": 0
},
"dest": {
"nodeID": 9,
"connectorIndex": 0
}
}
]
}
Here as we can see in output JSON the first node flow will be fixed.
I have tried it something like this:
var resData = response.data; // input json is inside response.data
// Creating first fixed node
var newDefinition = {
"nodes": [
{
"name": "flow",
"id": resData.id,
"x": resData.x,
"y": resData.y,
"width": resData.width,
"inputConnectors": [],
"outputConnectors": [
{
"name": "op_start"
}
]
}
],
"connections": []
};
// Getting the first connected node
var nextType = resData.op_start_type;
var nextId = resData.op_start;
var next = resData.modules[nextType][nextId];
newDefinition.nodes.push({
"name": next.name,
"id": next.id,
"x": next.style.x,
"y": next.style.y,
"width": next.style.width,
"inputConnectors": [
{
name: ''
}
],
"outputConnectors": [
{
"name": "op_start"
}
]
});
Till here everything is fine but now I am confused how I can add the node recursively, and I also need to add connections.
Thanks.
EDIT
Here is the output generated by output JSON
Hello I want to create a JSON Object for storage resources in a post request in java script I have an input array value disk sizes for example below:
request1
input = [10, 20, 30]
"storageResources": [
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 10
},
{
"name": "diskIopsConsumed",
"value": 0
},
{
"name": "diskConsumedFactor",
"value": 1
}
]
},
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 20
},
{
"name": "diskIopsConsumed",
"value": 1
},
{
"name": "diskConsumedFactor",
"value": "NaN"
}
]
},
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 30
},
{
"name": "diskIopsConsumed",
"value": 0
},
{
"name": "diskConsumedFactor",
"value": 1
}
]
},
],
request2:
input [10,20]
"storageResources": [
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 10
},
{
"name": "diskIopsConsumed",
"value": 0
},
{
"name": "diskConsumedFactor",
"value": 1
}
]
},
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 20
},
{
"name": "diskIopsConsumed",
"value": 1
},
{
"name": "diskConsumedFactor",
"value": "NaN"
}
]
}
],
Is the best way to do this with a function or can you send it by properties?
Use Array.prototype.map to return a modified response
$$text.oninput = evt => {
let json = JSON.parse($$text.value)
let result = json.storageResources.map(resource =>
resource.stats.find(e => e.name == 'diskSize').value
)
console.log(result)
}
$$text.oninput()
<textarea id="$$text">{"storageResources":[{"stats":[{"name":"diskSize","units":"GB","value":10},{"name":"diskIopsConsumed","value":0},{"name":"diskConsumedFactor","value":1}]},{"stats":[{"name":"diskSize","units":"GB","value":20},{"name":"diskIopsConsumed","value":1},{"name":"diskConsumedFactor","value":"NaN"}]},{"stats":[{"name":"diskSize","units":"GB","value":30},{"name":"diskIopsConsumed","value":0},{"name":"diskConsumedFactor","value":1}]}]}</textarea>