Forked from - New snippet 523

xxxxxxxxxx
 
<div class="container mt-5">
  <h1>Beaufort County COVID-19 Stats</h1>
  <p class="lead">***Data updated daily from South Carolina DHEC news releases (last updated 7/29/20 2:49 p.m.)</p>
  <p>Daily case totals do not reflect adjustments made retroactively by DHEC. Sometimes ZIP code totals from DHEC do not match Beaufort Co. daily totals because of inconsistencies in how labs report addresses</p>
  <div class="row">
    <div class="col-lg">
      <canvas id="lineChart"></canvas>
    </div>
    <div class="col-lg">
      <canvas id="lineChart2"></canvas>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="table-responsive table-wrapper-scroll-y my-custom-scrollbar">
        <table id="example" class="table display mb-0">
          <thead>
            <tr>
              <th>Date</th>
              <th>Beaufort County</th>
              <th>Daily Increase</th>
              <th>Total Deaths</th>
              <th>South Carolina</th>
              <th>Daily Increase</th>
              <th>Total Deaths</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

xxxxxxxxxx
 
td:first-child {
  font-size: .9rem;
  font-weight: 400;
}
.my-custom-scrollbar {
  position: relative;
  height: 100vh;
  overflow: auto;
}
.table-wrapper-scroll-y {
  display: block;
}
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate, .dataTables_info {
  padding-bottom: 0;
}

xxxxxxxxxx
 
var date = [];  
var total = [];
var daily = [];
​
//line
var ctxL1 = document.getElementById("lineChart").getContext('2d');
var firstChart = new Chart(ctxL1, {
type: 'line',
data: {
labels: date,
datasets: [{
label: "Total Cases",
data: total,
backgroundColor: [
'rgba(105, 0, 132, .2)',
],
borderColor: [
'rgba(200, 99, 132, .7)',
],
borderWidth: 2
} 
]
},
options: {
responsive: true
}
});
​
//line
var ctxL = document.getElementById("lineChart2").getContext('2d');
var secondChart = new Chart(ctxL, {
type: 'line',
data: {
labels: date,
datasets: [{
label: "Daily Cases",
data: daily,
backgroundColor: [
'rgba(0, 137, 132, .2)',
],
borderColor: [
'rgba(0, 10, 130, .7)',
],
borderWidth: 2
}
]
},
options: {
responsive: true
}
});
 
$.get( "https://sheets.googleapis.com/v4/spreadsheets/1vR-M5WAZkPnX5NUNXZTOIbqchwaehvI8LC31HOo_JhQ/values/a2:a245?key=AIzaSyAFQT0sbEeC-IQAhv8Pn4XoMsfCPiBn92E", function( data ) {
  var jsonString = JSON.stringify( data.values )
  var obj = JSON.parse(jsonString); 
  for(var i in obj) 
  date.push(obj[i]); 
  date.reverse();
  //alert( date );
  
  firstChart.update();
  secondChart.update();
});
​
   
$.get( "https://sheets.googleapis.com/v4/spreadsheets/1vR-M5WAZkPnX5NUNXZTOIbqchwaehvI8LC31HOo_JhQ/values/b2:b245?key=AIzaSyAFQT0sbEeC-IQAhv8Pn4XoMsfCPiBn92E", function( data ) {
  var jsonString = JSON.stringify( data.values )
  var obj = JSON.parse(jsonString); 
  for(var i in obj) 
  total.push(obj[i]); 
  total.reverse();
  
  firstChart.update();
  //alert( total );
});
​
  
$.get( "https://sheets.googleapis.com/v4/spreadsheets/1vR-M5WAZkPnX5NUNXZTOIbqchwaehvI8LC31HOo_JhQ/values/c2:c245?key=AIzaSyAFQT0sbEeC-IQAhv8Pn4XoMsfCPiBn92E", function( data ) {
  var jsonString = JSON.stringify( data.values )
  var obj = JSON.parse(jsonString); 
  for(var i in obj) 
  daily.push(obj[i]); 
  daily.reverse();
  
  secondChart.update();
  //alert( cases );
});
​
$(document).ready(function() {
$('#example').dataTable( {
  "scrollY": "90vh",
"scrollCollapse": true,
"order": [[ 0, "desc" ]],
"paging": false,
"searching": false,
"bServerSide":false,
"bProcessing":true,
"sAjaxDataProp": "feed.entry",
"sAjaxSource": "https://spreadsheets.google.com/feeds/list/1vR-M5WAZkPnX5NUNXZTOIbqchwaehvI8LC31HOo_JhQ/1/public/values?alt=json",
"aoColumns": [
{ "mDataProp": "gsx$date.$t" },
{ "mDataProp": "gsx$beaufortco.$t" },
{ "mDataProp": "gsx$dailyincrease.$t" },
{ "mDataProp": "gsx$totaldeaths.$t" },
{ "mDataProp": "gsx$southcarolina.$t" },
{ "mDataProp": "gsx$dailyincrease_2.$t" },
{ "mDataProp": "gsx$totaldeaths_2.$t" },
]
} );
} );
​
​
​

Console errors: 0