Formatting data for Google Charts

Question

I am trying to achieve something in order to get my data formatted correctly for Google Charts. At the moment, I have data in the following format

Array(4)
    0: {Category: "cat2", Count: 11}
    1: {Category: "cat4", Count: 24}
    2: {Category: "cat3", Count: 52}
    3: {Category: "cat1", Count: 57}

Google requires the first row to be the Labels, and the other rows the content. So in my case Google requires my data to be like so

let data = google.visualization.arrayToDataTable([
   ['Category', 'Count'],
   ['cat1',  11],
   ['cat2',  24],
   ['cat3',  52],
   ['cat4',  57]
]);

In order to do this, I am doing the following

generateData (data) {
    return [Object.keys(data[0])].
    concat(
        data.map(
            data => Object.values(data)
        )
    );
}

So this all works fine, however, there are two additional things I am trying to achieve. Firstly, I want to make sure the data is in a particular order.

So this is what I am thinking, I do not need to dynamically collect the categories like I do above. Reason for this is because I know it will always be 4 categories, cat1, cat2, cat3 and cat4. So I could potentially define my categories, in the order I want them.

generateData (data) {
    let myArray = [];
    const header = ["Category", "Count"];
    const categories = ["cat1", "cat2", "cat3", "cat4"];
    myArray.push(header);
}

But then how do I add the additional rows from the data array, making sure it matches up with the correct category?

The second thing I wan to do is give each categories bar its own color. According to the Google docs, within the header row, I can add a style

let myArray = [];
const header = ["Category", "Count", { role: 'style' }];
const categories = ["cat1", "cat2", "cat3", "cat4"];
const colors = ["red", "blue", "silver", "yellow"];
myArray.push(header);

But then for the additional rows, from my data array, I would need to add the appropiate color for each category. So the final array I am after should look something like this

[
  ["category", "Count", { role: 'style' }],
  ["cat1", "11", "red"],
  ["cat2", "24", "blue"],
  ["cat3", "52", "silver"],
  ["cat4", "57", "yellow"]
];

How can I achieve this with the initial data that is being passed?

Thanks

Answer 1

You can use forEach on any of the the arrays and then create an array with three values with corresponding values.

 let myArray = []; const header = ["Category", "Count", { role: 'style' }]; const data = [ {"Category":"cat3","Count":59}, {"Category":"cat1","Count":109}, {"Category":"cat2","Count":120}, {"Category":"cat4","Count":57} ] const obj = data.reduce((ac,{Category, Count}) => (ac[Category] = Count,ac),{}); const categories = ["cat1", "cat2", "cat3", "cat4"]; const count = [57, 11, 52, 24]; const colors = ["red", "blue", "silver", "yellow"]; myArray.push(header); categories.forEach((x,i) => { myArray.push([x,obj[x],colors[i]]); }) console.log(myArray)