google chartapi custom html datasource query times out
I am simply trying to implement what I believe is google's example of a custom HTML data-source. I am clearly missing something but am unable to see it.
The goal is to have my default page retrieve a table's worth of data from my own data-source and chart it.
The error I receive is eventually I get a timeout dialog displayed.
I have two files default.htm and data.htm. For a period of time this will also be on the associated website. (www.ichoosewellness.com/chartapitest).
default.htm:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
function drawVisualization() {
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Create and draw the visualization.
var comboChart = new google.visualization.ComboChart(document.getElementById('chart_div'));
comboChart.draw();
var div = document.getElementById('chart_div');
div.style.backgroundColor = 'red';
}
开发者_C百科google.setOnLoadCallback(drawVisualization);
var div = document.getElementById('chart_div');
div.style.backgroundColor = 'red';
</script>
</head>
<body>
<div id='chart_div' style="width: 500px; height: 250px; border: 1px solid green;">
</div>
</body>
</html>
data.htm
<html>
<body>
<table border='1' cellpadding='2' cellspacing='0'>
<tr style='font-weight: bold; background-color: #aaa;'>
<td>
label 1
</td>
<td>
label 2
</td>
</tr>
<tr bgcolor='#f0f0f0'>
<td align='right'>
1
</td>
<td>
a
</td>
</tr>
<tr bgcolor='#ffffff'>
<td align='right'>
2
</td>
<td>
b
</td>
</tr>
<tr bgcolor='#f0f0f0'>
<td align='right'>
3
</td>
<td>
c
</td>
</tr>
<tr bgcolor='#ffffff'>
<td align='right'>
4
</td>
<td>
d
</td>
</tr>
</table>
</body>
</html>
This question is pretty old now but I will add what I found out about it since I had a similar problem.
Basically I was trying to get google.visualization.Query() to call my WCF REST service and have it return a json dataTable. Every time the query executed, it would throw a timeout error even though the GET request executed successfully. The culprit turned out to be the formatting of the response string and cross site domain permissions.
The response format is very particular and would throw a timeout error if not correctly defined. You have to go over the response format with a fine tooth comb and read the detailed documentation below.
Here is the URL that explain in detail the proper format: http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html1
Secondly don't forget about cross site domain permission. Because I was testing from localhost:63532 and calling the REST service located on localhost:63002 they were not the same domain and was not being queried. For testing I needed to add the the following to the response header.
Access-Control-Allow-Origin:http://localhost:63532
These two items were the key to getting past the timeout error.
In the case of your code calling HTML, if you read the linked documentation above there is a section in there describing HTML Response Format. Here is the relevant text:
If the request specifies out:html, the response should be an HTML page defining an HTML table with the data. This is useful for debugging your code, because the browser can render your result in a readable format directly. You cannot send a query for an HTML response using the google.visualization.Query object. You must make a query for an HTML response using custom code, or by typing a URL similar to this one in your browser:
Since in your code you are trying to do this:
var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');
It seems from the documentation that this is not supported by the query function.
加载中,请稍侯......
精彩评论