Google Chart Visualization Dashboard Data Source issue

Question

I have been playing around with the Google Chart Visualization, and it works great to create charts and tables. However, I now want to use controls to pull data from Google Analytics (super proxy) and use a String Filter for realtime searching of the resultset.

I am able to bind my controls and charts, but I am having issues when I use a Json datasource from my Google Analytics Super Proxy. The URL works just fine if I try to do a chart by itself, but not when i try to bind it with controls.

Here is my code:

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

Here is the error I get: One or more participants failed to draw()× Table has no columns.× Cannot draw chart: no data specified.

Now if I replace the Data source with a simple array, I get a nice table with a search filter that works great. I am not sure what I am doing wrong here.

Any thoughts on what to try next? Thanks in advance!

TulsaNewbie TulsaNewbie · Accepted Answer · 2019-06-10T16:24:52

I know this is a few years late, but the issue is basically that while you're building the query, you're never actually sending it or doing anything with the response. You need to build that in:

  <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 Chart Visualization Dashboard Data Source issue

1 Answers