Просмотр исходного кода

Fix up the style.
Add selector buttons for the data to display.

Lee Morgan 4 лет назад
Родитель
Сommit
a1be8ccfe8
2 измененных файлов с 353 добавлено и 266 удалено
  1. 42 0
      views/covid/covid.css
  2. 311 266
      views/covid/covid.html

+ 42 - 0
views/covid/covid.css

@@ -0,0 +1,42 @@
+*{margin:0;padding:0;}
+
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+}
+
+#title{
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+#centerTitle{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#searchButton{
+    width: 100px;
+    height: 35px;
+    margin-top: 10px;
+}
+
+#selectors{
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 10px;
+    right: 50px;
+    z-index: 10;
+}
+
+#chart{
+    flex-basis: 100px;
+    flex-grow: 10;
+    width: 90vw;
+    height: 75vh;
+}

+ 311 - 266
views/covid/covid.html

@@ -2,299 +2,341 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Covid-19</title>
         <link rel="stylesheet" href="/covid/style">
         <script src="https://cdn.plot.ly/plotly-2.4.2.min.js"></script>
     </head>
     <body>
-        <h1>Covid-19 Data</h1>
+        <div id="title">
+            <div id="centerTitle">
+                <h1>Covid-19 Data</h1>
 
-        <div>
-            <input id="from" type="date">
-            -
-            <input id="to" type="date">
-        </div>
+                <div>
+                    <input id="from" type="date">
+                    -
+                    <input id="to" type="date">
+                </div>
+
+                <select id="country">
+                    <option value="FSM">Micronesia</option>
+                    <option value="BIH">Bosnia and Herzegovina</option>
+                    <option value="OWID_OCE">Oceania</option>
+                    <option value="CHN">China</option>
+                    <option value="BHS">Bahamas</option>
+                    <option value="CYP">Cyprus</option>
+                    <option value="LIE">Liechtenstein</option>
+                    <option value="GUY">Guyana</option>
+                    <option value="MKD">North Macedonia</option>
+                    <option value="SHN">Saint Helena</option>
+                    <option value="LCA">Saint Lucia</option>
+                    <option value="KIR">Kiribati</option>
+                    <option value="OWI"D_AFR>Africa</option>
+                    <option value="WLF">Wallis and Futuna</option>
+                    <option value="AUT">Austria</option>
+                    <option value="COK">Cook Islands</option>
+                    <option value="ZMB">Zambia</option>
+                    <option value="SEN">Senegal</option>
+                    <option value="BFA">Burkina Faso</option>
+                    <option value="USA">United States</option>
+                    <option value="VEN">Venezuela</option>
+                    <option value="NGA">Nigeria</option>
+                    <option value="NPL">Nepal</option>
+                    <option value="DMA">Dominica</option>
+                    <option value="WSM">Samoa</option>
+                    <option value="MUS">Mauritius</option>
+                    <option value="TUN">Tunisia</option>
+                    <option value="RUS">Russia</option>
+                    <option value="TTO">Trinidad and Tobago</option>
+                    <option value="ARG">Argentina</option>
+                    <option value="HUN">Hungary</option>
+                    <option value="IRN">Iran</option>
+                    <option value="NER">Niger</option>
+                    <option value="MLT">Malta</option>
+                    <option value="KAZ">Kazakhstan</option>
+                    <option value="LTU">Lithuania</option>
+                    <option value="CHE">Switzerland</option>
+                    <option value="TKL">Tokelau</option>
+                    <option value="LKA">Sri Lanka</option>
+                    <option value="NIU">Niue</option>
+                    <option value="COD">Democratic Republic of Congo</option>
+                    <option value="CAF">Central African Republic</option>
+                    <option value="GRC">Greece</option>
+                    <option value="HRV">Croatia</option>
+                    <option value="SWE">Sweden</option>
+                    <option value="MOZ">Mozambique</option>
+                    <option value="SGP">Singapore</option>
+                    <option value="BOL">Bolivia</option>
+                    <option value="UKR">Ukraine</option>
+                    <option value="AFG">Afghanistan</option>
+                    <option value="CYM">Cayman Islands</option>
+                    <option value="RWA">Rwanda</option>
+                    <option value="SVN">Slovenia</option>
+                    <option value="GRL">Greenland</option>
+                    <option value="DZA">Algeria</option>
+                    <option value="TON">Tonga</option>
+                    <option value="SWZ">Eswatini</option>
+                    <option value="ISR">Israel</option>
+                    <option value="OMN">Oman</option>
+                    <option value="DOM">Dominican Republic</option>
+                    <option value="SLV">El Salvador</option>
+                    <option value="FLK">Falkland Islands</option>
+                    <option value="MYS">Malaysia</option>
+                    <option value="ITA">Italy</option>
+                    <option value="LSO">Lesotho</option>
+                    <option value="GNB">Guinea-Bissau</option>
+                    <option value="CHL">Chile</option>
+                    <option value="HTI">Haiti</option>
+                    <option value="OWID_NAM">North America</option>
+                    <option value="NIC">Nicaragua</option>
+                    <option value="TCD">Chad</option>
+                    <option value="AUS">Australia</option>
+                    <option value="ETH">Ethiopia</option>
+                    <option value="COM">Comoros</option>
+                    <option value="KWT">Kuwait</option>
+                    <option value="PNG">Papua New Guinea</option>
+                    <option value="PCN">Pitcairn</option>
+                    <option value="DEU">Germany</option>
+                    <option value="GMB">Gambia</option>
+                    <option value="ARM">Armenia</option>
+                    <option value="PAN">Panama</option>
+                    <option value="CUW">Curacao</option>
+                    <option value="TZA">Tanzania</option>
+                    <option value="TUR">Turkey</option>
+                    <option value="OWID_CYN">Northern Cyprus</option>
+                    <option value="SSD">South Sudan</option>
+                    <option value="VNM">Vietnam</option>
+                    <option value="MDV">Maldives</option>
+                    <option value="LBR">Liberia</option>
+                    <option value="TJK">Tajikistan</option>
+                    <option value="ROU">Romania</option>
+                    <option value="BRN">Brunei</option>
+                    <option value="JAM">Jamaica</option>
+                    <option value="MDG">Madagascar</option>
+                    <option value="SUR">Suriname</option>
+                    <option value="OWID_SAM">South America</option>
+                    <option value="PER">Peru</option>
+                    <option value="FRO">Faeroe Islands</option>
+                    <option value="GGY">Guernsey</option>
+                    <option value="SVK">Slovakia</option>
+                    <option value="JPN">Japan</option>
+                    <option value="GIN">Guinea</option>
+                    <option value="KEN">Kenya</option>
+                    <option value="BLR">Belarus</option>
+                    <option value="GNQ">Equatorial Guinea</option>
+                    <option value="MNG">Mongolia</option>
+                    <option value="IND">India</option>
+                    <option value="NAM">Namibia</option>
+                    <option value="SYC">Seychelles</option>
+                    <option value="NCL">New Caledonia</option>
+                    <option value="VGB">British Virgin Islands</option>
+                    <option value="LAO">Laos</option>
+                    <option value="MAC">Macao</option>
+                    <option value="STP">Sao Tome and Principe</option>
+                    <option value="MAR">Morocco</option>
+                    <option value="MDA">Moldova</option>
+                    <option value="HKG">Hong Kong</option>
+                    <option value="PRY">Paraguay</option>
+                    <option value="CMR">Cameroon</option>
+                    <option value="ESP">Spain</option>
+                    <option value="UZB">Uzbekistan</option>
+                    <option value="MEX">Mexico</option>
+                    <option value="IRL">Ireland</option>
+                    <option value="TWN">Taiwan</option>
+                    <option value="PRT">Portugal</option>
+                    <option value="BRB">Barbados</option>
+                    <option value="GHA">Ghana</option>
+                    <option value="CAN">Canada</option>
+                    <option value="BLZ">Belize</option>
+                    <option value="ISL">Iceland</option>
+                    <option value="GEO">Georgia</option>
+                    <option value="MSR">Montserrat</option>
+                    <option value="THA">Thailand</option>
+                    <option value="ECU">Ecuador</option>
+                    <option value="ERI">Eritrea</option>
+                    <option value="LUX">Luxembourg</option>
+                    <option value="AZE">Azerbaijan</option>
+                    <option value="COG">Congo</option>
+                    <option value="JOR">Jordan</option>
+                    <option value="TKM">Turkmenistan</option>
+                    <option value="QAT">Qatar</option>
+                    <option value="BEN">Benin</option>
+                    <option value="TCA">Turks and Caicos Islands</option>
+                    <option value="OWID_ASI">Asia</option>
+                    <option value="EST">Estonia</option>
+                    <option value="OWID_WRL">World</option>
+                    <option value="BMU">Bermuda</option>
+                    <option value="KGZ">Kyrgyzstan</option>
+                    <option value="AGO">Angola</option>
+                    <option value="FJI">Fiji</option>
+                    <option value="NZL">New Zealand</option>
+                    <option value="SLB">Solomon Islands</option>
+                    <option value="PLW">Palau</option>
+                    <option value="HND">Honduras</option>
+                    <option value="ARE">United Arab Emirates</option>
+                    <option value="TLS">Timor</option>
+                    <option value="COL">Colombia</option>
+                    <option value="BDI">Burundi</option>
+                    <option value="KHM">Cambodia</option>
+                    <option value="FIN">Finland</option>
+                    <option value="SLE">Sierra Leone</option>
+                    <option value="GRD">Grenada</option>
+                    <option value="IRQ">Iraq</option>
+                    <option value="LVA">Latvia</option>
+                    <option value="MRT">Mauritania</option>
+                    <option value="NRU">Nauru</option>
+                    <option value="SXM">Sint Maarten (Dutch part)</option>
+                    <option value="ZAF">South Africa</option>
+                    <option value="NLD">Netherlands</option>
+                    <option value="LBY">Libya</option>
+                    <option value="OWID_EUR">Europe</option>
+                    <option value="CRI">Costa Rica</option>
+                    <option value="POL">Poland</option>
+                    <option value="BTN">Bhutan</option>
+                    <option value="CZE">Czechia</option>
+                    <option value="PAK">Pakistan</option>
+                    <option value="ZWE">Zimbabwe</option>
+                    <option value="CUB">Cuba</option>
+                    <option value="EGY">Egypt</option>
+                    <option value="ALB">Albania</option>
+                    <option value="SYR">Syria</option>
+                    <option value="SAU">Saudi Arabia</option>
+                    <option value="BHR">Bahrain</option>
+                    <option value="BES">Bonaire Sint Eustatius and Saba</option>
+                    <option value="MHL">Marshall Islands</option>
+                    <option value="OWID_EUN">European Union</option>
+                    <option value="BGR">Bulgaria</option>
+                    <option value="DNK">Denmark</option>
+                    <option value="CIV">Cote d'Ivoire</option>
+                    <option value="IMN">Isle of Man</option>
+                    <option value="SMR">San Marino</option>
+                    <option value="BGD">Bangladesh</option>
+                    <option value="BRA">Brazil</option>
+                    <option value="SDN">Sudan</option>
+                    <option value="MWI">Malawi</option>
+                    <option value="AND">Andorra</option>
+                    <option value="OWID_KOS">Kosovo</option>
+                    <option value="BWA">Botswana</option>
+                    <option value="MLI">Mali</option>
+                    <option value="TGO">Togo</option>
+                    <option value="ABW">Aruba</option>
+                    <option value="JEY">Jersey</option>
+                    <option value="LBN">Lebanon</option>
+                    <option value="VCT">Saint Vincent and the Grenadines</option>
+                    <option value="VAT">Vatican</option>
+                    <option value="PYF">French Polynesia</option>
+                    <option value="PSE">Palestine</option>
+                    <option value="DJI">Djibouti</option>
+                    <option value="TUV">Tuvalu</option>
+                    <option value="GIB">Gibraltar</option>
+                    <option value="KOR">South Korea</option>
+                    <option value="MNE">Montenegro</option>
+                    <option value="GTM">Guatemala</option>
+                    <option value="MCO">Monaco</option>
+                    <option value="YEM">Yemen</option>
+                    <option value="GAB">Gabon</option>
+                    <option value="SRB">Serbia</option>
+                    <option value="IDN">Indonesia</option>
+                    <option value="UGA">Uganda</option>
+                    <option value="ATG">Antigua and Barbuda</option>
+                    <option value="FRA">France</option>
+                    <option value="PHL">Philippines</option>
+                    <option value="BEL">Belgium</option>
+                    <option value="AIA">Anguilla</option>
+                    <option value="SOM">Somalia</option>
+                    <option value="MMR">Myanmar</option>
+                    <option value="NOR">Norway</option>
+                    <option value="GBR">United Kingdom</option>
+                    <option value="URY">Uruguay</option>
+                    <option value="CPV">Cape Verde</option>
+                    <option value="VUT">Vanuatu</option>
+                    <option value="KNA">Saint Kitts and Nevis</option>
+                </select>
+
+                <button id="searchButton" onclick="getData()">Search</button>
+            </div>
+
+            <div id="selectors">
+                <label>New Cases
+                    <input id="checkNewCases" type="checkbox" onclick="createGraph()" checked>
+                </label>
 
