loop list of Javascript Objects to render Highcharts

Question

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:

This jsfiddle is just static data. I am trying to loop through the object and fill the chart in the same way i constructed the static chart in my example. — Max Powers
– Max Powers, Commented Dec 24, 2018 at 2:09
If you look at the chart series data you can see I am just putting static data there. — Max Powers
– Max Powers, Commented Dec 24, 2018 at 2:11
It depends on how you are trying to fill the chart, your static data doesn't shows up any relation which key you want to put into what? — Just code
– Just code, Commented Dec 24, 2018 at 2:11
the x axis would be filled with the outer keys in the object such as "baselinePerformance", "in_qos"..etc. then the data series would consist of the inner keys value's and data. — Max Powers
– Max Powers, Commented Dec 24, 2018 at 2:13

ic3b3rg · Accepted Answer · 2018-12-24 03:38:16Z

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>

Collectives™ on Stack Overflow

loop list of Javascript Objects to render Highcharts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related