Google charts error: every row given must be either null or an array

Question

I've setup a Google charts (org chart) implementation that accepts the list of rows as a variable, ultimately coming from PHP. If I try to render the org chart using that variable, I get the error "every row given must be either null or an array." If I alert(userlist) prior to the addRows command, copy that output, and replace the variable with the output, all is well, so I know that it's receiving the data properly. Here's what I've got so far:

google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');
  data.addColumn('string', 'ToolTip');

  // Pull user information from Drupal
  var userlist = Drupal.settings.orgchart.userlist;

  // For each orgchart box, provide the name, manager, and tooltip to show.
  alert(userlist);
  data.addRows([userlist]);

  // Create the chart.
  var chart = new google.visualization.OrgChart(document.getElementById('org-chart'));
  // Draw the chart, setting the allowHtml option to true for the tooltips.
  chart.draw(data, {allowHtml:true});
}

Again, if I replace userlist in data.addRows([userlist]); with the output from alert(userlist) it works great.

UPDATE: here is the raw output:
[{v:'CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local', f:'My Name'}, 'CN=Supervisor Name,OU=Sr. Management,OU=Fesslers,DC=hpsi,DC=local', ''], [{v:'', f:'Another Name'}, '', ''], [{v:'CN=Yet Another,OU=IT,OU=Fesslers,DC=hpsi,DC=local', f:'Yet Another'}, 'CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local', '']

UPDATE: adding in the PHP that creates my userlist variable:

$allusers = entity_load('user');
$userlist = '';
if ($allusers) {
  foreach ($allusers as $useritem) {
    $dn = '';
    $manager = '';
    $fullname = '';
    if ($useritem->uid > 1) { // Skip user 0 and 1
      if (isset($useritem->field_distinguished_name['und']['0']['value'])) {
        $dn = $useritem->field_distinguished_name['und']['0']['value'];
      }
      if (isset($useritem->field_manager_dn['und']['0']['value'])) {
        $manager = $useritem->field_manager_dn['und']['0']['value'];
      }
      if (isset($useritem->field_full_name['und']['0']['value'])) {
        $fullname = $useritem->field_full_name['und']['0']['value'];
      }
      ($userlist == '') ? $userlist = '[[{v:\'' . $dn . '\', f:\'' . $fullname . '\'}, \'' . $manager . '\', \'\']' : $userlist .= ', [{v:\'' . $dn . '\', f:\'' . $fullname . '\'}, \'' . $manager . '\', \'\']';
    }
  }
  if ($userlist != '') {
    $userlist .= ']';
  }
}

Ahh, sorry -- meant to do that. I updated the original post. If I'm reading the sample data correctly, it seems to include everything necessary. — Sean Cunningham, Mar 30 '16 at 21:34
How is your variable userlist defined? Pressumably it would be an array of arrays, `var userlist = [[foo, bar], [bar, foo]]`, and if that's the case then you'd be trying to call `addRows` on an array of arrays of arrays (`addRows([['foo', 'bar'], ['bar', 'foo']]])`); My second guess would be that you havn't formatted everything right in your drupal.settings.orgchart.userlist. Is it possible to share how you format the output at that point? Everything works as expected for me... https://jsfiddle.net/heennkkee/6q1qto0a/2/1/ — Henrik Aronsson, Mar 31 '16 at 13:31
I've tried several options: `var userlist = Drupal.settings.orgchart.userlist;`, `var userlist = new Array(Drupal.settings.orgchart.userlist;`. If I do what you did in your JS fiddle (statically adding the data to var userlist), it works -- but if I just use the variable as-is, it doesn't. I'll add in the PHP that renders the userlist variable too. — Sean Cunningham, Mar 31 '16 at 14:06
@SeanCunningham Is the typeof your `userlist` a string? or an array? please try : `alert(typeof userlist);` and tell us what is the output? I think it should be a `string`. — cнŝdk, Apr 01 '16 at 11:28
userlist should be an array. That's your problem then! You're not making drupal pass you an array. https://developers.google.com/chart/interactive/docs/reference#DataTable_addRows — Henrik Aronsson, Apr 03 '16 at 00:04
If I change the variable declaration to `var userlist = new Array(Drupal.settings.orgchart.userlist);` and then alert the typeof, it says it's an object -- however, the error persists. — Sean Cunningham, Apr 04 '16 at 14:05
Try keeping it as it was before, (remove the `Array`) and try to utilize `JSON.parse` instead. More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse — Henrik Aronsson, Apr 06 '16 at 04:59

score 1 · Accepted Answer · edited May 23 '17 at 12:17

You have several problems:

the value of userlist is a string, not an object. When you are trying to addRows([userlist]) you are sending an array having a single element, a string.
when trying to transform the object you receive from string to javascript, JSON.parse doesn't work, because the property names are not in quotes ({f:'My name'} should be {"f":"My name"})
sure, it works with userlist=eval('['+userlist+']'), but using eval in your Javascript is not always the best idea.
you are declaring Name as string, but you are sending an object. What's up with that? If you are not sending objects, you also get rid of the Javascript/JSON parsing situation

Finally, I am not sure why your value needs the additional square brackets. From what I see of your PHP code it should have the brackets of the array of arrays already there.

Conclusion: change the format of the returned value so that it is a valid JSON and read it with JSON.parse(value). I am not a Drupal user, but I've found this answer about how to pass a complex PHP variable to Javascript: https://drupal.stackexchange.com/questions/21566/how-to-pass-php-variables-to-javascript-jquery

Here is a working (?) jsfiddle: https://jsfiddle.net/pxjhffj9/ using eval with the string you provided originally.

Here is a valid JSON:

[
    [{
            "v" : "CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local",
            "f" : "My Name"
        }, "CN=Supervisor Name,OU=Sr. Management,OU=Fesslers,DC=hpsi,DC=local", ""],
    [{
            "v" : "",
            "f" : "Another Name"
        }, "", ""],
    [{
            "v" : "CN=Yet Another,OU=IT,OU=Fesslers,DC=hpsi,DC=local",
            "f" : "Yet Another"
        }, "CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local", ""]
]

Ahh, changing the output to use double-quotes and then using JSON.parse did it. Thanks a bunch! — Sean Cunningham, Apr 11 '16 at 13:41

score 0 · Answer 2 · answered Apr 01 '16 at 11:19

Based on the PHP you added you're trying to addRows as a nested array.

Your PHP will generate an array like var userlist = [['bar', 'foo'], ['foo', 'bar]] and when you add your rows it'll be addRows([ [['bar', 'foo'], ['foo', 'bar]] ], becoming one [ ] to much.

Try removing the [ ] around userlist in your call to addRows().

Google charts error: every row given must be either null or an array

2 Answers2