Update statisticalPage.html

This commit is contained in:
Pei-Yun Sun 2020-10-20 13:02:57 +11:00
parent 7807470c57
commit f4a97c8987

View File

@ -27,33 +27,24 @@
<br/> <br/>
<h1>Gender: </h1> <h1>Gender: </h1>
<div style="overflow-x: auto"> <div style="overflow-x: auto">
<div style="width: 1300px; margin: 5px auto; overflow-x: auto"> <div style="width: 800px; margin: 5px auto; overflow-x: auto">
<canvas id="numberOfGenderPredictionChart" width="9" height="5"></canvas> <canvas id="numberOfGenderPredictionChart" width="8" height="5"></canvas>
</div> </div>
</div> </div>
<br/> <br/>
<div style="overflow-x: auto"> <div style="overflow-x: auto">
<div style="width: 1300px; margin: 5px auto; overflow-x: auto"> <div style="width: 800px; margin: 5px auto; overflow-x: auto">
<canvas id="numberOfGenderFeedbackChart" width="9" height="5"></canvas> <canvas id="numberOfGenderFeedbackChart" width="8" height="5"></canvas>
</div> </div>
</div> </div>
<br/> <br/>
<h1>Emotion: </h1> <h1>Emotion: </h1>
<div style="width: 800px; margin: 5px auto;"> <div style="width: 800px; margin: 5px auto">
<canvas id="numberOfEmotionPredictionChart" width="9" height="5"></canvas> <canvas id="numberOfEmotionPredictionChart" width="8" height="5"></canvas>
</div> </div>
<!-- <br/>
<div class="row">
<div class="col-lg-6 col-sm-12" style="width: 800px; margin: 5px auto;">
<canvas id="catEmotionFeedbackChart" width="9" height="5"></canvas>
</div>
<div class="col-lg-6 col-sm-12" style="width: 800px; margin: 5px auto;">
<canvas id="dogEmotionFeedbackChart" width="9" height="5"></canvas>
</div>
</div> -->
<br/> <br/>
<div style="width: 800px; margin: 5px auto;"> <div style="width: 800px; margin: 5px auto">
<canvas id="numberOfEmotionFeedbackChart" width="9" height="5"></canvas> <canvas id="numberOfEmotionFeedbackChart" width="8" height="5"></canvas>
</div> </div>
</div> </div>
@ -213,7 +204,7 @@
{#total prediction number#} {#total prediction number#}
let ctxForTotalPredictionNumber = document.getElementById('numberOfTotalPrediction').getContext('2d'); let ctxForTotalPredictionNumber = document.getElementById('numberOfTotalPrediction').getContext('2d');
let totalPredictionNumberData = { let totalPredictionNumberData = {
"Total": response['totalNumberOfPrediction'], "Total": response['totalNumberOfPrediction']
} }
let totalPredictionCount = response['totalNumberOfPrediction'] let totalPredictionCount = response['totalNumberOfPrediction']
@ -223,7 +214,7 @@
{#total feedback number#} {#total feedback number#}
let ctxForTotalFeedbackNumber = document.getElementById('numberOfTotalFeedback').getContext('2d'); let ctxForTotalFeedbackNumber = document.getElementById('numberOfTotalFeedback').getContext('2d');
let totalFeedbackNumberData = { let totalFeedbackNumberData = {
"Total": response['totalNumberOfFeedback'], "Total": response['totalNumberOfFeedback']
} }
let totalFeedbackCount = response['totalNumberOfFeedback'] let totalFeedbackCount = response['totalNumberOfFeedback']
@ -234,7 +225,7 @@
drawLine(ctxForNumberOfPhotoByDate, response['numberOfPhotoByDate'], 'Number of Photos within a week') drawLine(ctxForNumberOfPhotoByDate, response['numberOfPhotoByDate'], 'Number of Photos within a week')
{#age prediction#} {#age prediction#}
let ctxForAgePredictionNumber = document.getElementById('numberOfAgedPredictionChart').getContext('2d'); let ctxForAgePredictionNumber = document.getElementById('numberOfAgePredictionChart').getContext('2d');
drawVerticalBar(ctxForAgePredictionNumber, response['totalNumberOfAgePrediction'], "Age prediction") drawVerticalBar(ctxForAgePredictionNumber, response['totalNumberOfAgePrediction'], "Age prediction")
{#age feedback#} {#age feedback#}
@ -243,23 +234,30 @@
{#gender prediction#} {#gender prediction#}
let ctxForGenderPredictionNumber = document.getElementById('numberOfGenderPredictionChart').getContext('2d'); let ctxForGenderPredictionNumber = document.getElementById('numberOfGenderPredictionChart').getContext('2d');
drawVerticalBar(ctxForGenderPredictionNumber, response['totalNumberOfGenderPrediction'], "Gender prediction") // drawVerticalBar(ctxForGenderPredictionNumber, response['totalNumberOfGenderPrediction'], "Gender prediction")
let genderPredictionNumberData = {
"Man": response['totalNumberOfGenderPrediction']['Man'],
"Woman": response['totalNumberOfGenderPrediction']['Woman']
}
drawDoughunt(ctxForGenderPredictionNumber, genderPredictionNumberData, `Gender prediction`)
{#gender feedback#} {#gender feedback#}
let ctxForGenderFeedback = document.getElementById('numberOfGenderFeedbackChart').getContext('2d'); let ctxForGenderFeedback = document.getElementById('numberOfGenderFeedbackChart').getContext('2d');
drawVerticalStackBar(ctxForGenderFeedback, response['totalNumberOfGenderCorrectFeedback'], response['totalNumberOfGenderWrongFeedback'], "Gender feedback", ['Correct', 'Wrong']) drawVerticalStackBar(ctxForGenderFeedback, response['totalNumberOfGenderCorrectFeedback'], response['totalNumberOfGenderWrongFeedback'], "Gender feedback", ['Correct', 'Wrong'])
// let genderFeedbackNumberData = {
// "Correct": response['totalNumberOfGenderCorrectFeedback'],
// "Wrong": response['totalNumberOfGenderWrongFeedback']
// }
// drawDoughunt(ctxForGenderPredictionNumber, genderPredictionNumberData, `Gender prediction`)
{#emotion prediction#} {#emotion prediction#}
let ctxForEmotionPredictionNumber = document.getElementById('numberOfEmotionPredictionChart').getContext('2d'); let ctxForEmotionPredictionNumber = document.getElementById('numberOfEmotionPredictionChart').getContext('2d');
// drawVerticalStackBar(ctxForEmotionPredictionNumber, response['totalNumberOfEmotionPrediction'], response['totalNumberOfEmotionPrediction'], "Emotion prediction", ['Cat', 'Dog']) drawVerticalBar(ctxForEmotionPredictionNumber, response['totalNumberOfEmotionPrediction'], "Emotion prediction")
// {#cat emotion feedback#} {#emotion feedback#}
// let ctxForCatEmotionFeedback = document.getElementById('catEmotionFeedbackChart').getContext('2d'); let ctxForEmotionFeedback = document.getElementById('numberOfEmotionFeedbackChart').getContext('2d');
// drawVerticalStackBar(ctxForCatEmotionFeedback, response['totalNumberOfCatEmotionCorrectFeedback'], response['totalNumberOfCatEmotionWrongFeedback'], "Emotion feedback for cat", ['Correct', 'Wrong']) drawVerticalStackBar(ctxForEmotionFeedback, response['totalNumberOfEmotionCorrectFeedback'], response['totalNumberOfEmotionWrongFeedback'], "Emotion feedback", ['Correct', 'Wrong'])
// {#dog emotion feedback#}
// let ctxForDogEmotionFeedback = document.getElementById('dogEmotionFeedbackChart').getContext('2d');
// drawVerticalStackBar(ctxForDogEmotionFeedback, response['totalNumberOfDogEmotionCorrectFeedback'], response['totalNumberOfDogEmotionWrongFeedback'], "Emotion feedback for dog", ['Correct', 'Wrong'])
}); });
} }