Using HTML to display Query
113 views
Skip to first unread message
far m
May 31, 2012, 8:58:01 PM5/31/12
to google-visua...@googlegroups.com
I know the code works: http://jsfiddle.net/essonoma/uKKMV/ I even tried it with jsfiddle: http://jsfiddle.net/essonoma/9M9jR/#base
But when I put everything in a HTML file and publish it nothing shows up. It is very strange. This is the complete HTML code:
------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
</head>
<script>
// Add this to resources: http://www.google.com/jsapi?fake=.js
// Make sure you have NO WRAPE on
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);
// why make these global?
var visualization;
var visualization2;
function drawVisualization() {
// To see the data that this visualization uses, browse to
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0AqzQGhNv6cV-dDBzZmZ2NzVGSkVVTUEwMEZPOG5YTHc#gid=0');
// Apply query language.
query.setQuery('SELECT A,B,C');
// 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();
visualization = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart1',
options: {
title: "Temperature (F) VS. Time",
width: 500,
height: 100,
chartArea: {'left': 25, 'top': 15, 'right': 20, 'bottom': 0},
legend: 'none', // it could be something else " "
vAxis: {
title: "Fahrenheit"
},
hAxis: {
title: "Time (YYYYMMDD.HHMMSS)"
}
},
view: { // use columns 0, 1
columns: [0, 1]
}
});
visualization2 = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart2',
options: {
// Use the same chart area width as the control for axis alignment.
hAxis: {'slantedText': false}, // Add actual dates
title: "Wind Speed",
vAxis: { title: "MPH"},
//hAxis: { title: "Time"},// removes actual dates and adds "Time"
width: 500,
height: 100,
legend: {'position': 'none'},
chartArea: {'left': 25, 'top': 0, 'right': 20, 'bottom': 80}
},
// options: {
// title: "Wind Speed",
// width: 500,
// height: 100,
// chartArea: {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
// vAxis: {
// title: "MPH"
// },
// hAxis: {
// title: "Time"
// }
// },
view: { // use columns 0 (converted to date object), 2
columns: [{
type: 'datetime',
label: 'Time',
calc: function (dt, row) {
var val = dt.getValue(row, 0);
var year = Math.floor(val / 10000);
val = val - (10000 * year);
var month = Math.floor(val / 100) - 1; // js months are zero-indexed
val = val - (100 * (month + 1));
var day = Math.floor(val);
val = val - day;
var hour = Math.floor(val * 100);
val = val - (hour / 100);
var minute = Math.floor(val * 10000);
val = val - (minute / 10000);
var second = Math.floor(val * 1000000);
val = val - (second / 1000000);
return new Date(year, month, day, hour, minute, second);
}
}, 2]
}
});
////////////////////////
// Define a slider control for the Temp column.
var slider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control1',
options: {
filterColumnLabel: 'Temp',
ui: {
labelStacking: 'horizontal'// or vertical
}
}
});
// Define a TIME slider control for the Temp column.
var slidertime = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control3',
options: {
filterColumnLabel: 'Time',
ui: {
labelStacking: 'horizontal'// or vertical
}
}
});
// Define a category picker control for the WindSpeed column
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control2',
options: {
filterColumnLabel: 'WindSpeed',
ui: {
labelStacking: 'horizontal',
allowTyping: false,
allowMultiple: false
}
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slidertime], [visualization, visualization2]).
// Draw the entire dashboard.
draw(data);
}
</script>
<body>
<div id="dashboard">
<table width="200" border="5">
<tr>
<td>
<div id="control.1"></div>
<div id="control2"></div>
<div id="control3"></div></td>
</tr>
<tr>
<td>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div></td>
</tr>
</table>
</div>
</body>
</html>
far m
Jun 1, 2012, 1:25:50 AM6/1/12
to google-visua...@googlegroups.com
I got it to work! I was using the wrong package! Watch it! It can give you too many headaches!
asgallant
Jun 1, 2012, 9:41:04 AM6/1/12
to google-visua...@googlegroups.com
You are missing the Google jsapi script tag:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
far m
Jun 2, 2012, 3:29:37 AM6/2/12
to google-visua...@googlegroups.com
Thank you so much. I changed the header to the following. I know the code is good. But still the html file does not display the graph. It is very strange, because I have a similar code, and that works ok. I am missing some fundamental idea! I expect to see the chart if I just copy this html code in mychart.html file and view it in the browser. But instead I get a blank page!
------------------------------------------------------
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MY Google Visualization API Sample</title>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['annotatedtimeline']});
</script>
<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0AqzQGhNv6cV-dDVzRWdINUxycGxQcWgtcktCRG5IQ1E');
// Assumes that column:
query.setQuery('SELECT M,B');
// 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 chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {
displayAnnotations: true,
scaleColumns: [12, 1],
scaleType: 'allfixed'
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 300px;"></div>
</body>
</html>
---------------------------------------------------------------------
asgallant
Jun 4, 2012, 9:58:29 AM6/4/12
to google-visua...@googlegroups.com
That is most likely a Flash security problem, coming from the AnnotatedTimeline. See the notes at the bottom of the ATL charts page for a fix.
far m
Jun 6, 2012, 2:01:20 PM6/6/12
to google-visua...@googlegroups.com
Fixed it! Thank you so much!
Reply all
Reply to author
Forward
0 new messages