old mode 100644

new mode 100755

@@ -56,10 +56,10 @@ img.chart {

     text-align: left;

     padding: 10px;

 }

-span.chartNav {

+span.chartSelectors {

     margin: auto;

 }

-ul.chartNav {

+ul.selectorElement {

     list-style-type: none;

     margin: 10px;

     padding: 0;

@@ -67,20 +67,25 @@ ul.chartNav {

     background-color: #bbb;

     text-align: center;

 }

-li.chartNav {

+li.selectorElement {

     display: inline-block;

     font: bold 18px arial, sans-serif;

     color: black;

 }

-text.chartNav:hover {

+span.selectorElement:hover {

     background-color: #333;

     cursor: pointer;

     color: white;

 }

-text.chartNav {

+span.selectorElement {

     display: inline-block;

     padding: 8px 12px;

 }

+#iframe_a {

+    border:none;

+    width:100%;

+    height:450px;

+}

 </style>

 </head>

@@ -94,9 +99,9 @@ DIY Radiation Monitor</a></h2>

 <h4>Albany, Oregon</h4>

 <div class="datetime">

-<text id="date"></text>

+<span id="date"></span>

   

-<text id="time"></text>

+<span id="time"></span>

 </div>

 <div class="rowContainer">

@@ -108,9 +113,9 @@ Counts per second:<br>

 uSv per hour:

 </div>

 <div class="dataItems">

-<text id="cpm"></text><br>

-<text id="cps"></text><br>

-<text id="uSvPerHr"></text>

+<span id="cpm"></span><br>

+<span id="cps"></span><br>

+<span id="uSvPerHr"></span>

 </div>

 </div>

@@ -121,32 +126,57 @@ Status:<br>

 Mode:

 </div>

 <div class="dataItems">

-<text id="status"></text><br>

-<text id="mode"></text>

+<span id="status"></span><br>

+<span id="mode"></span>

 </div>

 </div>

 </div>

-<span class="chartNav">

-<ul class="chartNav">

-<li class="chartNav">Select charts:</li>

-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)">

-24 hours</text></li>

-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)">

-4 weeks</text></li>

-<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)">

-12 months</text></li>

+<span class="chartSelectors">

+<ul class="selectorElement">

+<li class="selectorElement">Select charts:</li>

+<li class="selectorElement"><span class="selectorElement"

+ onclick="setChartPeriod(1)">

+24 hours</span></li>

+<li class="selectorElement"><span class="selectorElement"

+ onclick="setChartPeriod(2)">

+4 weeks</span></li>

+<li class="selectorElement"><span class="selectorElement"

+ onclick="setChartPeriod(3)">12 months</span></li>

+<li id="customSelector" class="selectorElement" style="visibility:hidden;">

+<span  class="selectorElement"

+ onclick="setChartPeriod(0)">Custom...</span></li>

 </ul>

 </span>

+

+<div class="rowContainer" id="customChartsContainer" style="display:none;">

+<div class="currentDataCell">

+<form id="fmDateSelector" action="radmon.php" method="post"

+ target="iframe_a">

+<label for="beginDate">Begin Date: </label>

+<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" />

+<label for="endDate">End Date: </label>

+<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" />

+<br><br>

+<input type="button" onclick="getCustomCharts()" value="Get Charts">

+</form>

+<span id="errorMsg"></span><br>

+<iframe id="iframe_a" name="iframe_a"></iframe>

+</div>

+</div>

+

 <br>

+

+

+<div class="rowContainer" id="stockChartsContainer">

 <div class="chartContainer">

 <img class="chart" id="cpmChart">

 </div>

-

 <div class="chartContainer">

 <img class="chart" id="uSvChart">

 </div>

+</div>

 <div class="notes">

 <b>NOTES:</b>

@@ -166,10 +196,10 @@ Radiation Dose Chart</a> by Randall Monroe.</li>

 <br>

 <script>

-

+"use strick";

 /* Global constants */

-var radmonDataUrl = "dynamic/radmonOutputData.js";

+var radmonDataUrl = "dynamic/radmonData.js";

 /* Global DOM objects */

@@ -177,7 +207,7 @@ var radmonDataUrl = "dynamic/radmonOutputData.js";

 var cpmChart_g = document.getElementById("cpmChart");

 var uSvChart_g = document.getElementById("uSvChart");

-// Text elements

+// Document elements

 var date_e = document.getElementById("date");    

 var time_e = document.getElementById("time"); 

 var cpm_e = document.getElementById("cpm");    

@@ -186,16 +216,25 @@ var uSvPerHr_e = document.getElementById("uSvPerHr");

 var mode_e = document.getElementById("mode");    

 var status_e = document.getElementById("status");    

+// Custom charts document elements

+var customChartsContainer = document.getElementById("customChartsContainer");

+var stockChartsContainer = document.getElementById("stockChartsContainer");

+var fmDateSelector = document.getElementById("fmDateSelector");

+var errorMsg = document.getElementById("errorMsg");

+var customSelector = document.getElementById("customSelector");

+

+

 /* Global objects */

 var httpRequest = new XMLHttpRequest();

 /* Global variables */

-var graphPeriod;

-

+var chartPeriod = 1;

 function main() {

+    httpRequest.timeout = 3000;

+

     /* Register call back function to process http requests */

     httpRequest.onreadystatechange = function() {

         if (httpRequest.readyState == 4 && httpRequest.status == 200) {

@@ -208,30 +247,38 @@ function main() {

     httpRequest.ontimeout = function(e) {

         displayOfflineStatus();

     };

-

+    

+    initializeDateSelector();

     getRadmonData();

-    graphPeriod = 1;

-    getRadmonGraphs();

-    setInterval(getRadmonData, 5000);

-    setInterval(getRadmonGraphs, 300000);

+    getRadmonCharts();

+    setInterval(getRadmonData, 2000);

+    setInterval(getRadmoncharts, 300000);

 }

 function getRadmonData() {

-    httpRequest.open("GET", radmonDataUrl, true);

-    httpRequest.timeout = 3000;

+    httpRequest.open("POST", radmonDataUrl, true);

     httpRequest.send();

 }

 function setChartPeriod(n) {

-    graphPeriod = n;

-    getRadmonGraphs();   

+    /* Show custom charts if custom charts selected, otherwise show

+       stock charts. */

+    chartPeriod = n;

+    if (n == 0) {

+        customChartsContainer.style.display = "block";

+        stockChartsContainer.style.display = "none";

+    } else {

+        customChartsContainer.style.display = "none";

+        stockChartsContainer.style.display = "block";

+        getRadmonCharts();   

+    }

 }

-function getRadmonGraphs() {

+function getRadmonCharts() {

     var d = new Date;

     var pfx;

-    switch(graphPeriod) {

+    switch(chartPeriod) {

         case 1:

             pfx = "24hr_";

             break;

@@ -250,6 +297,12 @@ function displayData(dataItem) {

     var timeStamp, date, time, hourminute;

     var localDateObj,localTimeZone;

+    // Custom charts can only be generated by the local server, i.e,

+    // with access to rrdtool database.

+    if (dataItem.serverMode == "primary") {

+        customSelector.style.visibility = "visible";

+    }

+

     timeStamp = dataItem.date;

     date = timeStamp.split(" ")[0];

     time = timeStamp.split(" ")[1];

@@ -259,11 +312,11 @@ function displayData(dataItem) {

     date_e.innerHTML = date;    

     time_e.innerHTML = hourminute +

-        "  <small>(GMT+" + localTimeZone + ")</small>";    

+        "  <small>(UTC-" + localTimeZone + ")</small>";    

     cpm_e.innerHTML = dataItem.CPM;    

     cps_e.innerHTML = dataItem.CPS;    

     uSvPerHr_e.innerHTML = dataItem.uSvPerHr;    

-    mode_e.innerHTML = dataItem.Mode;    

+    mode_e.innerHTML = dataItem.mode;    

     status_e.innerHTML = dataItem.status;    

     if (dataItem.status == "online") {

@@ -277,7 +330,7 @@ function displayOfflineStatus() {

     var d = new Date();

     localTimeZone = d.getTimezoneOffset() / 60;

     date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();    

-    time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + "  <small>(GMT+" + 

+    time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + "  <small>(UTC-" + 

                        localTimeZone + ")</small>";

     cpm_e.innerHTML = "";    

     cps_e.innerHTML = "";    

@@ -287,6 +340,22 @@ function displayOfflineStatus() {

     status_e.style.color = "red";

 }

+function initializeDateSelector() {

+    var d = new Date();

+

+    var dEnd = new Date(d.getFullYear(),

+               d.getMonth(), d.getDate() - 0);

+

+    var dBegin = new Date(d.getFullYear(),

+               d.getMonth(), d.getDate() - 1);

+

+    document.getElementById("beginDate").valueAsDate = dBegin;

+    document.getElementById("endDate").valueAsDate = dEnd;

+}

+

+function getCustomCharts() {

+    fmDateSelector.submit();

+}

 </script>

 </body>

@@ -1,7 +1,11 @@

 <!DOCTYPE html>

+<!-- Courtesy ruler for editing this file

+12345678901234567890123456789012345678901234567890123456789012345678901234567890

+-->

 <html>

 <head>

 <title>DIY Radiation</title>

+<meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <style>

 body {

@@ -30,7 +34,7 @@ h4 {

     width: 50%;

     padding: 10px;

     font: bold 20px arial, sans-serif;

-    text-align: middle;

+    text-align: center;

     display: table-cell;

     vertical-align: middle;

 }

@@ -201,6 +201,9 @@ function main() {

             displayOfflineStatus();

         }

     };

+    httpRequest.ontimeout = function(e) {

+        displayOfflineStatus();

+    };

     getRadmonData();

     graphPeriod = 1;

@@ -211,6 +214,7 @@ function main() {

 function getRadmonData() {

     httpRequest.open("GET", radmonDataUrl, true);

+    httpRequest.timeout = 3000;

     httpRequest.send();

 }

@@ -261,11 +265,11 @@ function displayData(dataItem) {

     if (dataItem.status == "online") {

        status_e.style.color = "green";

     } else {

-       status_e.style.color = "red";

+       displayOffLineStatus();

     }

 }

-function displayOfflineStatus(dataItem) {

+function displayOfflineStatus() {

     var d = new Date();

     localTimeZone = d.getTimezoneOffset() / 60;

     date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();    

@@ -274,7 +278,7 @@ function displayOfflineStatus(dataItem) {

     cpm_e.innerHTML = "";    

     cps_e.innerHTML = "";    

     uSvPerHr_e.innerHTML = "";    

-    mode_e.innerHTML = "";    

+    mode_e.innerHTML = "&nbsp";    

     status_e.innerHTML = "offline";    

     status_e.style.color = "red";

 }

@@ -28,8 +28,9 @@ h4 {

 }

 .currentDataCell {

     width: 50%;

+    padding: 10px;

     font: bold 20px arial, sans-serif;

-    text-align: center;

+    text-align: middle;

     display: table-cell;

     vertical-align: middle;

 }

@@ -38,7 +39,7 @@ h4 {

     text-align: left;

     line-height: 130%;

     display: inline-block;

-    vertical-align: top;

+    vertical-align: middle;

 }

 .chartContainer {

     padding: 2px;

@@ -209,7 +210,7 @@ function main() {

 }

 function getRadmonData() {

-    httpRequest.open("POST", radmonDataUrl, true);

+    httpRequest.open("GET", radmonDataUrl, true);

     httpRequest.send();

 }

@@ -162,16 +162,17 @@ Radiation Dose Chart</a> by Randall Monroe.</li>

 <script>

-/* Globals */

+/* Global constants */

+

 var radmonDataUrl = "dynamic/radmonOutputData.js";

-var httpRequest = new XMLHttpRequest();

-var graphPeriod = 1;

-/* Chart elements */

+/* Global DOM objects */

+

+// Chart elements

 var cpmChart_g = document.getElementById("cpmChart");

 var uSvChart_g = document.getElementById("uSvChart");

-/* Text elements */

+// Text elements

 var date_e = document.getElementById("date");    

 var time_e = document.getElementById("time"); 

 var cpm_e = document.getElementById("cpm");    

@@ -180,16 +181,28 @@ var uSvPerHr_e = document.getElementById("uSvPerHr");

 var mode_e = document.getElementById("mode");    

 var status_e = document.getElementById("status");    

+/* Global objects */

+

+var httpRequest = new XMLHttpRequest();

+

+/* Global variables */

+

+var graphPeriod;

+

+

 function main() {

     /* Register call back function to process http requests */

     httpRequest.onreadystatechange = function() {

         if (httpRequest.readyState == 4 && httpRequest.status == 200) {

             var dataArray = JSON.parse(httpRequest.responseText);

             displayData(dataArray[0]);

+        } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {

+            displayOfflineStatus();

         }

     };

     getRadmonData();

+    graphPeriod = 1;

     getRadmonGraphs();

     setInterval(getRadmonData, 5000);

     setInterval(getRadmonGraphs, 300000);

@@ -251,6 +264,20 @@ function displayData(dataItem) {

     }

 }

+function displayOfflineStatus(dataItem) {

+    var d = new Date();

+    localTimeZone = d.getTimezoneOffset() / 60;

+    date_e.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();    

+    time_e.innerHTML = d.getHours() + ":" + d.getMinutes() + "  <small>(GMT+" + 

+                       localTimeZone + ")</small>";

+    cpm_e.innerHTML = "";    

+    cps_e.innerHTML = "";    

+    uSvPerHr_e.innerHTML = "";    

+    mode_e.innerHTML = "";    

+    status_e.innerHTML = "offline";    

+    status_e.style.color = "red";

+}

+

 </script>

 </body>

@@ -2,6 +2,7 @@

 <html>

 <head>

 <title>DIY Radiation</title>

+<meta name="viewport" content="width=device-width, initial-scale=1.0">

 <style>

 body {

     background-image: url("static/chalk.jpg");

@@ -124,11 +125,11 @@ Mode:

 <span class="chartNav">

 <ul class="chartNav">

 <li class="chartNav">Select charts:</li>

-<li class="chartNav"><text class="chartNav" onclick="show_charts(1)">

+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(1)">

 24 hours</text></li>

-<li class="chartNav"><text class="chartNav" onclick="show_charts(2)">

+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(2)">

 4 weeks</text></li>

-<li class="chartNav"><text class="chartNav" onclick="show_charts(3)">

+<li class="chartNav"><text class="chartNav" onclick="setChartPeriod(3)">

 12 months</text></li>

 </ul>

 </span>

@@ -164,7 +165,7 @@ Radiation Dose Chart</a> by Randall Monroe.</li>

 /* Globals */

 var radmonDataUrl = "dynamic/radmonOutputData.js";

 var httpRequest = new XMLHttpRequest();

-var graphPeriod;

+var graphPeriod = 1;

 /* Chart elements */

 var cpmChart_g = document.getElementById("cpmChart");

@@ -180,45 +181,47 @@ var mode_e = document.getElementById("mode");

 var status_e = document.getElementById("status");    

 function main() {

-    getRadmonData();

-    show_charts(1);

-    setInterval(getRadmonData, 5000);

-}

-

-function getRadmonData() {

+    /* Register call back function to process http requests */

     httpRequest.onreadystatechange = function() {

         if (httpRequest.readyState == 4 && httpRequest.status == 200) {

             var dataArray = JSON.parse(httpRequest.responseText);

             displayData(dataArray[0]);

         }

     };

+

+    getRadmonData();

+    getRadmonGraphs();

+    setInterval(getRadmonData, 5000);

+    setInterval(getRadmonGraphs, 300000);

+}

+

+function getRadmonData() {

     httpRequest.open("POST", radmonDataUrl, true);

     httpRequest.send();

 }

-function show_charts(n) {

+function setChartPeriod(n) {

     graphPeriod = n;

     getRadmonGraphs();   

-    setInterval(getRadmonGraphs, 300000);

 }

 function getRadmonGraphs() {

     var d = new Date;

+    var pfx;

     switch(graphPeriod) {

         case 1:

-            cpmChart_g.src = "dynamic/24hr_cpm.png?ver=" + d.getTime();

-            uSvChart_g.src = "dynamic/24hr_svperhr.png?ver=" + d.getTime();

+            pfx = "24hr_";

             break;

         case 2:

-            cpmChart_g.src = "dynamic/4wk_cpm.png?ver=" + d.getTime();

-            uSvChart_g.src = "dynamic/4wk_svperhr.png?ver=" + d.getTime();

+            pfx = "4wk_";

             break;

        case 3:

-            cpmChart_g.src = "dynamic/12m_cpm.png?ver=" + d.getTime();

-            uSvChart_g.src = "dynamic/12m_svperhr.png?ver=" + d.getTime();

+            pfx = "12m_";

             break;

     }

+    cpmChart_g.src = "dynamic/" + pfx + "cpm.png?ver=" + d.getTime();

+    uSvChart_g.src = "dynamic/" + pfx + "svperhr.png?ver=" + d.getTime();

 }

 function displayData(dataItem) {

@@ -82,7 +82,9 @@ text.chartNav {

 <div class="mainContainer">

-<h2>DIY Radiation Monitor</h2>

+<h2><a href="https://github.com/fractalxaos/radmon" 

+style="text-decoration:none" target="_new">

+DIY Radiation Monitor</a></h2>

 <h4>Albany, Oregon</h4>

 <div class="datetime">

@@ -109,7 +111,7 @@ uSv per hour:

 <div class="currentDataCell">

 <ins>Radiation Monitor</ins><br><br>

 <div class="dataItems">

-Device:<br>

+Status:<br>

 Mode:

 </div>

 <div class="dataItems">

@@ -122,9 +124,12 @@ Mode:

 <span class="chartNav">

 <ul class="chartNav">

 <li class="chartNav">Select charts:</li>

-<li class="chartNav"><text class="chartNav" onclick="show_charts(1)">24 hours</text></li>

-<li class="chartNav"><text class="chartNav" onclick="show_charts(2)">4 weeks</text></li>

-<li class="chartNav"><text class="chartNav" onclick="show_charts(3)">12 months</text></li>

+<li class="chartNav"><text class="chartNav" onclick="show_charts(1)">

+24 hours</text></li>

+<li class="chartNav"><text class="chartNav" onclick="show_charts(2)">

+4 weeks</text></li>

+<li class="chartNav"><text class="chartNav" onclick="show_charts(3)">

+12 months</text></li>

 </ul>

 </span>

 <br>

@@ -141,11 +146,13 @@ Mode:

 <b>NOTES:</b>

 <ul>

 <li>DIY Radiation Monitor project plans and software available at

-<a href="https://github.com/fractalxaos/radmon" target="_new"><i>Github.com</i></a>.</li>

-<li>Project sponsored by <a href="http://www.eugenemakerspace.com" TARGET="_NEW">

+<a href="https://github.com/fractalxaos/radmon" target="_new">

+<i>Github.com</i></a>.</li>

+<li>Project sponsored by 

+<a href="http://www.eugenemakerspace.com" TARGET="_NEW">

 <i>Eugene Maker Space</i></a>, Eugene, Oregon.</li>

-<li>For more information about the effects of radiation on the human body see

-<a href="https://xkcd.com/radiation/" target="_blank">

+<li>For more information about the effects of radiation on the human body

+see <a href="https://xkcd.com/radiation/" target="_blank">

 Radiation Dose Chart</a> by Randall Monroe.</li>

 </ul>

 </div>

@@ -155,7 +162,7 @@ Radiation Dose Chart</a> by Randall Monroe.</li>

 <script>

 /* Globals */

-var radmonDataUrl = "dynamic/radmonData.js";

+var radmonDataUrl = "dynamic/radmonOutputData.js";

 var httpRequest = new XMLHttpRequest();

 var graphPeriod;

@@ -175,7 +182,7 @@ var status_e = document.getElementById("status");

 function main() {

     getRadmonData();

     show_charts(1);

-    setInterval(getRadmonData, 10000);

+    setInterval(getRadmonData, 5000);

 }

 function getRadmonData() {

@@ -226,7 +233,8 @@ function displayData(dataItem) {

     localTimeZone = localDateObj.getTimezoneOffset() / 60;

     date_e.innerHTML = date;    

-    time_e.innerHTML = hourminute + "  <small>(GMT+" + localTimeZone + ")</small>";    

+    time_e.innerHTML = hourminute +

+        "  <small>(GMT+" + localTimeZone + ")</small>";    

     cpm_e.innerHTML = dataItem.CPM;    

     cps_e.innerHTML = dataItem.CPS;    

     uSvPerHr_e.innerHTML = dataItem.uSvPerHr;    

@@ -200,16 +200,16 @@ function getRadmonGraphs() {

     switch(graphPeriod) {

         case 1:

-            cpmChart_g.src = "dynamic/radGraph1.png?ver=" + d.getTime();

-            uSvChart_g.src = "dynamic/radGraph2.png?ver=" + d.getTime();

+            cpmChart_g.src = "dynamic/24hr_cpm.png?ver=" + d.getTime();

+            uSvChart_g.src = "dynamic/24hr_svperhr.png?ver=" + d.getTime();

             break;

         case 2:

-            cpmChart_g.src = "dynamic/radGraph3.png?ver=" + d.getTime();

-            uSvChart_g.src = "dynamic/radGraph4.png?ver=" + d.getTime();

+            cpmChart_g.src = "dynamic/4wk_cpm.png?ver=" + d.getTime();

+            uSvChart_g.src = "dynamic/4wk_svperhr.png?ver=" + d.getTime();

             break;

        case 3:

-            cpmChart_g.src = "dynamic/radGraph5.png?ver=" + d.getTime();

-            uSvChart_g.src = "dynamic/radGraph6.png?ver=" + d.getTime();

+            cpmChart_g.src = "dynamic/12m_cpm.png?ver=" + d.getTime();

+            uSvChart_g.src = "dynamic/12m_svperhr.png?ver=" + d.getTime();

             break;

     }

 }

@@ -159,6 +159,19 @@ var radmonDataUrl = "dynamic/radmonData.js";

 var httpRequest = new XMLHttpRequest();

 var graphPeriod;

+/* Chart elements */

+var cpmChart_g = document.getElementById("cpmChart");

+var uSvChart_g = document.getElementById("uSvChart");

+

+/* Text elements */

+var date_e = document.getElementById("date");    

+var time_e = document.getElementById("time"); 

+var cpm_e = document.getElementById("cpm");    

+var cps_e = document.getElementById("cps");    

+var uSvPerHr_e = document.getElementById("uSvPerHr");    

+var mode_e = document.getElementById("mode");    

+var status_e = document.getElementById("status");    

+

 function main() {

     getRadmonData();

     show_charts(1);

@@ -184,30 +197,26 @@ function show_charts(n) {

 function getRadmonGraphs() {

     var d = new Date;

+

     switch(graphPeriod) {

         case 1:

-            document.getElementById("cpmChart").src =

-                "dynamic/radGraph1.png?ver=" + d.getTime();

-            document.getElementById("uSvChart").src = 

-                "dynamic/radGraph2.png?ver=" + d.getTime();

+            cpmChart_g.src = "dynamic/radGraph1.png?ver=" + d.getTime();

+            uSvChart_g.src = "dynamic/radGraph2.png?ver=" + d.getTime();

             break;

         case 2:

-            document.getElementById("cpmChart").src = 

-                "dynamic/radGraph3.png?ver=" + d.getTime();

-            document.getElementById("uSvChart").src = 

-                "dynamic/radGraph4.png?ver=" + d.getTime();

+            cpmChart_g.src = "dynamic/radGraph3.png?ver=" + d.getTime();

+            uSvChart_g.src = "dynamic/radGraph4.png?ver=" + d.getTime();

             break;

        case 3:

-            document.getElementById("cpmChart").src = 

-                "dynamic/radGraph5.png?ver=" + d.getTime();

-            document.getElementById("uSvChart").src = 

-                "dynamic/radGraph6.png?ver=" + d.getTime();

+            cpmChart_g.src = "dynamic/radGraph5.png?ver=" + d.getTime();

+            uSvChart_g.src = "dynamic/radGraph6.png?ver=" + d.getTime();

             break;

     }

 }

 function displayData(dataItem) {

-    var timeStamp, date, time, hourminute, status;

+    var timeStamp, date, time, hourminute;

+    var localDateObj,localTimeZone;

     timeStamp = dataItem.date;

     date = timeStamp.split(" ")[0];

@@ -216,20 +225,18 @@ function displayData(dataItem) {

     localDateObj = new Date();

     localTimeZone = localDateObj.getTimezoneOffset() / 60;

-    document.getElementById("date").innerHTML = date;    

-    document.getElementById("time").innerHTML =  

-        hourminute + "  <small>(GMT+" + localTimeZone + ")</small>";    

-    document.getElementById("cpm").innerHTML =  dataItem.CPM;    

-    document.getElementById("cps").innerHTML =  dataItem.CPS;    

-    document.getElementById("uSvPerHr").innerHTML =  dataItem.uSvPerHr;    

-    document.getElementById("mode").innerHTML =  dataItem.Mode;    

-

-    status = dataItem.status;

-    document.getElementById("status").innerHTML = status;    

-    if (status == "online") {

-       document.getElementById("status").style.color = "green";

+    date_e.innerHTML = date;    

+    time_e.innerHTML = hourminute + "  <small>(GMT+" + localTimeZone + ")</small>";    

+    cpm_e.innerHTML = dataItem.CPM;    

+    cps_e.innerHTML = dataItem.CPS;    

+    uSvPerHr_e.innerHTML = dataItem.uSvPerHr;    

+    mode_e.innerHTML = dataItem.Mode;    

+

+    status_e.innerHTML = dataItem.status;    

+    if (dataItem.status == "online") {

+       status_e.style.color = "green";

     } else {

-       document.getElementById("status").style.color = "red";

+       status_e.style.color = "red";

     }

 }

@@ -179,7 +179,7 @@ function getRadmonData() {

 function show_charts(n) {

     graphPeriod = n;

     getRadmonGraphs();   

-    setInterval(getRadmonGraphs, 60000);

+    setInterval(getRadmonGraphs, 300000);

 }

 function getRadmonGraphs() {

@@ -13,7 +13,7 @@ h4 {

     font: bold 16px arial, sans-serif;

 }

 .mainContainer {

-    width: 800px;

+    width: 750px;

     text-align: center;

     margin: auto;

 }

@@ -50,6 +50,31 @@ img.chart {

     text-align: left;

     padding: 10px;

 }

+span.chartNav {

+    margin: auto;

+}

+ul.chartNav {

+    list-style-type: none;

+    margin: 10px;

+    padding: 0;

+    overflow: hidden;

+    background-color: #bbb;

+    text-align: center;

+}

+li.chartNav {

+    display: inline-block;

+    font: bold 18px arial, sans-serif;

+    color: black;

+}

+text.chartNav:hover {

+    background-color: #333;

+    cursor: pointer;

+    color: white;

+}

+text.chartNav {

+    display: inline-block;

+    padding: 8px 12px;

+}

 </style>

 </head>

@@ -94,30 +119,22 @@ Mode:

 </div>

 </div>

+<span class="chartNav">

+<ul class="chartNav">

+<li class="chartNav">Select charts:</li>

+<li class="chartNav"><text class="chartNav" onclick="show_charts(1)">24 hours</text></li>

+<li class="chartNav"><text class="chartNav" onclick="show_charts(2)">4 weeks</text></li>

+<li class="chartNav"><text class="chartNav" onclick="show_charts(3)">12 months</text></li>

+</ul>

+</span>

 <br>

 <div class="chartContainer">

-<img class="chart" id="1-day-cpm">

+<img class="chart" id="cpmChart">

 </div>

 <div class="chartContainer">

-<img class="chart" id="1-day-uSv">

-</div>

-

-<div class="chartContainer">

-<img class="chart" id="4-week-cpm">

-</div>

-

-<div class="chartContainer">

-<img class="chart" id="4-week-uSv">

-</div>

-

-<div class="chartContainer">

-<img class="chart" id="1-year-cpm">

-</div>

-

-<div class="chartContainer">

-<img class="chart" id="1-year-uSv">

+<img class="chart" id="uSvChart">

 </div>

 <div class="notes">

@@ -140,12 +157,12 @@ Radiation Dose Chart</a> by Randall Monroe.</li>

 /* Globals */

 var radmonDataUrl = "dynamic/radmonData.js";

 var httpRequest = new XMLHttpRequest();

+var graphPeriod;

 function main() {

     getRadmonData();

-    getRadmonGraphs();

+    show_charts(1);

     setInterval(getRadmonData, 10000);

-    setInterval(getRadmonGraphs, 60000);

 }

 function getRadmonData() {

@@ -159,14 +176,34 @@ function getRadmonData() {

     httpRequest.send();

 }

+function show_charts(n) {

+    graphPeriod = n;

+    getRadmonGraphs();   

+    setInterval(getRadmonGraphs, 60000);

+}

+

 function getRadmonGraphs() {

     var d = new Date;

-    document.getElementById("1-day-cpm").src = "dynamic/radGraph1.png?ver=" + d.getTime();

-    document.getElementById("1-day-uSv").src = "dynamic/radGraph2.png?ver=" + d.getTime();

-    document.getElementById("4-week-cpm").src = "dynamic/radGraph3.png?ver=" + d.getTime();