I am using parse and Google charts with Javascript in order to graph some data. What I want is for the user to select some options from a dropdown field, which then create the charts based on their selection. However, the chart does not appear at all upon pressing submit. Note that I am using angularJS to show/hide the potential for the chart upon login. However, the chart is created outside of the AngularJS portion.
Relevant HTML:
<body ng-app="AuthApp">
<div ng-hide="currentUser">
<form>
<h2>Sign Up or Log In</h2>
Username: <input type="text" ng-model="user.username" /><br />
Password: <input type="password" ng-model="user.password" /><br />
<button ng-click="signUp(user)">Sign up</button>
<button ng-click="logIn(user)">Log in</button>
</form>
</div>
<div ng-show="currentUser" >
<h1>Welcome {{currentUser.get('username')}}</h1>
<h2> Charts </h2>
<button ng-click="logOut(user)">Log out</button>
<form id="activity_form">
<p> Before:
<select id="a_sel">
<option value="all">All</option>
<option value="eating">Eating</option>
<option value="exercise">Exercise</option>
<option value="sleep">Sleep</option>
<option value="low movement">Low Movement</option>
</select>
After:
<select id="b_sel">
<option value="all">All</option>
<option value="eating">Eating</option>
<option value="exercise">Exercise</option>
<option value="sleep">Sleep</option>
<option value="low movement">Low Movement</option>
</select>
<button type="submit" onclick="chartData()">Submit</button>
</p>
</form>
<div ng-show="currentUser" id='chart_div' style='width: 700px; height: 240px;'></div>
</div>
</body>
Relevant Javascript:
//Chart the data
function chartData(){
google.load('visualization', '1', {'packages':['annotatedtimeline']});
}
google.setOnLoadCallback(drawChart);
//Identify user before/after filter selection
function drawChart() {
//Variables for chart drawing
var lowerLimit = 70;
var upperLimit = 100;
//Global calculation variables
var totReadings = 0;
var belowLimit = 0;
var aboveLimit = 0;
//Identify the user
var userString = Parse.User.current().getUsername().toString();
//Retrieve data from parse
var Readings = Parse.Object.extend("Readings");
var query = new Parse.Query(Readings);
//set constraints on the query.
query.equalTo('username', userString);
//Add these depending on user input
var b = document.getElementById("b_sel");
var beforeAct = b.options[b.selectedIndex].value;
var a = document.getElementById("a_sel");
var afterAct = a.options[a.selectedIndex].value;
if(beforeAct != "all")
query.equalTo('before', beforeAct);
if(afterAct != "all")
query.equalTo('after', afterAct);
query.ascending("createdAt");
//Prepare the data columns
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Reading (mg/dl)');
data.addColumn('number', 'Lower Limit');
data.addColumn('number', 'Upper Limit');
//Run the query and graph the data
query.find({
//Success callback
success: function(results) {
for (var result of results){
var createdAt = result.createdAt;
var reading = result.get("reading");
//Parse the date string that is being returned
var d = new Date(createdAt.toString());
//Sum the reading
totReadings += reading;
//Note if the reading is beyond a limit
if (reading > upperLimit)
aboveLimit++;
else if (reading < lowerLimit)
belowLimit++;
//Add the row
data.addRow([new Date(d.getFullYear(), (d.getMonth() + 1) ,d.getDate(), d.getHours(), d.getMinutes()), reading, lowerLimit, upperLimit]);
}
//Calculate the mean of the readings
var meanReadings = totReadings/results.length;
alert("Average Reading: " + meanReadings);
alert("% Readings above upper limit: " + aboveLimit/results.length*100 + "%");
alert("% Readings below limit: " + belowLimit/results.length*100 + "%");
//Create the chart
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
// Draw the chart
chart.draw(data, {
displayAnnotations: true,
dateFormat: 'HH:mm MMMM dd, yyyy',
displayExactValues: true
});
},
//Error Callback
error: function(error) {
alert("Error: " + Parse.Error);
}
});
}
Try removing this line
google.setOnLoadCallback(drawChart);
That line is asking drawChart to be called once Google charts is ready.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.