Question

I require my Google chart to be drawn with dynamic data, so I’m storing it in a variable:

var rowData = "[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]";

I’m then passing this variable into Google’s function:

    google.load('visualization', '1', { packages: ['orgchart'] });
    //google.setOnLoadCallback(drawChart);
    function drawChart(json) {
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
            rowData
        ]);
        chart = new google.visualization.OrgChart(document.getElementById('orgChart'));
        chart.draw(data, { allowHtml: true });
        google.visualization.events.addListener(chart, 'select', selectHandler);
    }

However, this gives me an ‘Every row given must be either null or an array.’ error. If I remove the variable and pass the data in directly, it works fine:

    ...
    data.addRows(
        [ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]
    );
    ...

Can anyone help tell me what’s going on here? Thanks in advance.

Answer 1

In your first example the data is a single string, in the second example your data is a JavaScript structure of arrays and individual strings / values.

Hard to recommend a best-practice without knowing where you’re dynamic data is coming from, but you should be able to remove the outermost quotes like this and have it work:

var rowData = [ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ];