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.

WhiteHat · Accepted Answer · 2016-12-13T12:36:55.650

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>

Thanks @WhiteHat . That worked. Would you be so kind as to walk me through your code? I got the gist of it but would love some comments to better process it. Particularly on the hasownproperty method. Shouldn't I have to use category as the property? why key? — rrriki, Dec 13 '16 at 03:56
rather than hard-coding `name`, `category`, etc. -- the code uses `for...in` to loop over the _keys_ / _properties_ of each object in the array -- it then checks `hasOwnProperty` to make sure the key / property exists on the object and not its prototype -- it's just an old habit when looping properties of an object -- `Object.keys` can be used to avoid -- [read more here](http://stackoverflow.com/a/32422910/5090771) — WhiteHat, Dec 13 '16 at 12:31

Count array values in javascript for google visualization

1 Answers1