quakometer

git clone git://git.codymlewis.com/quakometer.git
Log | Files | Refs | LICENSE

index.html (4263B)


      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="utf-8">
      5         <title>Quakometer</title>
      6         <!-- Latest compiled and minified CSS -->
      7         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      8         <!-- jQuery library -->
      9         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     10         <!-- Popper JS -->
     11         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
     12         <!-- Latest compiled JavaScript -->
     13         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
     14         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
     15         <style>
     16             body {
     17                 background-image: url("http://www.4freetextures.com/images/Red-soil764.jpg");
     18                 background-position: top-right;
     19                 background-repeat: no-repeat;
     20                 height: 100%;
     21                 background-size: cover;
     22                 background-attachment: fixed;
     23                 padding-top: 1%;
     24             }
     25         </style>
     26     </head>
     27     <body>
     28         <div class="container bg-light">
     29             <h1 class="display-3">Quakometer</h1>
     30             <div class="container">
     31                 <canvas id="myChart"></canvas>
     32             </div>
     33             <script>
     34                 var ctx = document.getElementById("myChart").getContext('2d');
     35                 var myChart = new Chart(ctx, {
     36                     type: 'line',
     37                     data: {
     38                         datasets: [{
     39                             label: 'Earth Quakes',
     40                             backgroundColor: [
     41                                 'rgba(255, 99, 99, 0.2)'
     42                             ],
     43                             borderColor: [
     44                                 'rgba(255, 99, 99, 1)'
     45                             ],
     46                             borderWidth: 1
     47                         }]
     48                     },
     49                     options: {
     50                         scales: {
     51                             yAxes: [{
     52                                 scaleLabel: {
     53                                     display: true,
     54                                     labelString: "Magnitude"
     55                                 }
     56                             }],
     57                             xAxes: [{
     58                                 scaleLabel: {
     59                                     display: true,
     60                                     labelString: "Time"
     61                                 }
     62                             }]
     63                         }
     64                     }
     65                 });
     66                 function addData(label, data) {
     67                     myChart.data.labels.push(label);
     68                     myChart.data.datasets[0].data.push(data);
     69                     myChart.update();
     70                 }
     71             </script>
     72             <script>
     73                 var date = new Date();
     74                 var yesterday = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() - 1);
     75                 var today = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
     76                 $.getJSON('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterday + '&endtime=' + today, (data) => {
     77                     for(var i = data.features.length - 1; i >= 0; --i) {
     78                         var feature = data.features[i];
     79                         var time = new Date(feature.properties.time);
     80                         var quakeTime = time.getFullYear() + "-" +
     81                             (time.getMonth() < 9 ? "0" : "") + (time.getMonth() + 1) + "-" +
     82                             (time.getDate() < 10 ? "0" : "") + time.getDate() + " " +
     83                             (time.getHours() < 10 ? "0" : "") + time.getHours() + ":" +
     84                             (time.getMinutes() < 10 ? "0" : "") + time.getMinutes() + ":" +
     85                             (time.getSeconds() < 10 ? "0" : "") + time.getSeconds();
     86                         addData(quakeTime,
     87                             feature.properties.mag);
     88                     };
     89                 });
     90             </script>
     91         </div>
     92     </body>
     93 </html>