chart scale (linear/logarithmic) selection added

covid.js

@@ -295,7 +295,7 @@ let selectSite = (e) => {
                             <div><span class="label">Doubles every:</span><span class="value">${Math.round(Math.log(2)/Math.log(ratio))} days</span></div>
                             <div><span class="label">Half infected in:</span><span class="value">${Math.round(Math.log(population*0.5/cases)/Math.log(ratio))} days</span></div>
                             <div class="sources"><a href="${wikiData.source_link}">source</a></div>`
-                        updateChart(site, data, theSelect.siteNo)
+                        updateChartData(site, data, theSelect.siteNo)
                     })
                     .catch((e)=>{
                         siteData.innerHTML = `<div class="error">Something went wrong. Either a bug, or no data.</div>`
@@ -392,7 +392,7 @@ let niceChartColors = [
 /*
  * updating le charte
  */
-let updateChart = (site, data, siteno) => {
+let updateChartData = (site, data, siteno) => {
     
     // make sure to cancel any other updates to the chart
     if ('updateTimeout' in theChart) {
@@ -420,45 +420,49 @@ let updateChart = (site, data, siteno) => {
         return;
     }
     
-    theChart.updateTimeout = setTimeout(function(){
+    // update the chart settings
+    theChart.updateTimeout = setTimeout(updateChartSettings(), 500)
+}
+
+
+let updateChartSettings = () => {
     
-        // calculate the max value and the x-axis length that make sense
-        // with reasonable minimums
-        var max_cases = 100;
-        var max_data_points = 20;
-        theChart.data.datasets.slice(3).forEach((d)=>{
-            if (d.data[d.data.length-1] > max_cases) {
-                max_cases = d.data[d.data.length-1]
-            }
-            if (d.data.length > max_data_points) {
-                max_data_points = d.data.length
-                console.log('max-data-points:', max_data_points)
-            }
-        })
-        
-        // set the max value
-        if (theChart.options.scales.yAxes[0].type == "logarithmic") {
-            theChart.options.scales.yAxes[0].ticks.max = max_cases * 2
-        } else {
-            theChart.options.scales.yAxes[0].ticks.max = max_cases * 1.1
+    theChart.options.scales.yAxes[0].type = document.querySelector('input[type=radio][name=chart-type]:checked').value
+    
+    // calculate the max value and the x-axis length that make sense
+    // with reasonable minimums
+    var max_cases = 100;
+    var max_data_points = 20;
+    theChart.data.datasets.slice(3).forEach((d)=>{
+        if (d.data[d.data.length-1] > max_cases) {
+            max_cases = d.data[d.data.length-1]
+        }
+        if (d.data.length > max_data_points) {
+            max_data_points = d.data.length
+            console.log('max-data-points:', max_data_points)
         }
+    })
+    
+    // set the max value
+    if (theChart.options.scales.yAxes[0].type == "logarithmic") {
+        theChart.options.scales.yAxes[0].ticks.max = max_cases * 2
+    } else {
+        theChart.options.scales.yAxes[0].ticks.max = Math.round(max_cases * 1.1)
+    }
 
-        // set the x-asix length
-        theChart.data.datasets[0].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*2 })
-        theChart.data.datasets[1].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/2) }),
-        theChart.data.datasets[2].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/7) }),
-        theChart.data.labels = genArr(max_data_points, 1)
-        
-        // ignoring the potential error
-        // because we might have filled out data for an nth site
-        // while data for (n-1)th is still undefined
-        // in which case theChart.update() will fail
-        try {
-            theChart.update();
-        } catch (e) {}
+    // set the x-asix length
+    theChart.data.datasets[0].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*2 })
+    theChart.data.datasets[1].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/2) }),
+    theChart.data.datasets[2].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/7) }),
+    theChart.data.labels = genArr(max_data_points, 1)
     
-    // end setTimeout
-    }, 500)
+    // ignoring the potential error
+    // because we might have filled out data for an nth site
+    // while data for (n-1)th is still undefined
+    // in which case theChart.update() will fail
+    try {
+        theChart.update();
+    } catch (e) {}
 }
 
 
@@ -475,8 +479,13 @@ document.addEventListener('DOMContentLoaded', (e)=>{
     // now we can add more sites
     var addSite = document.getElementById('add-site')
     
+    // draw the chart
     chart()
     
+    // make sure chart controls work
+    document.getElementById('chart-type-logarithmic').addEventListener('change', updateChartSettings)
+    document.getElementById('chart-type-linear').addEventListener('change', updateChartSettings)
+    
     // fill out the covid data box
     getCovidData()
         .then((data)=>{

index.html

@@ -185,6 +185,26 @@
             #disclaimers-container {
                 font-size:80%;
             }
+            .chart-config-container {
+                margin-top:1em;
+                display:flex;
+                justify-content: center;
+                font-size:80%;
+            }
+            .chart-config-container input {
+                display:none;
+            }
+            .chart-config-container label {
+                padding: 0.5em;
+                border-radius:0.2em;
+                background:#404040;
+                box-shadow: inset 0px 0px 2px #333;
+            }
+            .chart-config-container input:checked + label {
+                background:springgreen;
+                color:black;
+                box-shadow: 0px 0px 2px springgreen;
+            }
         </style>
     </head>
     <body>
@@ -209,8 +229,12 @@
         </div>
         <div id="the-chart-container">
             <canvas id="the-chart"></canvas>
-            <!--input type="radio" id="chart-tipe-logarithmic" name="chart-type"/>
-            <input type="radio" id="chart-tipe-linear" name="chart-type"/-->
+            <div class="chart-config-container">
+                <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
+                <label for="chart-type-logarithmic">Logarithmic scale</label>
+                <input type="radio" id="chart-type-linear" value="linear" name="chart-type">
+                <label for="chart-type-linear">Linear scale</label>
+            </div>
         </div>
         <div id="disclaimers-container">
             <h3>Disclaimers:</h3>