Question

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

我可以绑定我的控件和图表，但是当我使用Google Analytics Super Proxy的Json数据源时遇到问题。如果我尝试单独执行图表，URL工作正常，但是当我尝试将其与控件绑定时，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>

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

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

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

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>

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

1 个答案: