Bootstrap "Dashboard" Showing Change Control Ticket Status from a SharePoint List (using CSOM)

dashboard.js

<script language="javascript" type="text/javascript" src="/sites/MySPSite/SiteAssets/jquery-2.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/MySPSite/SiteAssets/jquery.SPServices.min.js"></script>

<script type="text/javascript">

SP.SOD.executeFunc('sp.js','SP.ClientContext',runthiscode);

function getFormattedDate(date) {
  var year = date.getFullYear();

  var month = (1 + date.getMonth()).toString();
  month = month.length > 1 ? month : '0' + month;

  var day = date.getDate().toString();
  day = day.length > 1 ? day : '0' + day;
  
  return month + '/' + day + '/' + year + ' 00:00 AM';
}

function runthiscode() {

var changeTypes = ["Emergency Change", "High Risk Change", "Medium Risk Change", "Low Risk Change"];
//var camlQuery = '<View><Query><Where><Neq><FieldRef Name=\'Approval_x0020_Status\'/><Value Type=\'String\'>Closed</Value></Neq></Where></Query><RowLimit>10</RowLimit></View>';
var promise = $().SPServices.SPGetListItemsJson({
   listName: "Changes",
   //CAMLQuery: camlQuery
});

$.when(promise).done(function() {
    var date = new Date();
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
    var firstDayFormatted = getFormattedDate(firstDay);
    var lastDay = new Date(date.getFullYear(), date.getMonth()+1, 0);
    var lastDayFormatted = getFormattedDate(lastDay);
    
    //var baseViewURL = 'https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/AllItems.aspx#InplviewHash962629b2-5e19-407f-b888-2b2997367273=';
    var baseViewURL = 'https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/AllItems.aspx?';
    
    var emergencyOpen = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'Emergency Change' && item.Approval_x0020_Status != 'Closed' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    var emergencyTotal = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'Emergency Change' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    document.getElementById('EmergencyOpen').innerHTML="<a href='https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/Emergency.aspx'>" + emergencyOpen.length + "</a>";
    document.getElementById('EmergencyTotal').innerHTML="<a href='" + baseViewURL + "FilterField1=Change_x0020_Type_x003a_Title&FilterValue1=Emergency%20Change&FilterField2=Start_x0020_Time&FilterValue2=" + firstDayFormatted + "&FilterOp2=Geq&FilterField3=StartTimeCalc&FilterValue3=" + lastDayFormatted + "&FilterOp3=Leq'>" + emergencyTotal.length + "</a>";
    
    var highOpen = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'High Risk Change' && item.Approval_x0020_Status != 'Closed' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    var highTotal = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'High Risk Change' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    document.getElementById('HighOpen').innerHTML="<a href='https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/High.aspx'>" + highOpen.length + "</a>";
    document.getElementById('HighTotal').innerHTML="<a href='" + baseViewURL + "FilterField1=Change_x0020_Type_x003a_Title&FilterValue1=High%20Risk%20Change&FilterField2=Start_x0020_Time&FilterValue2=" + firstDayFormatted + "&FilterOp2=Geq&FilterField3=StartTimeCalc&FilterValue3=" + lastDayFormatted + "&FilterOp3=Leq'>" + highTotal.length + "</a>";

    var mediumOpen = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'Medium Risk Change' && item.Approval_x0020_Status != 'Closed' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    var mediumTotal = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'Medium Risk Change' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    document.getElementById('MediumOpen').innerHTML="<a href='https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/Medium.aspx'>" + mediumOpen.length + "</a>";
    document.getElementById('MediumTotal').innerHTML="<a href='" + baseViewURL + "FilterField1=Change_x0020_Type_x003a_Title&FilterValue1=Medium%20Risk%20Change&FilterField2=Start_x0020_Time&FilterValue2=" + firstDayFormatted + "&FilterOp2=Geq&FilterField3=StartTimeCalc&FilterValue3=" + lastDayFormatted + "&FilterOp3=Leq'>" + mediumTotal.length + "</a>";

    var lowOpen = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'Low Risk Change' && item.Approval_x0020_Status != 'Closed' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    var lowTotal = this.data.filter(function(item) {
       return item.Change_x0020_Type_x003a_Title.lookupValue == 'Low Risk Change' && item.Start_x0020_Time >= firstDay && item.End_x0020_Time <= lastDay
    });
    document.getElementById('LowOpen').innerHTML="<a href='https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/Low.aspx'>" + lowOpen.length + "</a>";
    document.getElementById('LowTotal').innerHTML="<a href='" + baseViewURL + "FilterField1=Change_x0020_Type_x003a_Title&FilterValue1=Low%20Risk%20Change&FilterField2=Start_x0020_Time&FilterValue2=" + firstDayFormatted + "&FilterOp2=Geq&FilterField3=StartTimeCalc&FilterValue3=" + lastDayFormatted + "&FilterOp3=Leq'>" + lowTotal.length + "</a>";
});

}

</script>

dashboardView.html

<!-- HTML CODE -->
<!DOCTYPE html>
<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="/sites/MySPSite/SiteAssets/sharepoint-style.css">
<style>
  .changeValue {
    font-size: 25px;
  }
* {
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing:content-box;
}
</style>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">5RFJZDNAZ666-6-17</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">52bbc32c-4ff8-41bd-b520-2bf495739a39</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">https://mysphost.mydomain.com/sites/MySPSite/_layouts/15/DocIdRedir.aspx?ID=5RFJZDNAZ666-6-17, 5RFJZDNAZ666-6-17</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<span>To see all changes, click here: <a href="https://mysphost.mydomain.com/sites/MySPSite/Lists/Changes/All%20Open%20Items.aspx">https://mysphost.com/sites/MySPSite/Lists/Changes/All%20Open%20Items.aspx</a></span><br /><br />
<span>The items below show All OPEN changes / TOTAL changes for the current month (which includes Closed items)</span><br /><br />
<div class="container" style="float: left;">
    <div class="row">
        <div class="col-sm-2">
            <div class="panel panel-danger">
                 <div class="panel-heading text-center">Emergency</div>
                 <div class="panel-body text-center changeValue"><span id="EmergencyOpen"></span> / <span id="EmergencyTotal"></span><br /></div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-danger">
                 <div class="panel-heading text-center">High Risk</div>
                 <div class="panel-body text-center changeValue"><span id="HighOpen"></span> / <span id="HighTotal"></span><br /></div>
            </div>
        </div>
        <div class="col-sm-2">
             <div class="panel panel-warning">
                 <div class="panel-heading text-center">Medium Risk</div>
                 <div class="panel-body text-center changeValue"><span id="MediumOpen"></span> / <span id="MediumTotal"></span><br /></div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="panel panel-success">
                 <div class="panel-heading text-center">Low Risk</div>
                 <div class="panel-body text-center changeValue"><span id="LowOpen"></span> / <span id="LowTotal"></span><br /></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>