javascript - 谷歌图表可视化仪表板数据源问题

Question

我一直在玩 Google Chart Visualization，它非常适合创建图表和表格。但是，我现在想使用控件从 Google Analytics( super 代理)中提取数据，并使用字符串过滤器来实时搜索结果集。

我能够绑定(bind)我的控件和图表，但是当我使用来自 Google Analytics super 代理的 Json 数据源时遇到问题。如果我尝试自己制作图表，则 URL 可以正常工作，但当我尝试将其与控件绑定(bind)时则不行。

这是我的代码:

  <script type = "text/javascript" >
  google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard'));

var data = new google.visualization.Query('https://chrome-octane-87219.appspot.com/query?id=ahVzfmNocm9tZS1vY3RhbmUtODcyMTlyFQsSCEFwaVF1ZXJ5GICAgIDruI8KDA&format=data-table-response');

  Filter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'StringFilter',
    'options': {
      'filterColumnIndex': 0,
      'matchType': 'any'
    }
  });

  var ResultsWrapper = new google.visualization.ChartWrapper({
    // Example Browser Share Query
    "containerId": "results",
    "refreshInterval": 10000,
    "chartType": "Table",
    "options": {
      "width": 800,
      "height": 440,
      "title": "Test Data",
    }
  });

  dashboard.bind(Filter, ResultsWrapper);
	  
  dashboard.draw(data);
  ResultsWrapper.draw();
}

<script type = "text/javascript"
src = "https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls','table']}]}" > </script>

<div id="dashboard">
  <div id="StringFilter"></div>
  <div id="results" style="margin:auto;"></div>
</div>

这是我得到的错误:
一位或多位参与者绘制失败()×
表没有列。×
无法绘制图表:未指定数据。

现在，如果我用一个简单的数组替换数据源，我会得到一个带有搜索过滤器的漂亮表格，效果很好。我不确定我在这里做错了什么。

关于接下来要尝试什么的任何想法？
提前致谢!

Answer 1

我知道这已经晚了几年，但问题基本上是，当你构建查询时，你从来没有真正发送它或对响应做任何事情。您需要将其构建在:

  <script type = "text/javascript" >
  google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard'));

var data = new google.visualization.Query('https://chrome-octane-87219.appspot.com/query?id=ahVzfmNocm9tZS1vY3RhbmUtODcyMTlyFQsSCEFwaVF1ZXJ5GICAgIDruI8KDA&format=data-table-response');

Filter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'StringFilter',
    'options': {
      'filterColumnIndex': 0,
      'matchType': 'any'
    }
  });

  var ResultsWrapper = new google.visualization.ChartWrapper({
    // Example Browser Share Query
    "containerId": "results",
    "refreshInterval": 10000,
    "chartType": "Table",
    "options": {
      "width": 800,
      "height": 440,
      "title": "Test Data",
    }
  });

  dashboard.bind(Filter, ResultsWrapper);
  data.send(handleQueryResponse)

  function handleQueryResponse(response) {
    if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return null; }

    dashboard.draw(data);
    ResultsWrapper.draw();
  }
}

<script type = "text/javascript"
src = "https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls','table']}]}" > </script>

<div id="dashboard">
  <div id="StringFilter"></div>
  <div id="results" style="margin:auto;"></div>
</div>