I am working on a Parse.com and jQuery Single Page Application. I want to
be able to chart historical data but my does not get drawn.
I am not sure what's going on. I appreciate any help I can get.
Thanks!
My code is as follows:
<html>
<head>
<title>Demo</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js";></script>
<script src="http://www.parsecdn.com/js/parse-1.5.0.min.js";></script>
<script src="https://maps.googleapis.com/maps/api/js";></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js";></script>
<script src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<style>
body { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 30px; margin: 0; }
p { margin: 40px 0; }
em { font-family: monospace; }
a { color: #5298fc; text-decoration: none; }
</style>
</head>
<body>
<ul>
<li><a href="#CurrentStatus">Current Status</a></li>
<li><a href="#Map">Map</a></li>
<li><a href="#Details">Details</a></li>
</ul>
<div id = "CurrentStatus" class = "page">
<div class = "content">
<h1>Current Status</h1>
</div>
<div> <b> Temperature: </b> </div>
<div id="temp_div" style="width:25%; height:5%">
<h5> Temperature </h5> </div>
</div>
<div id = "Map" class = "page">
<div id="map_d" style="width:100%; height:70%">
<div class = "content">
<h1>Map</h1>
</div>
</div>
<div id = "Details" class = "page">
<div id="piechart" style="width:100%; height:70%"></div>
<div class = "content">
<h1>Details</h1>
</div>
</div>
<script>
Parse.initialize("key", "key");
function showPage(pageId){
$(".page").hide();
$(pageId).show();
$(pageId).trigger("show:query");
}
$(window).on("hashchange", function(event){
showPage(location.hash);
});
$("#CurrentStatus").on("show:query", function(event){
setInterval(init, 30000);
});
$("#Map").on("show:query", function(event){
setTimeout(map, 5);
});
$("#Details").on("show:query", function(event){
console.log("precallback - details") //this appears on console
google.setOnLoadCallback(drawChart);
});
location.hash = "";
location.hash = "#CurrentStatus"
function init() {
var Parent = Parse.Object.extend("Parent");
var query = new Parse.Query(Parent);
query.descending("updatedAt");
query.first({
success: function(object) {
temp = document.createTextNode(object.get('Temp')),
dtemp = document.getElementById('temp_div');
dtemp.textContent = temp.data;
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
function map() {
var Parent = Parse.Object.extend("Parent");
var query = new Parse.Query(Parent);
query.descending("updatedAt");
query.first({
success: function(object) {
var mapCanvas = document.getElementById('map_d');
var mapOptions = {
center: new
google.maps.LatLng(object.get('Latitude'), (object.get('Longitude'))),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var lati = Number(object.get('Latitude'));
var longi = Number(object.get('Longitude'));
var myLatLng = {lat:lati, lng:longi};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Location!'
});
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
function drawChart() {
console.log("draw"); //this is not showing on console
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body></html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/c5fe4129-f70f-4a74-828f-972bfadf7ddd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
