Trying to change DataView by user input with Google Visualization

Question

I've been developing this dataset with Google Visualization and so far I've managed to get it functional and halfway finished. There is only one chart that can change chartType by the user checking one of the yellow radio buttons on top. Below that group of yellow radio buttons are a group of blue radio buttons.

These blue radio buttons were intended to change DataView, unfortunately, I can't seem to get it working. I receive the following error:

Uncaught TypeError: a.Y is not a function(…) ................. jsapi_compiled_default_module.js:129

1. I've tried downgrading to the deprecated Google API:

2. I've downgraded jQuery down to 2.2.2

3. I've placed the script before the closing </body> tag.

4. I've placed it in the </head>

5. I've gone insane.

[PLUNKER]

SNIPPET

<!--THIS PART REMOVED-->
  </header>

  <section id="ii">
    <h1>Sources</h1>
    <figure id='chart'></figure>

  </section>
  <footer>&nbsp;</footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    var options = {
      backgroundColor: {
        fill: 'transparent',
        stroke: '#000000',
        strokeWidth: 0
      },
      tooltip: {
        textStyle: {
          color: '0000FF'
        },
        trigger: 'focus'
      },
      animation: {
        "startup": true,
        duration: 1000,
        easing: 'out'
      },
      title: 'Percentage of Americans in Favor of / Opposed to Same-sex Marriage (2001-16)',
      titleTextStyle: {
        color: 'gold',
        fontSize: 18
      },
      hAxis: {
        textStyle: {
          color: 'cyan'
        },
        title: 'Year',
        titleTextStyle: {
          color: 'gold',
          fontSize: 22
        },
        format: '####'
      },
      vAxis: {
        textStyle: {
          color: 'cyan'
        },
        title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
        titleTextStyle: {
          color: 'gold',
          fontSize: 16
        },
        maxValue: 1,
        format: '#%'

      },
      legend: {
        textStyle: {
          color: 'white'
        }
      }

    }
    var query;
    var chart;
    var data;
    var view;
    var formatter;
    var main;
    var selChart;
    var selGroup;
    var visual;
    google.charts.load('current', {
      'packages': ['corechart', 'line']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743&range=A:T');
      query.send(function(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
          return;
        }
        data = response.getDataTable();
        visual = new google.visualization.DataView(data);
        formatter = new google.visualization.NumberFormat({
          pattern: '#%'
        });
        formatter.format(data, 1);
        formatter.format(data, 2);
        formatter.format(data, 3);
        formatter.format(data, 4);
        formatter.format(data, 5);
        formatter.format(data, 6);
        formatter.format(data, 7);
        formatter.format(data, 8);
        formatter.format(data, 9);
        formatter.format(data, 10);
        formatter.format(data, 11);
        formatter.format(data, 12);
        formatter.format(data, 13);
        formatter.format(data, 14);
        formatter.format(data, 15);
        formatter.format(data, 16);
        formatter.format(data, 17);
        formatter.format(data, 18);
        formatter.format(data, 19);
        chart = new google.visualization.LineChart(document.getElementById('chart'));
        chart.draw(visual, options);
      });
    }

    $('#chartOpt').on('change', selectChart);

    function selectChart() {
      chartSel = $("input[name='chart']:checked").val();
      main = new google.visualization.ChartWrapper({
        containerId: 'chart'
      });
      switch (chartSel) {
        case '1':
          main.setChartType('LineChart');
          main.setOptions(options);
          main.setDataTable(data);
          main.draw();
          break;
        case '2':
          main.setChartType('LineChart');
          main.setOptions(options);
          main.setDataTable(data);
          main.draw();
          break;
        case '3':
          main.setChartType('ColumnChart');
          main.setOptions(options);
          main.setDataTable(data);
          main.draw();
          break;
        case '4':
          main.setChartType('ScatterChart');
          main.setOptions(options);
          main.setDataTable(data);
          main.draw();
          break;
      }
    }

    $('#groupOpt').on('change', selectGroup);

    function selectGroup() {
      groupSel = $("input[name='group']:checked").val();
      view = new google.visualization.DataView({
        containerId: 'chart'
      });
      switch (groupSel) {
        case '0':
          view.setColumns([0, 1, 2, 3, 4]);
          view.setOptions(options);
          view.setDataTable(data);
          view.draw();
          break;
        case '1':
          view.setColumns([0, 5, 6, 7, 8, 9]);
          view.setOptions(options);
          view.setDataTable(data);
          view.draw();
          break;
        case '2':
          view.setColumns([0, 10, 11, 12]);
          view.setOptions(options);
          view.setDataTable(data);
          view.draw();
          break;
        case '3':
          view.setColumns([0, 13, 14, 15]);
          view.setOptions(options);
          view.setDataTable(data);
          view.draw();
          break;
        case '4':
          view.setColumns([0, 16, 17]);
          view.setOptions(options);
          view.setDataTable(data);
          view.draw();
          break;
        case '5':
          view.setColumns([0, 18, 19]);
          view.setOptions(options);
          view.setDataTable(data);
          view.draw();
          break;
      }
    }
  </script>
  <!--<script src='gvis-api.js'></script>-->
</body>

</html>

Answer 1

the code is failing here when trying to create the DataView...

function selectGroup() {
  groupSel = $("input[name='group']:checked").val();
  view = new google.visualization.DataView({  // <-- fails here
    containerId: 'chart'
  });
  switch (groupSel) {
    case '0':
      view.setColumns([0, 1, 2, 3, 4]);
      view.setOptions(options);  // <- view doesn't have this method
      view.setDataTable(data);   // <- view doesn't have this method
      view.draw();               // <- view doesn't have this method
      break;
    case '1':
      ...

i think you have DataView confused with ChartWrapper

first, the constructor for a DataView only accepts a DataTable or another DataView,
not a containerId

changing to a ChartWrapper does make sense for the code that is there
but ChartWrapper doesn't have a method for setColumns

use setView instead
also need to set a chartType

function selectGroup() {
  groupSel = $("input[name='group']:checked").val();
  view = new google.visualization.ChartWrapper({  // <-- change to ChartWrapper
    containerId: 'chart',
    chartType: 'LineChart'                        // <-- set chartType
  });
  switch (groupSel) {
    case '0':
      view.setView({columns: [0, 1, 2, 3, 4]});   // <-- use setView, note object arg
      view.setOptions(options);
      view.setDataTable(data);
      view.draw();
      break;
    case '1':
    ...

this should remove the error...