Working on JS, added test.html for local use.

client-script.js

@@ -10,8 +10,9 @@
 // in return.                                   Thomas Buck & Christian Högerle
 // ----------------------------------------------------------------------------
 
-var arrSensor = Array();
+var arrSensor = Array(); // Data received from Websockets
 
+// Text Strings. Change these to translate.
 textAvailableSensors = "Available Sensors";
 textButtonNext = "Continue";
 homeTabName = "Home";
@@ -23,28 +24,36 @@ humidityLabel = 'Humidity [%RH]';
 temperatureHeading = "Temperature";
 humidityHeading = "Humidity";
 
-$(document).ready(function() {
-    $('#main-part').append(`
-        <div class="row" id="contentDiv">
-            <div class="col-md-5 col-lg-5">
-                <div class="panel panel-primary">
-                    <div class="panel-heading" id="listSensorsHeading">
-                        ` + textAvailableSensors + ` (0/0)
-                    </div>
-                    <div class="panel-body">
-                        <ul class="list-group" id="listSensors"></ul>
-                        <div id="alertDiv"></div>
-                        <button class="btn btn-primary" disabled="" id="btnSubmit">
-                            ` + textButtonNext + `
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>`);
+// Colors
+singleChartTempColor = "#337ab7";
+singleChartHumidColor = "#337ab7";
+preDefinedColors = Array(
+    "#337ab7", "#ff0000", "#00ff00"
+);
+
+// Get current client-time for the graph X-axis labels
+var actTime = new Date();
+actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes();
 
-    // Get current client-time for the graph X-axis labels
-    var actTime = new Date();
-    actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes();
+// Draw initial view when the page has been loaded
+$(document).ready(initialView);
+
+function initialView() {
+    $('#contentDiv').empty();
+    $('#contentDiv').append(`<div class="col-sm-12 col-md-12 col-lg-12">
+        <div class="panel panel-primary">
+            <div class="panel-heading" id="listSensorsHeading">
+                ` + textAvailableSensors + ` (0/0)
+            </div>
+            <div class="panel-body">
+                <ul class="list-group" id="listSensors"></ul>
+                <div id="alertDiv"></div>
+                <button class="btn btn-primary" disabled="" id="btnSubmit">
+                    ` + textButtonNext + `
+                </button>
+            </div>
+        </div>
+    </div>`);
 
     $('#listSensorsHeading').empty();
     $('#listSensorsHeading').html(textAvailableSensors + " (0/" + clients.length + ")");
@@ -58,9 +67,9 @@ $(document).ready(function() {
     // Button to continue to graph view
     $("#btnSubmit").click(function(event) {
         $('#contentDiv').empty();
-        generateView(arrSensor, actTime);
+        generateView(arrSensor);
     });
-});
+}
 
 function webSocket(wsUri, wsPort, count, clientsCount) {
     websocket = new WebSocket("ws://" + wsUri + ":" + wsPort + "/");
@@ -102,8 +111,8 @@ function webSocket(wsUri, wsPort, count, clientsCount) {
     };
 }
 
-function generateView(arrSensor, actTime) {
-    $('#contentDiv').append(`<div class="col-md-12 col-lg-12">
+function generateView(arrSensor) {
+    $('#contentDiv').append(`<div class="col-sm-12 col-md-12 col-lg-12">
                                 <div class="panel panel-primary">
                                     <ul class="nav nav-pills">
                                         <li class="active"><a class="navtab" data-toggle="tab" href="#home">` + homeTabName + `</a></li>
@@ -120,26 +129,30 @@ function generateView(arrSensor, actTime) {
     });
 
     // flag for combined plot -> true
-    generateGraph(true, arrSensor, actTime);
+    generateGraph(true, arrSensor);
 
     $(".navtab").click(function(event) {
         $('#contentPanel').empty();
         if(event.target.text == homeTabName) {
             // flag for combined plot -> true
-            generateGraph(true, arrSensor, actTime);
+            generateGraph(true, arrSensor);
         } else {
-            generateGraph(false, arrSensor[(event.target.text.split(" ")[1] - 1)], actTime);
+            generateGraph(false, arrSensor[(event.target.text.split(" ")[1] - 1)]);
         }
     });
 }
 
-function generateGraph(flag, sensor, actTime) {
+function generateGraph(flag, sensor) {
     $('#contentPanel').append(`<div class="row">
                                 <div class="col-sm-12 col-md-12 col-lg-6">
-                                    <canvas id="temperaturChart"></canvas>
+                                    <div id="temperatureDiv" class="embed-responsive embed-responsive-4by3">
+                                        <canvas id="temperatureChart"></canvas>
+                                    </div>
                                 </div>
                                 <div class="col-sm-12 col-md-12 col-lg-6">
-                                    <canvas id="humidityChart"></canvas>
+                                    <div id="humidityDiv" class="embed-responsive embed-responsive-4by3">
+                                        <canvas id="humidityChart"></canvas>
+                                    </div>
                                 </div>
                             </div>`);
     if (flag) {
@@ -176,7 +189,7 @@ function generateGraph(flag, sensor, actTime) {
             tmpDataTemperature.push(tmp.currentTemp);
             tmpDataHumidity.push(tmp.currentHum);
 
-            var lineColor = getRandomColor();
+            var lineColor = getColor(index);
             dataTemperature.push({label: sensorTabName + " " + tmp.id, data: tmpDataTemperature, fill: false,
                 borderWidth: 3, borderColor : lineColor,});
             dataHumidity.push({label: sensorTabName + " " + tmp.id, data: tmpDataHumidity, fill: false,
@@ -205,14 +218,19 @@ function generateGraph(flag, sensor, actTime) {
         tmpDataHumidity.push(sensor.currentHum);
 
         var dataTemperature = [{label: temperatureLabel, data: tmpDataTemperature,
-                                fill: false, borderWidth: 3, borderColor: '#337ab7',}];
+                                fill: false, borderWidth: 3, borderColor: singleChartTempColor,}];
         var dataHumidity = [{label: humidityLabel, data: tmpDataHumidity,
-                                fill: false, borderWidth: 3, borderColor: '#337ab7',}];
+                                fill: false, borderWidth: 3, borderColor: singleChartHumidColor,}];
     }
 
-    var tempCtx = $('#temperaturChart');
+    var tempCtx = $('#temperatureChart');
     var humCtx = $('#humidityChart');
 
+    //tempCtx.attr('width', $('#temperatureDiv').width());
+    //tempCtx.attr('height', $('#temperatureDiv').height());
+    //humCtx.attr('width', $('#humidityDiv').width());
+    //humCtx.attr('height', $('#humidityDiv').height());
+
     var tempChart = new Chart(tempCtx, {
         type: 'line',
         data: {
@@ -223,7 +241,10 @@ function generateGraph(flag, sensor, actTime) {
             title: {
                 display: true,
                 text: temperatureHeading
-            }
+            },
+            responsive: true,
+            maintainAspectRatio: true,
+            scaleOverride: true
         }
     });
 
@@ -237,7 +258,10 @@ function generateGraph(flag, sensor, actTime) {
             title: {
                 display: true,
                 text: humidityHeading
-            }
+            },
+            responsive: true,
+            maintainAspectRatio: true,
+            scaleOverride: true
         }
     });
 }
