CODEWITHSUNDEEP
javascriptc3.js
JustMe
JustMe

Reputation: 147

Data structure/format of C3 data using JavaScript

I am trying to get my array of objects in the format that is needed to create a C3 bar chart but I am having trouble categorizing my data with JavaScript. Below is my JavaScript code. 

data = [
  {Service:"Army",Permanent:20,Itinerant:754,Region:"Western"},
  {Service:"Air Force",Permanent:100,Itinerant:2,Region:"Eastern"},
  {Service:"Army",Permanent:10,Itinerant:7,Region:"Western"},
  {Service:"Air Force",Permanent:30,Itinerant:2,Region:"Eastern"}
]

var sumAry=[];

for (var x=0; x<data.length; x++){
   var val =sumAry.indexOf(data[x].Service);
  if(val === -1){
     var permanent += data[x].Permanent;
     sumAry.push(data[x].Service, permanent);
  }else{
    console.log("IN");
  }
}

https://codepen.io/isogunro/pen/GYRKqE?editors=0012

The C3 chart looks for a data in the structure/format shown below:

        ['Army', 30],
        ['Airorce', 130],
        ['Navy', 190],
        ['Army1', 70],
        ['Airorce2', 130],
        ['Navy3', 100]

For each of the values, the 'Permanent' property will be added up to get the number part of the array. It becomes an aggregate of all the information.

Upvotes: 1

Views: 168

Answers (1)

pete
pete

Reputation: 25091

Assuming the number in the preferred format comes from the Permanent property, you could use Array.map to transform your dataset.

var data = [{
        Service: "Army",
        Permanent: 654,
        Itinerant: 754,
        Region: "Western"
    },
    {
        Service: "Air Force",
        Permanent: 9,
        Itinerant: 2,
        Region: "Eastern"
    },
    {
        Service: "Army",
        Permanent: 6,
        Itinerant: 7,
        Region: "Western"
    },
    {
        Service: "Air Force",
        Permanent: 9,
        Itinerant: 2,
        Region: "Eastern"
    }
];

var aggregates = data.map(function (o) {
    // map original objects to new ones with zeroed-out data
    return {
        Service: o.Service,
        Permanent: 0,
    }
}).filter(function (o, index, a) {
    // filter the list to have only unique `Service` properties
    var service = o.Service;
    var i;
    for (i = 0; i < a.length; i += 1) {
        if (a[i].Service === service) {
            // break out of the loop when the first matching `Service` is found.
            break;
        }
    }
    // `i` is now the index of the first matching `Service`.
    // if it's the first occurrence of that `Service`, keep it, otherwise ditch it.
    return i === index;
});

data.forEach(function (o) {
    // loop through the aggregate list and get the matching `Service` property.
    var agg = aggregates.filter(function (p) {
        return o.Service === p.Service;
    })[0]; // first element is the match.
    // sum the `Permanent` properties.
    agg.Permanent += o.Permanent;
});

// now that the data has been aggregated, transform it into the needed structure.
var c3data = aggregates.map(function (d) {
    return [d.Service, d.Permanent];
});

console.log(JSON.stringify(c3data));

Upvotes: 2

Related Questions