Minor error on Metrics Graphs on Safari

ErnestOrt · Aug 10, 2017 · 49b7ed5 · 49b7ed5
1 parent cf9e6c7
commit 49b7ed5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 26 deletions.
diff --git a/trampoline/src/main/resources/static/js/backend.requests.js b/trampoline/src/main/resources/static/js/backend.requests.js
@@ -1,3 +1,4 @@
+var metricsCharts;
 function setMavenBinaryLocation(){
 	if($("#input-mavenbinarylocation").val() == ''){
 		$("#form-group-mavenbinarylocation").addClass("has-error");
@@ -114,31 +115,23 @@ function showMetrics(instanceId, name, port){
                   dataMemoryFree.push(value.freeMemoryKB);
                   usedHeapKB.push(value.usedHeapKB)
                 });
-                var ctx = document.getElementById('myChart').getContext('2d');
-                new Chart(ctx, {
-                // The type of chart we want to create
-                type: 'line',
-
-                // The data for our dataset
-                data: {
-                    labels: dates,
-                    datasets: [{
-                        label: "Memory Free KB",
-                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
-                        borderColor: 'rgba(255, 99, 132, 1)',
-                        data: dataMemoryFree,
-                    },
-                    {
-                        label: "Heap Used KB",
-                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
-                        borderColor: 'rgba(54, 162, 235, 1)',
-                        data: usedHeapKB,
-                    }]
-                },
-
-                // Configuration options go here
-                options: {}
-            });
+                metricsCharts.config.data = {
+                                              labels: dates,
+                                              datasets: [{
+                                                  label: "Memory Free KB",
+                                                  backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                                                  borderColor: 'rgba(255, 99, 132, 1)',
+                                                  data: dataMemoryFree,
+                                              },
+                                              {
+                                                  label: "Heap Used KB",
+                                                  backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                                                  borderColor: 'rgba(54, 162, 235, 1)',
+                                                  data: usedHeapKB,
+                                              }]
+                                          }
+
+              metricsCharts.update();
     	    }
     	});
 }
@@ -199,4 +192,30 @@ setInterval(updateStatusInstances, 15000);
 
 $( document ).ready(function() {
 	updateStatusInstances();
+
+	var ctx = document.getElementById('myChart').getContext('2d');
+    metricsCharts = new Chart(ctx, {
+        // The type of chart we want to create
+        type: 'line',
+
+        // The data for our dataset
+        data: {
+            labels: [],
+            datasets: [{
+                label: "Memory Free KB",
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                data: [],
+            },
+            {
+                label: "Heap Used KB",
+                backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                borderColor: 'rgba(54, 162, 235, 1)',
+                data: [],
+            }]
+        },
+
+        // Configuration options go here
+        options: {}
+    });
 });
diff --git a/trampoline/src/main/resources/templates/home.html b/trampoline/src/main/resources/templates/home.html
@@ -196,7 +196,7 @@ <h4>
 				<div class="modal-header">
 					<h4 class="modal-title"><span id="metrics-title"></span></h4>
 				</div>
-				<div class="modal-body">
+				<div class="modal-body" id="#canvas-wrapper">
 					<canvas id="myChart" width="400" height="400"></canvas>
 				</div>
 				<div class="modal-footer">