Untitled


<html>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="dailyweatherdata.js"></script>
    <script src="weatherforecast.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
      integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <link rel="stylesheet" href="humidity.css">
      <title>weather forecast</title>
    
    
      
    
    
    
    
    <body>
      
        <div class="nav_bar">
          
          
          <a href="home_page.html"> 
            <i class="fa-solid fa-house fa-4x"></i>
           </a>
          <a href="index.html">
            <button id="nav_buttons"  type="button">CV <br> </button>
          </a>
            <button id="nav_buttons" type="button">Stoke-On-Trent<br> humidity graph</button>
            <button id="nav_buttons" type="button">Stoke-On-Trent<br> temperature graph</button>
            <button id="nav_buttons" type="button">Stoke-On-Trent<br> wind Speed graph</button>
           <a href="all_Graphs.html"><button id="nav_buttons" type="button">Stoke-On-Trent<br> All graphs</button></a> 
         
      </div>
      
      
    
    
    <main>
      <section class="center">
        
          <div class="humidity_graph">
           <h4>Longitude: <label id="lon"></label></h4> 
            <h3>Stoke-On-Trent humidity graph</h3>
            <canvas id="humidity"></canvas>
           
              <select onchange="changeChartH(this)">
              <optgroup label="Select chart"></optgroup>
              <option value="Bar">Bar</option>
              <option value="line">line</option>
              <option value="Radar">Radar</option>
            
            </select>
          </div>
          
          
    
    
          
          
      </section>
      
     
    </main>  
    <footer>
      <p>Socail media links</p>
     <a href="https://www.facebook.com"><i class="fa-brands fa-square-facebook fa-4x"></i></a> 
     <a href="https://uk.linkedin.com"><i class="fa-brands fa-linkedin fa-4x"></i></a>
     <a href="https://twitter.com"><i class="fa-brands fa-twitter fa-4x"></i></a> 
     <a href="https://instagram.com"><i class="fa-brands fa-instagram fa-4x"></i></a>
    </footer>
    
    </body>
    
    
    
    
    
    
    
    
    <script>
      //TODO: Task 1:
      var daily = JSON.parse(dailydata_stoke);
      document.getElementById('lon').innerHTML = daily.coord.lon;
    
      //TODO: Task 2, 3 and 4
      var forecast = JSON.parse(forecast_stoke);
      this.dateList = forecast.list.map(list => {
        return list.dt_txt;
      });
    
    
    
      this.humidityList = forecast.list.map(list => {
        return list.main.humidity;
      });
    
     
    
      
      var ctx = document.getElementById('humidity').getContext('2d');
      this.Hchart = new Chart(ctx, {
        type: "line",
        data: {
          labels: this.dateList,
          datasets: [
            {
              label: "humidity",
              backgroundColor: "lightblue",
              borderColor: "blue",
              fill: true,
              data: this.humidityList
            }
          ]
        }
      })
      
      ctx.onchange = function(){
        Hchart.config.type = this.value;
        console.log(this.value);
        Hchart.update();
    }
    
    
    
    
    </script>
    
    </html>
Editor is loading...