“Row given with size different than 3” Google Charts

问题

I'm using Google Charts inside of a system called Klipfolio. Been tinkering with it for days. Curious if anyone else has tried the same. This issues isn't particular to Kipfolio but I figured a little bit of background may go a long way.

This is the code:

var _component = this;
var _dataModel = this.dataModel;
var thearray = $.map(_dataModel, function(value, index) {
 return [value];
});
var thearrays = ('['+thearray.toString()+']');
var datadone = (JSON.parse(thearrays));
console.table(datadone);
google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');

data.addRows([datadone]);

    // Sets chart options.
    var options = {
    sankey: {
        iterations: 700,
        node: {
            label: {
                fontName: 'Arial',
                fontSize: 12,
                color: 'rgb(74,74,74)',
                bold: true,
                italic: false
            },
            interactivity: true, // Allows you to select nodes.
            labelPadding: 3, // Horizontal distance between the label and the node.
            nodePadding: 20, // Vertical distance between nodes.
            width: 10, // Thickness of the node.
            colors: [
                'rgb(82,144,233)', // Custom color palette for sankey nodes.
            'rgb(113,179,124)', // Nodes will cycle through this palette
            'rgb(206,226,55)', // giving each node its own color.
            'rgb(239,209,64)',
                'rgb(236,147,47)',
                'rgb(225,77,87)',
                'rgb(150,89,148)',
                'rgb(157,121,82)',
                'rgb(154,146,137)']
        }
    }


};

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
  }

The _dataModel variable outputs in console.table as this: http://imgur.com/hQD9V2W.

The thearray variable outputs in console.table as this: http://imgur.com/TFwkkfQ

When the chart renders, it throws up the error:

Uncaught Error: Row given with size different than 3 (the number of columns in the table)

Are there any other steps I should take to eliminate this error? I'm new to using javascript and objects/arrays. I see that the thearray variable has 4 columns that appear, but is that the issue?

回答1:

Looks like my issue was adding the brackets on data.addRows function. So instead of:

data.addRows([datadone]);

which didn't generate, I replaced it with:

data.addRows(datadone);

Thanks Henrik for pointing me to look at the data source. Once I verified the formation, I was able to identify the issue and fix it. Chart looks great now!

来源：https://stackoverflow.com/questions/31404309/row-given-with-size-different-than-3-google-charts

标签

javascript

arrays

google-visualization

klipfolio