Skip to content

2
2020-101
Commit b8e7bef1 authored by SohanDanushka's avatar SohanDanushka
Browse files
Options

Committing front-end adding graphs 1

parent c8012419
Hide whitespace changes
Inline Side-by-side
Showing with 343 additions and 5 deletions
LecturerApp/templates/LecturerApp/CanvasJS-Multi-Series-Chart.html 0 → 100644
View file @ b8e7bef1
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Daily High Temperature at Different Beaches"
},
axisX: {
valueFormatString: "DD MMM,YY"
},
axisY: {
title: "Temperature (in °C)",
suffix: " °C"
},
legend:{
cursor: "pointer",
fontSize: 16,
itemclick: toggleDataSeries
},
toolTip:{
shared: true
},
data: [{
name: "Myrtle Beach",
type: "spline",
yValueFormatString: "#0.## °C",
showInLegend: true,
dataPoints: [
{ x: new Date(2017,6,24), y: 31 },
{ x: new Date(2017,6,25), y: 31 },
{ x: new Date(2017,6,26), y: 29 },
{ x: new Date(2017,6,27), y: 29 },
{ x: new Date(2017,6,28), y: 31 },
{ x: new Date(2017,6,29), y: 30 },
{ x: new Date(2017,6,30), y: 29 }
]
},
{
name: "Martha Vineyard",
type: "spline",
yValueFormatString: "#0.## °C",
showInLegend: true,
dataPoints: [
{ x: new Date(2017,6,24), y: 20 },
{ x: new Date(2017,6,25), y: 20 },
{ x: new Date(2017,6,26), y: 25 },
{ x: new Date(2017,6,27), y: 25 },
{ x: new Date(2017,6,28), y: 25 },
{ x: new Date(2017,6,29), y: 25 },
{ x: new Date(2017,6,30), y: 25 }
]
},
{
name: "Nantucket",
type: "spline",
yValueFormatString: "#0.## °C",
showInLegend: true,
dataPoints: [
{ x: new Date(2017,6,24), y: 22 },
{ x: new Date(2017,6,25), y: 19 },
{ x: new Date(2017,6,26), y: 23 },
{ x: new Date(2017,6,27), y: 24 },
{ x: new Date(2017,6,28), y: 24 },
{ x: new Date(2017,6,29), y: 23 },
{ x: new Date(2017,6,30), y: 23 }
]
}]
});
chart.render();
function toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
\ No newline at end of file
LecturerApp/templates/LecturerApp/index.html
View file @ b8e7bef1
......@@ -80,7 +80,7 @@
}
//this is for the temporay button (delete later)
//this is for the temporary button (delete later)
$('#temp_btn').click(function () {
//using the fecth API
......@@ -114,7 +114,195 @@
$('#summary_btn').click(function () {
//open the modal
$('#audio_summary_modal').modal();
})
});
//this is for displaying the graphs
$('#audio_graph').click(function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
// text: "Daily High Temperature at Different Beaches"
},
axisX: {
valueFormatString: "DD, MMM,YYYY"
},
axisY: {
title: "Word count",
suffix: " #"
},
legend: {
cursor: "pointer",
fontSize: 16,
itemclick: toggleDataSeries
},
toolTip: {
shared: true
},
data: [{
name: " # of Required words to be spoken",
type: "spline",
yValueFormatString: "#0.## #",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: 7000},
{x: new Date(2017, 6, 25), y: 7000},
{x: new Date(2017, 6, 26), y: 7000},
{x: new Date(2017, 6, 27), y: 7000},
{x: new Date(2017, 6, 28), y: 7000},
{x: new Date(2017, 6, 29), y: 7000},
{x: new Date(2017, 6, 30), y: 7000}
]
},
{
name: "Total # of words spoken",
type: "spline",
yValueFormatString: "#0.## #",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: 7553},
{x: new Date(2017, 6, 25), y: 6430},
{x: new Date(2017, 6, 26), y: 5400},
{x: new Date(2017, 6, 27), y: 4650},
{x: new Date(2017, 6, 28), y: 8348},
{x: new Date(2017, 6, 29), y: 5555},
{x: new Date(2017, 6, 30), y: 6781}
]
},
{
name: "# of extraneous words",
type: "spline",
yValueFormatString: "#0.## #",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: 500},
{x: new Date(2017, 6, 25), y: 456},
{x: new Date(2017, 6, 26), y: 398},
{x: new Date(2017, 6, 27), y: 356},
{x: new Date(2017, 6, 28), y: 876},
{x: new Date(2017, 6, 29), y: 342},
{x: new Date(2017, 6, 30), y: 601}
]
},
{
name: "# of non-lexical words",
type: "spline",
yValueFormatString: "#0.## #",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: 50},
{x: new Date(2017, 6, 25), y: 30},
{x: new Date(2017, 6, 26), y: 46},
{x: new Date(2017, 6, 27), y: 32},
{x: new Date(2017, 6, 28), y: 67},
{x: new Date(2017, 6, 29), y: 23},
{x: new Date(2017, 6, 30), y: 54}
]
}]
});
chart.render();
//open the model
$('#audio_summary_graph').modal();
$('#num_of_words').text(response.num_of_words);
$('#lexical_count').text(response.lexical_count);
$('#non_lexical_count').text(response.non_lexical_count);
});
$('#video_graph').click(function () {
var chart = new CanvasJS.Chart("chartContainerVideo", {
animationEnabled: true,
title: {
// text: "Daily High Temperature at Different Beaches"
},
axisX: {
valueFormatString: "DD, MMM,YYYY"
},
axisY: {
title: "Posture count as a %",
suffix: " #"
},
legend: {
cursor: "pointer",
fontSize: 16,
itemclick: toggleDataSeries
},
toolTip: {
shared: true
},
data: [{
name: "Seated",
type: "spline",
yValueFormatString: "#0.## %",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: 20},
{x: new Date(2017, 6, 25), y: 25},
{x: new Date(2017, 6, 26), y: 33},
{x: new Date(2017, 6, 27), y: 12},
{x: new Date(2017, 6, 28), y: 5},
{x: new Date(2017, 6, 29), y: 10},
{x: new Date(2017, 6, 30), y: 27.5}
]
},
{
name: "Standing",
type: "spline",
yValueFormatString: "#0.## %",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: 25},
{x: new Date(2017, 6, 25), y: 25},
{x: new Date(2017, 6, 26), y: 21},
{x: new Date(2017, 6, 27), y: 32},
{x: new Date(2017, 6, 28), y: 15},
{x: new Date(2017, 6, 29), y: 17},
{x: new Date(2017, 6, 30), y: 33.5}
]
},
{
name: "Walking",
type: "spline",
yValueFormatString: "#0.## %",
showInLegend: true,
dataPoints: [
{x: new Date(2017, 6, 24), y: Math.round(Math.random() * 100, 0)},
{x: new Date(2017, 6, 25), y: 50},
{x: new Date(2017, 6, 26), y: 46},
{x: new Date(2017, 6, 27), y: 56},
{x: new Date(2017, 6, 28), y: 80},
{x: new Date(2017, 6, 29), y: 73},
{x: new Date(2017, 6, 30), y: 39}
]
}]
});
chart.render();
$('#video_summary_graph').modal();
});
//this function will toggle data
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
});
......@@ -210,11 +398,12 @@
<div class="row">
<!-- Area Chart -->
<div class="col-xl-5 col-lg-7">
<div class="card shadow mb-4">
<div class="col-xl-6 col-lg-7">
<div class="card shadow mb-4" style="overflow-y: scroll">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Audio List</h6>
<button type="button" class="btn btn-outline-primary" id="audio_graph">Statistics</button>
</div>
<!-- Card Body -->
......@@ -252,10 +441,11 @@
<!-- Video List -->
<div class="col-xl-6 col-lg-5">
<div class="card shadow mb-4">
<div class="card shadow mb-4" style="overflow-y: scroll">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Video List</h6>
<button type="button" class="btn btn-outline-primary" id="video_graph">Statistics</button>
</div>
<!-- Card Body -->
......@@ -459,6 +649,57 @@
</div>
</div>
<!-- Graph audio summary -->
<div class="modal fade" id="audio_summary_graph" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 900px; max-height: 750px" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Audio Summary Graph</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="chartContainer" style="height: 400px; max-width: 8000px; margin: 0px auto;"></div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
<!-- Graph Video Summary -->
<div class="modal fade" id="video_summary_graph" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 900px; max-height: 750px" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Video Summary Graph</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="chartContainerVideo" style="height: 400px; max-width: 8000px; margin: 0px auto;"></div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
{% load static %}
......@@ -475,6 +716,11 @@
<script src="{% static 'LecturerApp/js/demo/chart-area-demo.js' %}"></script>
<script src="{% static 'LecturerApp/js/demo/chart-pie-demo.js' %}"></script>
<!-- this script will import CanvasJS -->
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment