谷歌图表可视化仪表板数据源问题答案

【问题标题】：Google Chart Visualization Dashboard Data Source issue谷歌图表可视化仪表板数据源问题
【发布时间】：2015-05-25 14:10:13
【问题描述】：

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

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

这是我的代码：

  <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>

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

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

对接下来要尝试什么有什么想法吗？提前致谢！

【问题讨论】：

标签： javascript charts google-analytics google-visualization

【解决方案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>

【讨论】：