javascriptjqueryhighchartsjavascript-objects
loop list of Javascript Objects to render Highcharts
I am a total newbie to Javascript and I have the following Java script object that I am trying to loop and have it render a chart from Highcharts. I have given a static chart example below on what I am trying to achieve with the object I am receiving. If anyone can help on this it would be greatly appreciated.
Here is also a jSFiddle Link to my static rendering.
My Object:
const myObj = [
[
{
"baselinePerformance": [
{
"aggregate": 99,
"mcast 1-2": 98,
"mcast 2-1": 97,
"mpls-mpls-1-2": 96,
"mpls-mpls-2-1": 95,
"mpls-mpls-3-4": 94,
"mpls-mpls-4-3": 93,
"v6-v6 1-2": 92,
"v6-v6 2-1": 91,
"v6-v6 3-4": 90,
"v6-v6 4-3": 90
}
]
}
],
[
{
"in_qos": [
{
"aggregate": 89,
"mcast 1-2": 88,
"mcast 2-1": 87,
"mpls-mpls-1-2": 86,
"mpls-mpls-2-1": 85,
"mpls-mpls-3-4": 84,
"mpls-mpls-4-3": 83,
"v6-v6 1-2": 82,
"v6-v6 2-1": 81,
"v6-v6 3-4": 80.5,
"v6-v6 4-3": 80
}
]
}
],
[
{
"v4_in_net_flow": [
{
"aggregate": 79,
"mcast 1-2": 78,
"mcast 2-1": 77,
"mpls-mpls-1-2": 76,
"mpls-mpls-2-1": 75,
"mpls-mpls-3-4": 74,
"mpls-mpls-4-3": 73,
"v6-v6 1-2": 72,
"v6-v6 2-1": 71,
"v6-v6 3-4": 70.5,
"v6-v6 4-3": 70
}
]
}
],
[
{
"v6_in_net_flow": [
{
"aggregate": 69,
"mcast 1-2": 68,
"mcast 2-1": 67,
"mpls-mpls-1-2": 66,
"mpls-mpls-2-1": 65,
"mpls-mpls-3-4": 64,
"mpls-mpls-4-3": 63,
"v6-v6 1-2": 62,
"v6-v6 2-1": 61,
"v6-v6 3-4": 60.6,
"v6-v6 4-3": 60
}
]
}
],
[
{
"mpls_in_net_flow": [
{
"aggregate": 59,
"mcast 1-2": 58,
"mcast 2-1": 57,
"mpls-mpls-1-2": 56,
"mpls-mpls-2-1": 55,
"mpls-mpls-3-4": 54,
"mpls-mpls-4-3": 53,
"v6-v6 1-2": 52,
"v6-v6 2-1": 51,
"v6-v6 3-4": 50.5,
"v6-v6 4-3": 50
}
]
}
]
]
MY Chart code example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'MyChart'
},
xAxis: {
categories: [
'baselinePerformance',
'in_qos',
'v4_in_net_flow',
'v6_in_net_flow',
'mpls_in_net_flow'
],
crosshair: true
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'aggregate',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}, {
name: 'mcast 1-2',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}, {
name: 'mcast 2-1',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
}, {
name: 'mpls-mpls-1-2',
data: [42.4, 33.2, 34.5, 39.7, 52.6]
},{
name: 'mpls-mpls-2-1',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'mpls-mpls-3-4',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'mpls-mpls-4-3',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 1-2',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 2-1',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 3-4',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 4-3',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},
]
});
How I am trying to have it render:
Solution
I believe this provides the transform you seek:
const myObj = [ [ { "baselinePerformance": [ { "aggregate": 99, "mcast 1-2": 98, "mcast 2-1": 97, "mpls-mpls-1-2": 96, "mpls-mpls-2-1": 95, "mpls-mpls-3-4": 94, "mpls-mpls-4-3": 93, "v6-v6 1-2": 92, "v6-v6 2-1": 91, "v6-v6 3-4": 90, "v6-v6 4-3": 90 } ] } ], [ { "in_qos": [ { "aggregate": 89, "mcast 1-2": 88, "mcast 2-1": 87, "mpls-mpls-1-2": 86, "mpls-mpls-2-1": 85, "mpls-mpls-3-4": 84, "mpls-mpls-4-3": 83, "v6-v6 1-2": 82, "v6-v6 2-1": 81, "v6-v6 3-4": 80.5, "v6-v6 4-3": 80 } ] } ], [ { "v4_in_net_flow": [ { "aggregate": 79, "mcast 1-2": 78, "mcast 2-1": 77, "mpls-mpls-1-2": 76, "mpls-mpls-2-1": 75, "mpls-mpls-3-4": 74, "mpls-mpls-4-3": 73, "v6-v6 1-2": 72, "v6-v6 2-1": 71, "v6-v6 3-4": 70.5, "v6-v6 4-3": 70 } ] } ], [ { "v6_in_net_flow": [ { "aggregate": 69, "mcast 1-2": 68, "mcast 2-1": 67, "mpls-mpls-1-2": 66, "mpls-mpls-2-1": 65, "mpls-mpls-3-4": 64, "mpls-mpls-4-3": 63, "v6-v6 1-2": 62, "v6-v6 2-1": 61, "v6-v6 3-4": 60.6, "v6-v6 4-3": 60 } ] } ], [ { "mpls_in_net_flow": [ { "aggregate": 59, "mcast 1-2": 58, "mcast 2-1": 57, "mpls-mpls-1-2": 56, "mpls-mpls-2-1": 55, "mpls-mpls-3-4": 54, "mpls-mpls-4-3": 53, "v6-v6 1-2": 52, "v6-v6 2-1": 51, "v6-v6 3-4": 50.5, "v6-v6 4-3": 50 } ] } ] ];
const categories = myObj.flatMap(([obj]) => Object.keys(obj));
const seriesList = [...myObj.reduce((memo, [obj]) => {
Object.keys(Object.values(obj)[0][0]).forEach(series => {
memo.add(series);
});
return memo;
}, new Set())];
const seriesObj = myObj.reduce((memo, [obj]) => {
const xObj = Object.values(obj)[0][0];
seriesList.forEach(series => {
memo[series] = memo[series] || [];
memo[series].push(xObj[series] || 0);
});
return memo;
}, {});
const series = Object.entries(seriesObj).map(([name, data]) => ({name, data}));
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'MyChart'
},
xAxis: {
categories,
crosshair: true
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series
});#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>- Send a set-cookie header to a redirect url in node.js
- Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'toString') Apexcharts React
- Why is the spread operator needed for Math.max()?
- Drag to expand element (desktop and mobile)
- Printing a HTML template as PDF - Angular 2
- How does the 'Access-Control-Allow-Origin' header work?
- Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks
- trim string without error even when its null or undefined
- Access $refs from other components not in the same level as current component
- Change input to uppercase without the cursor jumping to the end of the text
- Next.js: exportPathMap not found despite having one in next.config.js
- HTML dialog focusing button element when opened
- Suitescript 2.x client script works perfectly in Firefox but stops functioning in Google chrome
- Dynamic html and js
- How to use nanoid module on NodeJS?
- (Chrome Extension) Playing music in the background
- lodas deepClone or deepClone from clone_deep npm returns same instance
- Fire event once on DOM change
- Paste multiple files from clipboard not working
- javascript window location href without hash?
- Why is this jQuery click function not working?
- JS: Filter array of objects by max value per category
- How to completely remove mobile browser long-press vibration?
- How to filter duplicate object from array of objects based on few conditions?
- How to get seamless display in javascript slideshow
- Split Array of Objects
- How do I post contents of a Quill editor in a form?
- Are the .js files being cached?
- React hooks using recharts AreaChart Console Warning
- With Promise.race(), what happens to losing promises?