Google Chart With parse.com and jQuery does not draw
52 views
Skip to first unread message
Nikhil Raman
Aug 23, 2015, 12:48:54 AM8/23/15
to Google Visualization API
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>
Reply all
Reply to author
Forward
0 new messages