@@ -247,6 +271,14 @@ Number.prototype.mod = function(n) {
     return ((this%n)+n)%n;
 }
 
+function getColor(index) {
+    if (index < preDefinedColors.length) {
+        return preDefinedColors[index];
+    } else {
+        return getRandomColor();
+    }
+}
+
 function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';

template.html

@@ -19,13 +19,13 @@
             crossorigin="anonymous"
             defer>
         </script>
-        <script src="view.js" defer>
-        </script>
         <link rel="stylesheet"
             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
             integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
             crossorigin="anonymous">
         <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="view.js" defer>
+        </script>
         <link rel="icon" href="favicon.ico" type="image/x-icon">
     </head>
     <body>
@@ -33,15 +33,23 @@
             /* %% INSERT_CLIENT_LIST_HERE %% */
         </script>
 
-        <div id="main-part" class="container-fluid">
+        <div id="main-part" class="container">
             <div class="page-header">
-                <h2>ESP-Weather</h2>
+                <h2>ESP-Weather <small>v2</small></h2>
             </div>
         </div>
         <div class="footer">
-            <div class="container-fluid">
-                <p class="text-muted">
-                    &copy; Copyright 2016 by Christian H&ouml;gerle und Thomas Buck
+            <div class="container">
+                <p class="text-muted text-center">
+                    &copy; Copyright 2016 by Christian H&ouml;gerle and Thomas Buck
+                    <br>
+                    <small>
+                        <small>
+                            <a href="https://github.com/xythobuz/ESP-Weather">
+                                ESP-Weather is free software!
+                            </a>
+                        </small>
+                    </small>
                 </p>
             </div>
         </div>

test.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>ESP-Weather</title>
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
+                integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+                crossorigin="anonymous"
+                defer>
+        </script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+            crossorigin="anonymous"
+            defer>
+        </script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"
+            integrity="sha256-RASNMNlmRtIreeznffYMDUxBXcMRjijEaaGF/gxT6vw="
+            crossorigin="anonymous"
+            defer>
+        </script>
+        <link rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+            crossorigin="anonymous">
+        <link rel="stylesheet" href="client-style.css" type="text/css">
+        <script src="client-script.js" defer>
+        </script>
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>
+    <body>
+        <script type="text/javascript">
+            var clients = Array('192.168.0.173');
+        </script>
+
+        <div id="main-part" class="container">
+            <div class="page-header">
+                <h2>ESP-Weather <small>v2</small></h2>
+            </div>
+            <div class="row" id="contentDiv">
+            </div>
+        </div>
+        <div class="footer">
+            <div class="container">
+                <p class="text-muted text-center">
+                    &copy; Copyright 2016 by Christian H&ouml;gerle and Thomas Buck
+                    <br>
+                    <small>
+                        <small>
+                            <a href="https://github.com/xythobuz/ESP-Weather">
+                                ESP-Weather is free software!
+                            </a>
+                        </small>
+                    </small>
+                </p>
+            </div>
+        </div>
+    </body>
+</html>
+