Query response handler being passed JSON object rather than QueryResponse object

[Mark S]

 

I am using the google.visualization.Query class to send a query to our own Microsoft MVC web site and am getting back an http response which appears to be correctly formatted when I inspect it with Fiddler or Firebug.   The response handler is being invoked but instead of being passed a QueryResponse object, it is being passed the JSON object that our MVC web site is returning.  For this reason, attempts to invoke methods such as response.isError() or response.getDataTable() are producing error messages like this one:  Object doesn't support property or method 'isError'

 

In my client-side code, I am able to get things working by:

 

replacing:
   if (response.isError())
with:
   if (resp.status != "ok")

 

and, similarly, replacing:
    var data = resp.getDataTable();
with:  
    var data = new google.visualization.DataTable(resp.table);

 

For completeness, here is the relevant client-side code in its entirety:

 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">

  google.load("visualization", "1", { packages: ["corechart"] });

  google.setOnLoadCallback(initialize);

  function initialize() {
      var opts = { sendMethod: 'xhr' };

      var tqxValue = encodeURIComponent("reqID:0;out:json;responseHandler:handleQueryResponse");
      var tmpUrl = 'http://cisdb.mybayloremr.com/Home/GetData?tqx=' + tqxValue;

      //alert("tmpUrl: " + tmpUrl);

      // Replace the data source URL on next line with your data source URL.
      var query = new google.visualization.Query(tmpUrl, opts);

      // Optional request to return only column C and the sum of column B, grouped by C members.
      //query.setQuery('select C, sum(B) group by C');

      // Send the query with a callback function.
      query.send(handleQueryResponse);
  }

  function handleQueryResponse(resp) {
      // Called when the query response is returned.
      if (resp.status != "ok") {
          alert('Error in query: ' + resp.getMessage() + ' ' + resp.getDetailedMessage());
          return;
      }

      //var data = resp.getDataTable();

      var data = new google.visualization.DataTable(resp.table);

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      var options = {
          title: 'Company Performance'
          //hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
      };

      chart.draw(data, options);

  }
 </script>

 

 

A Fiddler capture shows that the request looks like this:

 

GET http://cisdb.mybayloremr.com/Home/GetData?tqx=reqId%3A0 HTTP/1.1
Accept: */*
X-DataSource-Auth: a
Referer: http://cisdb.mybayloremr.com/Home/About
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host: cisdb.mybayloremr.com
Connection: Keep-Alive

 

 

A Fiddler capture shows that the response looks like this:

 

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 4.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 22 Apr 2014 19:23:50 GMT
Content-Length: 405

handleQueryResponse({"version":"0.6","reqId":"0","status":"ok","table":{"cols":[{"id":"Year","label":"Year","type":"string"},{"id":"Sales","label":"Sales","type":"number"},{"id":"Expenses","label":"Expenses","type":"number"}],"rows":[{"c":[{"v":"2004"},{"v":1000},{"v":400}]},{"c":[{"v":"2005"},{"v":1170},{"v":460}]},{"c":[{"v":"2006"},{"v":660},{"v":1120}]},{"c":[{"v":"2007"},{"v":1030},{"v":540}]}]}})

 

 

Any help would be greatly appreciated.

 

Mark S.

 

 

[Andrew Gallant]

The response from your server should be:

google.visualization.Query.setResponse(/* json */);

not

handleQueryResponse(/* json */);

[Mark S]

 

Andrew,

 

What you suggested worked, but it turns out there is another way to get it to work and that is to have the server simply return the JSON object without wrapping it inside of the response handler invocation.   I suspect that Google's online documentation at this URL https://developers.google.com/chart/interactive/docs/dev/implementing_data_source needs to be updated to indicate this.   The url is for the article titled "Implementing the Chart Tools Datasource Protocol (V0.6)" and the relevant section has the heading "JSON Response Format".  It states "This JSON object should be wrapped inside the responseHandler parameter value from the request" but as I found out, this turns out not to be necessary.  And that makes sense, since I shouldn't have to tell the Google Charts client code what response handler to invoke -- it already knows that from the parameter passed to the query.send method.

 

Mark S.