-        <select id="country">
-            <option value="FSM">Micronesia</option>
-            <option value="BIH">Bosnia and Herzegovina</option>
-            <option value="OWID_OCE">Oceania</option>
-            <option value="CHN">China</option>
-            <option value="BHS">Bahamas</option>
-            <option value="CYP">Cyprus</option>
-            <option value="LIE">Liechtenstein</option>
-            <option value="GUY">Guyana</option>
-            <option value="MKD">North Macedonia</option>
-            <option value="SHN">Saint Helena</option>
-            <option value="LCA">Saint Lucia</option>
-            <option value="KIR">Kiribati</option>
-            <option value="OWI"D_AFR>Africa</option>
-            <option value="WLF">Wallis and Futuna</option>
-            <option value="AUT">Austria</option>
-            <option value="COK">Cook Islands</option>
-            <option value="ZMB">Zambia</option>
-            <option value="SEN">Senegal</option>
-            <option value="BFA">Burkina Faso</option>
-            <option value="USA">United States</option>
-            <option value="VEN">Venezuela</option>
-            <option value="NGA">Nigeria</option>
-            <option value="NPL">Nepal</option>
-            <option value="DMA">Dominica</option>
-            <option value="WSM">Samoa</option>
-            <option value="MUS">Mauritius</option>
-            <option value="TUN">Tunisia</option>
-            <option value="RUS">Russia</option>
-            <option value="TTO">Trinidad and Tobago</option>
-            <option value="ARG">Argentina</option>
-            <option value="HUN">Hungary</option>
-            <option value="IRN">Iran</option>
-            <option value="NER">Niger</option>
-            <option value="MLT">Malta</option>
-            <option value="KAZ">Kazakhstan</option>
-            <option value="LTU">Lithuania</option>
-            <option value="CHE">Switzerland</option>
-            <option value="TKL">Tokelau</option>
-            <option value="LKA">Sri Lanka</option>
-            <option value="NIU">Niue</option>
-            <option value="COD">Democratic Republic of Congo</option>
-            <option value="CAF">Central African Republic</option>
-            <option value="GRC">Greece</option>
-            <option value="HRV">Croatia</option>
-            <option value="SWE">Sweden</option>
-            <option value="MOZ">Mozambique</option>
-            <option value="SGP">Singapore</option>
-            <option value="BOL">Bolivia</option>
-            <option value="UKR">Ukraine</option>
-            <option value="AFG">Afghanistan</option>
-            <option value="CYM">Cayman Islands</option>
-            <option value="RWA">Rwanda</option>
-            <option value="SVN">Slovenia</option>
-            <option value="GRL">Greenland</option>
-            <option value="DZA">Algeria</option>
-            <option value="TON">Tonga</option>
-            <option value="SWZ">Eswatini</option>
-            <option value="ISR">Israel</option>
-            <option value="OMN">Oman</option>
-            <option value="DOM">Dominican Republic</option>
-            <option value="SLV">El Salvador</option>
-            <option value="FLK">Falkland Islands</option>
-            <option value="MYS">Malaysia</option>
-            <option value="ITA">Italy</option>
-            <option value="LSO">Lesotho</option>
-            <option value="GNB">Guinea-Bissau</option>
-            <option value="CHL">Chile</option>
-            <option value="HTI">Haiti</option>
-            <option value="OWID_NAM">North America</option>
-            <option value="NIC">Nicaragua</option>
-            <option value="TCD">Chad</option>
-            <option value="AUS">Australia</option>
-            <option value="ETH">Ethiopia</option>
-            <option value="COM">Comoros</option>
-            <option value="KWT">Kuwait</option>
-            <option value="PNG">Papua New Guinea</option>
-            <option value="PCN">Pitcairn</option>
-            <option value="DEU">Germany</option>
-            <option value="GMB">Gambia</option>
-            <option value="ARM">Armenia</option>
-            <option value="PAN">Panama</option>
-            <option value="CUW">Curacao</option>
-            <option value="TZA">Tanzania</option>
-            <option value="TUR">Turkey</option>
-            <option value="OWID_CYN">Northern Cyprus</option>
-            <option value="SSD">South Sudan</option>
-            <option value="VNM">Vietnam</option>
-            <option value="MDV">Maldives</option>
-            <option value="LBR">Liberia</option>
-            <option value="TJK">Tajikistan</option>
-            <option value="ROU">Romania</option>
-            <option value="BRN">Brunei</option>
-            <option value="JAM">Jamaica</option>
-            <option value="MDG">Madagascar</option>
-            <option value="SUR">Suriname</option>
-            <option value="OWID_SAM">South America</option>
-            <option value="PER">Peru</option>
-            <option value="FRO">Faeroe Islands</option>
-            <option value="GGY">Guernsey</option>
-            <option value="SVK">Slovakia</option>
-            <option value="JPN">Japan</option>
-            <option value="GIN">Guinea</option>
-            <option value="KEN">Kenya</option>
-            <option value="BLR">Belarus</option>
-            <option value="GNQ">Equatorial Guinea</option>
-            <option value="MNG">Mongolia</option>
-            <option value="IND">India</option>
-            <option value="NAM">Namibia</option>
-            <option value="SYC">Seychelles</option>
-            <option value="NCL">New Caledonia</option>
-            <option value="VGB">British Virgin Islands</option>
-            <option value="LAO">Laos</option>
-            <option value="MAC">Macao</option>
-            <option value="STP">Sao Tome and Principe</option>
-            <option value="MAR">Morocco</option>
-            <option value="MDA">Moldova</option>
-            <option value="HKG">Hong Kong</option>
-            <option value="PRY">Paraguay</option>
-            <option value="CMR">Cameroon</option>
-            <option value="ESP">Spain</option>
-            <option value="UZB">Uzbekistan</option>
-            <option value="MEX">Mexico</option>
-            <option value="IRL">Ireland</option>
-            <option value="TWN">Taiwan</option>
-            <option value="PRT">Portugal</option>
-            <option value="BRB">Barbados</option>
-            <option value="GHA">Ghana</option>
-            <option value="CAN">Canada</option>
-            <option value="BLZ">Belize</option>
-            <option value="ISL">Iceland</option>
-            <option value="GEO">Georgia</option>
-            <option value="MSR">Montserrat</option>
-            <option value="THA">Thailand</option>
-            <option value="ECU">Ecuador</option>
-            <option value="ERI">Eritrea</option>
-            <option value="LUX">Luxembourg</option>
-            <option value="AZE">Azerbaijan</option>
-            <option value="COG">Congo</option>
-            <option value="JOR">Jordan</option>
-            <option value="TKM">Turkmenistan</option>
-            <option value="QAT">Qatar</option>
-            <option value="BEN">Benin</option>
-            <option value="TCA">Turks and Caicos Islands</option>
-            <option value="OWID_ASI">Asia</option>
-            <option value="EST">Estonia</option>
-            <option value="OWID_WRL">World</option>
-            <option value="BMU">Bermuda</option>
-            <option value="KGZ">Kyrgyzstan</option>
-            <option value="AGO">Angola</option>
-            <option value="FJI">Fiji</option>
-            <option value="NZL">New Zealand</option>
-            <option value="SLB">Solomon Islands</option>
-            <option value="PLW">Palau</option>
-            <option value="HND">Honduras</option>
-            <option value="ARE">United Arab Emirates</option>
-            <option value="TLS">Timor</option>
-            <option value="COL">Colombia</option>
-            <option value="BDI">Burundi</option>
-            <option value="KHM">Cambodia</option>
-            <option value="FIN">Finland</option>
-            <option value="SLE">Sierra Leone</option>
-            <option value="GRD">Grenada</option>
-            <option value="IRQ">Iraq</option>
-            <option value="LVA">Latvia</option>
-            <option value="MRT">Mauritania</option>
-            <option value="NRU">Nauru</option>
-            <option value="SXM">Sint Maarten (Dutch part)</option>
-            <option value="ZAF">South Africa</option>
-            <option value="NLD">Netherlands</option>
-            <option value="LBY">Libya</option>
-            <option value="OWID_EUR">Europe</option>
-            <option value="CRI">Costa Rica</option>
-            <option value="POL">Poland</option>
-            <option value="BTN">Bhutan</option>
-            <option value="CZE">Czechia</option>
-            <option value="PAK">Pakistan</option>
-            <option value="ZWE">Zimbabwe</option>
-            <option value="CUB">Cuba</option>
-            <option value="EGY">Egypt</option>
-            <option value="ALB">Albania</option>
-            <option value="SYR">Syria</option>
-            <option value="SAU">Saudi Arabia</option>
-            <option value="BHR">Bahrain</option>
-            <option value="BES">Bonaire Sint Eustatius and Saba</option>
-            <option value="MHL">Marshall Islands</option>
-            <option value="OWID_EUN">European Union</option>
-            <option value="BGR">Bulgaria</option>
-            <option value="DNK">Denmark</option>
-            <option value="CIV">Cote d'Ivoire</option>
-            <option value="IMN">Isle of Man</option>
-            <option value="SMR">San Marino</option>
-            <option value="BGD">Bangladesh</option>
-            <option value="BRA">Brazil</option>
-            <option value="SDN">Sudan</option>
-            <option value="MWI">Malawi</option>
-            <option value="AND">Andorra</option>
-            <option value="OWID_KOS">Kosovo</option>
-            <option value="BWA">Botswana</option>
-            <option value="MLI">Mali</option>
-            <option value="TGO">Togo</option>
-            <option value="ABW">Aruba</option>
-            <option value="JEY">Jersey</option>
-            <option value="LBN">Lebanon</option>
-            <option value="VCT">Saint Vincent and the Grenadines</option>
-            <option value="VAT">Vatican</option>
-            <option value="PYF">French Polynesia</option>
-            <option value="PSE">Palestine</option>
-            <option value="DJI">Djibouti</option>
-            <option value="TUV">Tuvalu</option>
-            <option value="GIB">Gibraltar</option>
-            <option value="KOR">South Korea</option>
-            <option value="MNE">Montenegro</option>
-            <option value="GTM">Guatemala</option>
-            <option value="MCO">Monaco</option>
-            <option value="YEM">Yemen</option>
-            <option value="GAB">Gabon</option>
-            <option value="SRB">Serbia</option>
-            <option value="IDN">Indonesia</option>
-            <option value="UGA">Uganda</option>
-            <option value="ATG">Antigua and Barbuda</option>
-            <option value="FRA">France</option>
-            <option value="PHL">Philippines</option>
-            <option value="BEL">Belgium</option>
-            <option value="AIA">Anguilla</option>
-            <option value="SOM">Somalia</option>
-            <option value="MMR">Myanmar</option>
-            <option value="NOR">Norway</option>
-            <option value="GBR">United Kingdom</option>
-            <option value="URY">Uruguay</option>
-            <option value="CPV">Cape Verde</option>
-            <option value="VUT">Vanuatu</option>
-            <option value="KNA">Saint Kitts and Nevis</option>
-        </select>
+                <label>New Deaths
+                    <input id="checkNewDeaths" type="checkbox" onclick="createGraph()" checked>
+                </label>
 
