Highcharts chart dynamic json data from sql

Question

I want to make the array suitable for Highchart data returned from SQL.

This array should be made available to Highchart.

Can you help me on this topic ?

From SQL returned json value :

 {
                      "FuelConsumption": [{
                        "Unit": "Computing",
                        "UnitID": 9,
                        "DateofPurchase": "18.04.2016",
                        "Liter": 2
                      }, {
                        "Unit": "Transportation",
                        "UnitID": 10,
                        "DateofPurchase": "18.04.2016",
                        "Liter": 3453
                      }, {
                        "Unit": "GeneralManager",
                        "UnitID": 7,
                        "DateofPurchase": "20.04.2016",
                        "Liter": 5
                      }, {
                        "Unit": "Boss",
                        "UnitID": 8,
                        "DateofPurchase": "20.04.2016",
                        "Liter": 4564
                      }, {
                        "Unit": "Computing",
                        "UnitID": 9,
                        "DateofPurchase": "20.04.2016",
                        "Liter": 579
                      }, {
                        "Unit": "Transportation",
                        "UnitID": 10,
                        "DateofPurchase": "20.04.2016",
                        "Liter": 337
                      }, {
                        "Unit": "Boss",
                        "UnitID": 8,
                        "DateofPurchase": "21.04.2016",
                        "Liter": 3
                      }, {
                        "Unit": "Transportation",
                        "UnitID": 10,
                        "DateofPurchase": "21.04.2016",
                        "Liter": 22
                      }]
                    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

I want to get results this way :

 {
   name: 'Transportation',
   data: [3453, 337, 22]
 }, {
   name: 'Computing',
   data: [2, 5, 579]
 }, {
   name: 'Boss',
   data: [4564, 3]
 }

Answer 1

You can create a hash from json, 'Unit' value as key, which is an array and keep on adding 'Liter' value to that array. Once that done, create json from that hash.

var hash = {};
data.FuelConsumption.forEach(function(obj) {
  if (!hash[obj.Unit]) {
    hash[obj.Unit] = [];
  }
  hash[obj.Unit].push(obj.Liter);
});

var newData = [];
for (var key in hash) {
  newData.push({
    name: key,
    data: hash[key]
  });
}

In case you are using Lodash, then

var newData2 = _.chain(data.FuelConsumption)
  .groupBy('Unit')
  .map(function(obj) {
    return {
      name: _.uniq(_.pluck(obj, 'Unit'))[0],
      data: _.uniq(_.pluck(obj, 'Liter'))
    };
  })
  .value();

Answer 2

If you can use underscore, the answer is the following:

_.chain(data["FuelConsumption"])
 .groupBy('Unit')
 .mapObject((val, key)=>({name:key, data:val.map(x => x.Liter)}))
 .value()

It'd similar if you use any other javascript libraries.