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

Google Chart Visualization Dashboard Data Source issue

本文关键字：数据源 问题 仪表板 可视化 谷歌      更新时间：2023-09-26

我一直在玩谷歌图表可视化，它可以很好地创建图表。然而，我现在想使用控件从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>

以下是我得到的错误：一个或多个参与者未能抽取（）×表没有列。×无法绘制图表：未指定数据。

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

你有没有想过下一步该做什么？提前感谢！

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

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

相关文章：