<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">Sports Engagement by City</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>
<label class="header">English Proficiency and Tweets</label>
<div id="center"><img src="aurin.png"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src = "Sports.js"> </script>
<script type="text/javascript">
</script>
</body>
</html>