将 Google 趋势可视化查询转换为 Google GEOchart

Question

我正在尝试将一些数据从 Google 趋势传递到 Google 图表，但我收到 Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns) 错误

我只是假设它会自动从我将其查询到图表中而不是出现错误。我遇到错误的代码是：

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'}
        }
    });
  });
}

对于我为什么会收到此错误的任何帮助以及解决方案非常感谢:)

Answer 1

由于 GeoChart 需要两列，
使用 DataView 从 DataTable 中提取前两列

另外，需要加载 'geochart' 包，请参阅以下工作片段...

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>

将 Google 趋势可视化查询转换为 Google GEOchart

Turning Google trend visual query into Google GEOchart

javascript

google-visualization

google-trends