6.1 App Screen 3 (UI + Backend integration)
We have used google charts library to create graphs for the third and most interesting screen of our web app.
Function of App screen 3:
To perform graphical analysis and give suggestions to improve result of a student whose id is entered.
Sections where I used Hasura APIs:
Hasura Data API To retrieve the result of students from Result table of database. Calculations are done on the retrieved result and data is rendered pictorially on graphs.
Additional library used:
Google charts
Web app Screens
Home Screen
Enter Credential page
Marks Display page
Graphical Analysis and Suggestions (Third major screen of my webapp)
Backend Integration
I have used AJAX -XMLHttpRequest to fetch marks from result table, then used successive calls of these functions to get data for my charts.
To fetch candidate result:
var userphysics=0;
var userchemistry=0;
var usermathematics=0;
var userbiology=0;
var userenglish=0;
var usercomputerscience=0;function pulluser(){
var request= new XMLHttpRequest();
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE && request.status===200){
console.log(this.responseText);
var response=JSON.parse(this.responseText);
userphysics=Number(response[0].physics);
userchemistry=Number(response[0].chemistry);
usermathematics=Number(response[0].mathematics);
userbiology=Number(response[0].biology);
userenglish=Number(response[0].english);
usercomputerscience=Number(response[0].computer_science);
pullphysics();
}
else{
}
} request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.send(JSON.stringify({ type:"select", args:{ table:"Result", columns:[ "*" ] , where:{"id":id}}}));
};
To fetch subject wise result of all student: similar calls are made to fetch marks for each subjects.
var physicsavg=0;
var physicsmax=0;function pullphysics(){
var request= new XMLHttpRequest();
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE && request.status===200){
console.log(this.responseText);
var response=JSON.parse(this.responseText);
var avg=0;
var max=0
for(i=0;i<response.length;i++){
avg+=Number(response[i].physics);
if(max<response[i].physics)
max=response[i].physics;
} physicsavg = avg/response.length;
console.log(avg/response.length);
console.log(max);
physicsmax = max; pullchemistry();
}
else{
}
} request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.send(JSON.stringify({ type:"select", args:{ table:"Result", columns:[ "physics"]}}));
};
To generate Suggestion to improve performance:
function suggestions() {
var arr = [1, 1, 1, 1, 1, 1];
var bad = 0;
if (userphysics < physicsavg){
arr[0] = 0;
bad++;
}
if (userchemistry < chemistryavg){
arr[1] = 0;
bad++;
}
if (usermathematics < mathematicsavg){
arr[2] = 0;
bad++;
}
if (userbiology < biologyavg){
arr[3] = 0;
bad++;
}
if (userenglish < englishavg){
arr[4] = 0;
bad++;
}
if (usercomputerscience < computerscienceavg){
arr[5] = 0;
bad++;
}
if(bad > 0){
var sugg = 'Needs to pay more attention in ';
}
else{
var sugg = 'Well done, marks in all subjects are above average!'
}
var count = 0;
for (var i=0; i<5; i++){
if(arr[i] == 0){
count++;
if(i == 0) { sugg += 'Physics'; }
else if(i == 1){ sugg += 'Chemistry'; }
else if(i == 2){ sugg += 'Mathematics'; }
else if(i == 3){ sugg += 'Biology'; }
else if(i == 4){ sugg += 'English'; }
else { sugg += 'Computer Science'; }
if (bad-count > 1){
sugg += ', ';
}
else if(bad-count == 1){
sugg += ' and ';
}
else{
sugg += ".";
}
}
}
console.log('suggestion: '+sugg);
console.log('bad'+bad);
console.log(arr);
$('#suggestions').html('Suggestions: '+sugg);
}Next: 7.1) User feedback and Testing
Links to my webapp:
