Skip to content
Snippets Groups Projects
Commit f87a8c59 authored by Sanjeevani Avasthi's avatar Sanjeevani Avasthi
Browse files

Deleted frontend/static/Sports.css, frontend/static/Sports.js, frontend/static/index.html files

parent 25da1b87
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
frontend/static/Sports.css deleted 100644 → 0
+ 0
− 56
View file @ 25da1b87
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
.header{
text-align: center ;
display: block;
font-family: sans-serif;
margin-bottom: 20px;
margin-top :20px;
font-size: large;
}
#mychart{
width: 1000px !important;
height: 500px !important;
justify-content: center;
}
#mychart1{
width: 800px !important;;
height: 500px !important;
}
#mychart2{
width: 800px !important;;
height: 500px !important;
}
canvas{
margin: 0 auto;
justify-content: center;
}
#cityfilter
{
margin-top: 20px;
margin-bottom: 20px;
text-align:center;
}
#networkcityfilter
{
margin-top: 20px;
margin-bottom: 20px;
text-align:center;
}
#mynetwork
{
margin-left: 200px;
margin-right:100px;
width: 1000px !important;
height: 500px !important;
justify-content: center;
display: inline-block;
}
h1{
text-align:center;
font-family: sans-serif;
}
\ No newline at end of file
frontend/static/Sports.js deleted 100644 → 0
+ 0
− 370
View file @ 25da1b87
var sports = [];
var counts = [];
var sports_by_city = [];
var counts_by_city = [];
var response_value = function(){
$.ajax({
async: false,
url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=1',
type: 'get',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa('admin:admin'),
},
xhrFields: {
withCredentials: true
},
success: function(data) {
temp = data;
console.log(data);
},
error: function() {
alert('Error occurs!');
},
reduce: false
});
console.log(temp);
return temp;
}();
data_rows = response_value["rows"];
for (row in data_rows) {
sports.push(data_rows[row]["key"][0]);
counts.push(data_rows[row]["value"]);
};
var city;
function setByCity(){
city = document.getElementById('city').value;
console.log(city);
var response_by_city = function(){
$.ajax({
async: false,
crossDomain: true,
url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=2',
type: 'get',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa('admin:admin'),
// 'Access-Control-Allow-Origin': 'localhost',
// 'Access-Control-Allow-Credentials' : true,
},
xhrFields: {
withCredentials: true
},
success: function(data) {
temp = data;
console.log(data);
},
error: function() {
alert('Error occurs!');
},
reduce: false
});
console.log(temp);
return temp;
}();
console.log("RESPONSE:"+response_by_city);
for(var i =0;i<sports_by_city.length;i++)
{
removeData(myChart1);
}
sports_by_city =[]
counts_by_city = []
data_rows = response_by_city["rows"];
for (row in data_rows) {
if(data_rows[row]["key"][1] == city)
{
console.log(data_rows[row]["key"][1]);
sports_by_city.push(data_rows[row]["key"][0]);
counts_by_city.push(data_rows[row]["value"]);
addData(myChart1,data_rows[row]["key"][0],data_rows[row]["value"]);
}
}
myChart1.update();
}
var sport;
var city_by_sport = [];
var counts_by_sport = [];
function sendSport(){
sport = document.getElementById('sport').value;
console.log(sport);
var response_by_city = function(){
$.ajax({
async: false,
crossDomain: true,
url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=2',
type: 'get',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa('admin:admin'),
// 'Access-Control-Allow-Origin': 'localhost',
// 'Access-Control-Allow-Credentials' : true,
},
xhrFields: {
withCredentials: true
},
success: function(data) {
temp = data;
console.log(data);
},
error: function() {
alert('Error occurs!');
},
reduce: false
});
console.log(temp);
return temp;
}();
console.log("RESPONSE:"+response_by_city);
for(var i =0;i<city_by_sport.length;i++)
{
removeData(myChart2);
}
city_by_sport =[]
counts_by_city = []
data_rows = response_by_city["rows"];
for (row in data_rows) {
console.log(sport);
console.log(data_rows[row]["key"][0]);
if(data_rows[row]["key"][0] == sport)
{
city_by_sport.push(data_rows[row]["key"][1]);
counts_by_city.push(data_rows[row]["value"]);
addData(myChart2,data_rows[row]["key"][1],data_rows[row]["value"]);
}
}
myChart2.update();
}
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var ids =[];
var nodesexist =[];
function networkGraph()
{
city = document.getElementById('citynetwork').value;
sport = document.getElementById('sportnetwork').value;
var response_network = function(){
$.ajax({
async: false,
crossDomain: true,
url: 'http://172.26.131.9/couchdb/live_demo/_design/replies/_view/replies?group=true',
type: 'get',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa('admin:admin'),
// 'Access-Control-Allow-Origin': '*',
// 'Access-Control-Allow-Credentials' : true,
},
xhrFields: {
withCredentials: true
},
success: function(data) {
temp = data;
console.log(data);
},
error: function() {
alert('Error occurs!');
},
reduce: false
});
console.log(temp);
return temp;
}();
data_rows = response_network["rows"];
var i=1;
ids =[];
nodesexist = [];
nodes = new vis.DataSet();
edges = new vis.DataSet();
for (row in data_rows) {
if(data_rows[row]["key"][0] == city && data_rows[row]["key"][1] == sport )
{
if(!(data_rows[row]["key"][2] in nodesexist))
{
nodes.add({id: i,label:data_rows[row]["key"][2]});
nodesexist.push(data_rows[row]["key"][2]);
ids.push(i);
var id1=i;
i++;
}
else
{
id1 = nodesexist.indexOf(data_rows[row]["key"][2])
}
if(!(data_rows[row]["key"][3] in nodesexist))
{
nodes.add({id: i,label:data_rows[row]["key"][3]});
nodesexist.push(data_rows[row]["key"][3]);
ids.push(i);
var id2=i;
i++;
}
else
{
id2 = nodesexist.indexOf(data_rows[row]["key"][3])
}
edges.add({from:id1,to:id2});
}
};
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);
}
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: sports,
datasets: [{
label: '# of Tweets',
data: counts,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
},
// yAxes: [{
// ticks: {
// fontSize: 40
// }
// }]
}
}
});
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: sports_by_city ,
datasets: [{
label: '# of Tweets',
data: counts_by_city,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
},
// yAxes: [{
// ticks: {
// fontSize: 40
// }
// }]
}
}
});
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart2 = new Chart(ctx, {
type: 'bar',
data: {
labels: city_by_sport,
datasets: [{
label: '# of Interactions',
data: counts_by_sport,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
frontend/static/index.html deleted 100644 → 0
+ 0
− 87
View file @ 25da1b87
<html>
<head>
<link rel="stylesheet" href="Sports.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<title> Sport Popularity Analytic Tool</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<body>
<h1>Sport Popularity Analytic Tool</h1>
<label class="header">Bar graph showing the popularity of the sports in Australia</label>
<canvas id="myChart" ></canvas>
<label class="header">Bar graph showing the popularity of the sport in a specific city</label>
<div id="cityfilter">
<label for="city" >Choose a city:</label>
<select id="city" onchange="setByCity()" >
<option selected disabled>Choose one</option>
<option value="Adelaide">Adelaide</option>
<option value="Brisbane">Brisbane</option>
<option value="Canberra">Canberra</option>
<option value="Hobart">Hobart</option>
<option value="Melbourne">Melbourne</option>
<option value="Perth">Perth</option>
<option value="Sydney">Sydney</option>
</select>
</div>
<canvas id="myChart1" ></canvas>
<!-- Display Graph for that date -->
<!-- <h3>User's Friends Count Specific to Sports they tweet about </h3> -->
<!-- Display Graph for friend count and how old the user is -->
<!-- <canvas id="myChart2" width="200px" height="200px" justify ="right"></canvas> -->
<label class="header">Bar graph showing the city where the sport is most popular</label>
<div id="cityfilter">
<label for="sport" >Choose a sport:</label>
<select id="sport" onchange="sendSport()" >
<option selected disabled>Choose one</option>
<option value="basketball">Basketball</option>
<option value="cricket">Cricket</option>
<option value="Footie">Footie</option>
<option value="netball">Netball</option>
<option value="Rugby">Rugby</option>
<option value="soccer">Soccer</option>
<option value="swimming">Swimming</option>
<option value="Tennis">Tennis</option>
</select>
</div>
<canvas id="myChart2"></canvas>
<label class="header">Network Of Tweets based on retweets </label>
<div id="networkcityfilter">
<label for="citynetwork" >Choose a city:</label>
<select id="citynetwork">
<option selected disabled>Choose one</option>
<option value="Adelaide">Adelaide</option>
<option value="Brisbane">Brisbane</option>
<option value="Canberra">Canberra</option>
<option value="Hobart">Hobart</option>
<option value="Melbourne">Melbourne</option>
<option value="Perth">Perth</option>
<option value="Queensland">Queensland</option>
<option value="Sydney">Sydney</option>
</select>
<label for="sportNetwork" >Choose a sport:</label>
<select id="sportnetwork">
<option selected disabled>Choose one</option>
<option value="basketball">Basketball</option>
<option value="cricket">Cricket</option>
<option value="Footie">Footie</option>
<option value="netball">Netball</option>
<option value="Rugby">Rugby</option>
<option value="soccer">soccer</option>
<option value="swimming">swimming</option>
<option value="Tennis">Tennis</option>
</select>
<button onclick="networkGraph()">Search</button>
</div>
<div id="mynetwork"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src = "Sports.js"> </script>
<script type="text/javascript">
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment