Attempting to to use addRows() from Google Visualization API with an array of arrays - JavaScript / jQuery

Question

I have tried addRows() and received the following error:

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

1. Out of the relevant SO posts, I narrowed it down to this post which I believed should work for me.
   • Storing an array of arrays in a variable failed (please see rawData in Snippet or Plunker).
2. I must be doing something syntactically wrong because the error previously mentioned persists like a nagging migraine.
   • After linting it, aside from the warnings of google not being defined and use strict and tab/space warnings, it was clean.

Here is a PLUNKER and below a Snippet. The Plunker has the markup commented out whilst the Snippet is reduced as much as possible. I rarely ask questions because when I go through the procedure, I end up resolving it myself. This problem unfortunately is an exception. Thank you for your time.

SNIPPET

    /*
    SO References                https://stackoverflow.com/questions/20840251/google-charts-row-given-with-size-different-than-when-data-addrows-from-var
                    */
    /* https://stackoverflow.com/questions/31264149/google-charts-not-accepting-correctly-formatted-array-as-row-data/31266253?noredirect=1#comment50571790_31266253 
     */
    /* Source begins here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    var rawData = [


      ["2001", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
      [0.21, 0.17, 0.18, 0.23, 0.2, 0.24, 0.24, 0.23, 0.29, 0.32, 0.33, 0.35, 0.35, 0.39, 0.38],
      [0.32, 0.33, 0.3, 0.36, 0.34, 0.34, 0.36, 0.32, 0.38, 0.4, 0.41, 0.41, 0.46, 0.45, 0.46],
      [0.49, 0.4, 0.4, 0.44, 0.42, 0.42, 0.44, 0.41, 0.48, 0.48, 0.51, 0.52, 0.53, 0.59, 0.56],
      [0.0, 0.51, 0.44, 0.49, 0.51, 0.53, 0.54, 0.51, 0.53, 0.61, 0.64, 0.66, 0.67, 0.7, 0.71],
      [0.13, 0.12, 0.11, 0.14, 0.12, 0.14, 0.16, 0.15, 0.2, 0.16, 0.19, 0.23, 0.21, 0.24, 0.27],
      [0.38, 0.35, 0.34, 0.39, 0.41, 0.43, 0.44, 0.36, 0.48, 0.54, 0.52, 0.55, 0.6, 0.62, 0.64],
      [0.3, 0.25, 0.19, 0.25, 0.21, 0.24, 0.24, 0.28, 0.29, 0.31, 0.35, 0.32, 0.41, 0.34, 0.39],
      [0.4, 0.38, 0.36, 0.39, 0.39, 0.4, 0.43, 0.42, 0.46, 0.53, 0.54, 0.54, 0.57, 0.57, 0.58],
      [0.61, 0.59, 0.61, 0.6, 0.63, 0.6, 0.62, 0.63, 0.62, 0.69, 0.73, 0.74, 0.77, 0.82, 0.8],
      [0.21, 0.22, 0.17, 0.19, 0.17, 0.18, 0.19, 0.19, 0.24, 0.27, 0.25, 0.29, 0.3, 0.32, 0.33],
      [0.43, 0.43, 0.4, 0.45, 0.43, 0.48, 0.5, 0.5, 0.53, 0.56, 0.62, 0.59, 0.64, 0.66, 0.7],
      [0.43, 0.4, 0.37, 0.46, 0.44, 0.4, 0.44, 0.39, 0.46, 0.51, 0.52, 0.57, 0.58, 0.61, 0.61],
      [0.18, 0.18, 0.15, 0.14, 0.16, 0.18, 0.2, 0.18, 0.23, 0.28, 0.26, 0.3, 0.29, 0.3, 0.29],
      [0.56, 0.57, 0.6, 0.69, 0.63, 0.65, 0.68, 0.63, 0.67, 0.67, 0.72, 0.73, 0.75, 0.79, 0.78],
      [0.41, 0.36, 0.34, 0.39, 0.39, 0.42, 0.45, 0.45, 0.49, 0.53, 0.57, 0.58, 0.62, 0.64, 0.66],
      [0.34, 0.32, 0.31, 0.37, 0.35, 0.38, 0.41, 0.37, 0.44, 0.49, 0.49, 0.5, 0.53, 0.58, 0.57],
      [0.32, 0.28, 0.21, 0.27, 0.25, 0.26, 0.26, 0.29, 0.3, 0.36, 0.4, 0.38, 0.42, 0.39, 0.42],
      [0.32, 0.28, 0.28, 0.34, 0.31, 0.32, 0.34, 0.32, 0.38, 0.41, 0.44, 0.46, 0.49, 0.53, 0.52],
      [0.38, 0.36, 0.34, 0.39, 0.39, 0.41, 0.43, 0.41, 0.46, 0.51, 0.52, 0.53, 0.55, 0.58, 0.58]

    ];


    google.charts.load('current', {
      'packages': ['line', 'corechart']
    });


    function initGAPI() {
      makeDataTable();
      setOptions();
      drawChart();
    }

    google.charts.setOnLoadCallback(initGAPI);

    function makeDataTable() {
      var data = new google.visualization.DataTable();
      data.addColumn("string", "Year");
      data.addColumn("number", "Silent Generation (1928-45)");
      data.addColumn("number", "Baby Boomers (1946-64)");
      data.addColumn("number", "Generation X (1965-80)");
      data.addColumn("number", "Millennials (1981 or later)");
      data.addColumn("number", "White evangelical Protestants");
      data.addColumn("number", "White mainline Protestants");
      data.addColumn("number", "Black Protestants");
      data.addColumn("number", "Catholics");
      data.addColumn("number", "Unaffiliated");
      data.addColumn("number", "Republican");
      data.addColumn("number", "Democrat");
      data.addColumn("number", "Independent");
      data.addColumn("number", "Conservative");
      data.addColumn("number", "Liberal");
      data.addColumn("number", "Moderate");
      data.addColumn("number", "White, non-Hispanic");
      data.addColumn("number", "Black, non-Hispanic");
      data.addColumn("number", "Men");
      data.addColumn("number", "Women");


      data.addRows(rawData)
    }

    function setOptions() {
      options = {

        curveType: 'function'

      };
    }

    function drawChart() {

      var chart = new google.visualization.LineChart(document.getElementById('chartBox'));
      chart.draw(data, options);
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>00A00</title>

</head>

<body>

  <section id="ii">
    <div id="chartBox"></div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>

  <!--<script block is here normally>-->
</body>

</html>

Answer 1

not sure how to articulate this but you're data array is incorrect
the rows and columns are inverted

here are your column definitions...

data.addColumn("string", "Year");
data.addColumn("number", "Silent Generation (1928-45)");
data.addColumn("number", "Baby Boomers (1946-64)");
...

in an array, they would look like this...

["Year", "Silent Generation (1928-45)", "Baby Boomers (1946-64)", ...]

as such, the data for these columns should look like this...

["2001", 0.21, 0.32, 0.49, ...],
["2003", 0.17, 0.33, 0.3, ...],
["2004", 0.18, 0.32, 0.49, ...],

rather than...

["2001", "2003", "2004", ...],
[0.21, 0.17, 0.18, ...],

as it is, "2003" is being assigned to the "Silent Generation (1928-45)" column

"2004" to the "Baby Boomers (1946-64)" column, etc...