Count array values in javascript for google visualization

Question

I'm using the Facebook Graph API to get the likes from a person, and I want to use google charts to graph it. But unfortunately, I'm a bit lost on how to do it.

The Array response.likes.data from facebook has this format:

[{"name":"Death Stranding","category":"Video Game","id":"1583509281947417"},{"name":"Ryan Gosling","category":"Artist","id":"246631252031491"},{"name":"The Nice Guys","category":"Movie","id":"1668045260089410"},{"name":"The Tonight Show Starring Jimmy Fallon","category":"TV Show","id":"31732483895"},{"name":"Hardcore Henry","category":"Movie","id":"653090358094272"},{"name":"Bronson","category":"Movie","id":"237617070301"}]

But I think I need to format it like this for the Google Chart:

       var data = google.visualization.arrayToDataTable([
      ['Categories', 'Likes count'],
      ['Films',     11],
      ['Brands',      2],
      ['TV Shows',  2],
      ['Artists', 2],
      ['Music',    7]
    ]);

Where both the categories and count of likes would be variables, since I don't know beforehand what the response will be.

Using for and push, I managed to get the distinct categories on an array. But I don't know how to count how many likes each of those categories has, and even less how to format it like [category, count].

I'm very new to this and trying to learn how to code, so I will really appreciate any inputs you have.

Thanks in advance.

Answer 1

google has a group() method that will total the counts for you

first, just need to get the data in a format google recognizes

see following working snippet,
the facebook data is transformed into a normal array / google data table

then the group method is used to group both by name and category

which could then be used in any normal chart,
here table charts are used to demonstrate

 google.charts.load('current', { callback: drawChart, packages: ['corechart', 'table'] }); function drawChart() { var fbData = [{"name":"Death Stranding","category":"Video Game","id":"1583509281947417"},{"name":"Ryan Gosling","category":"Artist","id":"246631252031491"},{"name":"The Nice Guys","category":"Movie","id":"1668045260089410"},{"name":"The Tonight Show Starring Jimmy Fallon","category":"TV Show","id":"31732483895"},{"name":"Hardcore Henry","category":"Movie","id":"653090358094272"},{"name":"Bronson","category":"Movie","id":"237617070301"}]; var gglData = []; // loop over fbData array for (var i = 0; i < fbData.length; i++) { // if first index, load column labels if (i === 0) { var cols = []; // loop over first object properties for (var key in fbData[i]) { if (fbData[i].hasOwnProperty(key)) { // use property name as column heading cols.push(key); } } gglData.push(cols); } var row = []; // loop over object properties for (var key in fbData[i]) { if (fbData[i].hasOwnProperty(key)) { // add property value row.push(fbData[i][key]); } } gglData.push(row); } var data = google.visualization.arrayToDataTable(gglData); var groupAll = google.visualization.data.group( data, // data table [1, 0], // group by columns // aggregation columns [{ column: 0, aggregation: google.visualization.data.count, type: 'number' }] ); var groupName = google.visualization.data.group( data, [0], [{ column: 0, aggregation: google.visualization.data.count, type: 'number' }] ); var groupCategory = google.visualization.data.group( data, [1], [{ column: 1, aggregation: google.visualization.data.count, type: 'number' }] ); var tableAll = new google.visualization.Table(document.getElementById('table_all')); tableAll.draw(data); var tableGroup = new google.visualization.Table(document.getElementById('table_group')); tableGroup.draw(groupAll); var tableName = new google.visualization.Table(document.getElementById('table_name')); tableName.draw(groupName); var tableCategory = new google.visualization.Table(document.getElementById('table_category')); tableCategory.draw(groupCategory); } 

 div { margin-top: 8px; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_all"></div> <div id="table_group"></div> <div id="table_name"></div> <div id="table_category"></div>