Hello there
/i used two ready codes: candelstick and query from a google spreadsheet to draw a chart.It draws an incomplete chart and after it writes google.setOnLoadCallback(drawVisualization().I am so thankful of somone who help me solve this problem.here is the code:
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</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() {
var query = new google.visualization.Query(
'
https://docs.google.com/spreadsheet/pub?key=0AsEU1fdbnCNudGpvWk4tZU5iMVdpQ1ZTXzFkb2ZFWUE&single=true&gid=0&output=html');
// Apply query language statement.
query.setQuery('SELECT A,C,D,E,F');
// 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();
var options = {
legend: 'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>