Angular nvD3 Stacked Area Chart Data Series Format

Question

I am trying to use my own data in a nvD3 stacked area chart. The sample data format from the Angular nvD3 site has a format like this:

[{
     "key":"Series 1",
     "values":[[1025409600000,0],[1028088000000,-6.3382185140371]]
},
{
     "key":"Series 2",
     "values":[[1025409600000,0],[1028088000000,0]]
}]

I have data coming from my database in this format:

[{
     "Loc_Cnt":6,"Num_Cars":552,"Num_Employees":34,"active_month":"2017-10-01T00:00:00"
},
{
     "Loc_Cnt":4,"Num_Cars":252,"Num_Employees":14,"active_month":"2017-11-01T00:00:00"
}]

I am trying to graph from my data, three series (Series 1: Flt_Cnt, Series 2: Num_Cars, Series 3: Num_Employees). For each series, the X axis value being the active_month date, and the Y axis value being the series value.

How can I either A) convert my data to look like the sample data easily, or B) use my data as is in the AngularJs nvd3 chart? I feel a .forEach on the array would not be efficient for larger data sets, and not as easy to read. I tried to use d3.nest in some way, but haven't been able to get a correct format. Thanks for your help!

B-Ray B-Ray · Accepted Answer · 2017-11-03T13:15:15

It's not elegant, but I brute forced a way to my solution. If there are any better solutions, please do let me know.

var Loc_Cnt = [];
var Num_Cars = [];
var Num_Employees = [];
var obj = {};

//arr is the array of values in my format
arr.forEach(function (element) {
    //need the date in milisecond format
    var date = new Date(element.active_month);
    var time = date.getTime();
    
    //load corresponding arrays
    Loc_Cnt.push([time, element.Loc_Cnt]);
    Num_Cars.push([time, element.Num_Cars]);
    Num_Employees.push([time, element.Num_Employees]);
});

//load each key/values pair into new object
obj["Loc_Cnt"] = Loc_Cnt;
obj["Num_Cars"] = Num_Cars;
obj["Num_Employees"] = Num_Employees;

//d3.entries creates an object of key/VALUEs
arrRollup = d3.entries(obj);

//change the key word values to value
var i;
for (i = 0; i < arrRollup.length; i++) {
    arrRollup[i].values = arrRollup[i]['value'];
    delete arrRollup[i].value;
}

Angular nvD3 Stacked Area Chart Data Series Format

1 Answers