-        <button onclick="getData()">Search</button>
+                <label>Total Cases
+                    <input id="checkTotalCases" type="checkbox" onclick="createGraph()">
+                </label>
+
+                <label>Total Deaths
+                    <input id="checkTotalDeaths" type="checkbox" onclick="createGraph()">
+                </label>
+            </div>
+        </div>
 
         <div id="chart"></div>
 
         <script>
+            let covids = [];
             let fromInput = document.getElementById("from");
             let toInput = document.getElementById("to");
             let countryInput = document.getElementById("country");
 
-            fromInput.valueAsDate = new Date(2020, 00, 1);
+            let cncInput = document.getElementById("checkNewCases");
+            let cndInput = document.getElementById("checkNewDeaths");
+            let ctcInput = document.getElementById("checkTotalCases");
+            let ctdInput = document.getElementById("checkTotalDeaths");
+
+            let from = new Date();
+            from.setHours(0, 0, 0, 0);
+            from.setDate(from.getDate() - 30);
+
+            fromInput.valueAsDate = from;
             toInput.valueAsDate = new Date();
             countryInput.value = "OWID_WRL";
 
-            let createGraph = (covids)=>{
+            let createGraph = ()=>{
                 let dates = covids.map(c => c.date);
+                let lines = [];
 
-                let trace1 = {
-                    x: dates,
-                    y: covids.map(c => c.new_cases),
-                    mode: "lines+markers",
-                    name: "New Cases"
+                if(cncInput.checked){
+                    lines.push({
+                        x: dates,
+                        y: covids.map(c => c.new_cases),
+                        mode: "lines+markers",
+                        name: "New Cases"
+                    });
                 }
 
-                let trace2 = {
-                    x: dates,
-                    y: covids.map(c => c.new_deaths),
-                    mode: "lines+markers",
-                    name: "New Deaths"
+                if(cndInput.checked){
+                    lines.push({
+                        x: dates,
+                        y: covids.map(c => c.new_deaths),
+                        mode: "lines+markers",
+                        name: "New Deaths"
+                    });
                 }
 
-                let trace3 = {
-                    x: dates,
-                    y: covids.map(c => c.total_deaths),
-                    mode: "lines+markers",
-                    name: "Total Deaths"
+                if(ctcInput.checked){
+                    lines.push({
+                        x: dates,
+                        y: covids.map(c => c.total_cases),
+                        mode: "lines+markers",
+                        name: "Total Cases"
+                    });
                 }
 
-                let trace4 = {
-                    x: dates,
-                    y: covids.map(c => c.total_cases),
-                    mode: "lines+markers",
-                    name: "Total Cases"
+                if(ctdInput.checked){
+                    lines.push({
+                        x: dates,
+                        y: covids.map(c => c.total_deaths),
+                        mode: "lines+markers",
+                        name: "Total Deaths"
+                    });
                 }
 
-                Plotly.newPlot("chart", [trace1, trace2, trace3, trace4]);
+                Plotly.newPlot("chart", lines);
             }
 
             let getData = ()=>{
@@ -312,8 +354,11 @@
                     body: JSON.stringify(data)
                 })
                     .then(r=>r.json())
-                    .then(createGraph)
-                    .catch((err)=>{console.log(err)});
+                    .then((response)=>{
+                        covids = response;
+                        createGraph()
+                    })
+                    .catch((err)=>{});
             }
 
             getData();