Turning Google trend visual query into Google GEOchart

Question

I'm trying to pass some data from the Google trends to a Google chart but i'm getting the Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns) error

I just assumed it would work automatically from one I query it into a chart rather than get an error. The code i'm getting an error with is:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
var findTitle = $(".input-wrapper input").val();
function drawChart() {
  console.log(findTitle);
  var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
      return;
    }
    data = response.getDataTable();
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (data, row) {
        return data.getFormattedValue(row, 0);
      },
      type: 'string',
      label: data.getColumnLabel(0)
    }, 1]);
    var chart = new google.visualization.GeoChart(document.getElementById('chart_region_top'));
    chart.draw(view, {
      chartArea: {
        height: '80%',
        width: '100%'
      },
    });
    chart.draw(data, {
        width: 1000,
        height: 500,
        title: 'Tag: Battlefield 1',
        colors: ['#ff0000'],
        backgroundColor: '#2D2D2D',
        legendTextStyle: { color: '#FFF', position: 'bottom' },
        titleTextStyle: { color: '#FFF' },
        hAxis: {
          textStyle: {color: '#FFF'},
          gridlines: {color: '#FFF'}
        },
        vAxis: {
          textStyle: {color: '#FFF'},
          gridlines: {color: '#FFF'}
        }
    });
  });
}

Any help into why i'm getting this error and a solution is greatly appreciated :)

Answer 1

since the GeoChart expects two columns,
use a DataView to extract the first two columns from the DataTable

also, need to load 'geochart' package, see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['geochart']
});

function drawChart() {
  var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
      return;
    }

    var view = new google.visualization.DataView(response.getDataTable());
    view.setColumns([0, 1]);

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(view, {
      legend: 'none'
    });
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>