// chart
var chart
var chartData, chartOptions
var data;

data = [
    ['Time', 'Event'],
    [new Date(), 10]
]

chartOptions = {}
chartOptions.title = 'Network readings'
chartOptions.curveType == 'function'
chartOptions.legend = { position: 'bottom' }
chartOptions.colors = ['red']
chartOptions.backgroundColor = 'black'

chartOptions.legend = { textStyle: { color: 'white' } }
chartOptions.titleTextStyle = { color: 'white' }
chartOptions.hAxis = { textStyle: { color: 'white' }, titleTextStyle: { color: 'white' }, format: 'mm:ss' }
chartOptions.vAxis = { textStyle: { color: 'white' }, titleTextStyle: { color: 'white' } }

google.charts.load('current', { 'packages': ['corechart'] })
google.charts.setOnLoadCallback(drawChart)

function drawChart() {
    chartData = google.visualization.arrayToDataTable(data)

    chart = new google.visualization.LineChart(document.getElementById('chart'))

    chart.draw(chartData, chartOptions)
}

// socket.io
var socket = io('localhost:3000')
var delays = []

socket.on('message', function (message) {
    var now = new Date().getTime()

    delays.push(now - message.gateway_time)

    var average_delay = delays.reduce((sum, a) => sum + a, 0) / delays.length

    var text = '[' + message.port + ' / ' + message.id_mote + '] temperature: ' + message.value

    $('#events').append($('<li>').text(text))
    $('#average-delay').text(average_delay.toFixed(0) + 'ms')

    // push to chart
    data.push([new Date(), message.value])

    if (data.length > 15) {
        let header = data[0]
        
        data.shift()
        data.shift()
        data.unshift(header)
    }

    drawChart()
})
@@ -1077,17 +1077,98 @@
 tTime()%0A
-%0A
+    var text = ''%0A    var average_delay = 0;%0A%0A    if (message.gateway_time) %7B%0A    
     dela
@@ -1203,24 +1203,23 @@
 y_time)%0A
-%0A
     
-var
+   
  average
@@ -1281,24 +1281,156 @@
 .length%0A
-%0A
+  
     
-var
+  $('#average-delay').text(average_delay.toFixed(0) + 'ms')%0A    %7D%0A%0A    if (message.port && message.id_mote && message.value) %7B%0A       
  text = 
@@ -1510,17 +1510,20 @@
 e.value%0A
-%0A
+    
     $('#
@@ -1568,88 +1568,62 @@
     
-$('#average-delay').text(average_delay.toFixed(0) + 'ms')%0A%0A    // push to chart%0A
+%7D%0A%0A    // push to chart%0A    if (message.value) %7B%0A%0A    
     
@@ -1662,16 +1662,20 @@
 alue%5D)%0A%0A
+    
     if (
@@ -1702,16 +1702,20 @@
         
+    
 let head
@@ -1727,24 +1727,25 @@
 data%5B0%5D%0A
+%0A
         
 %0A       
@@ -1736,21 +1736,16 @@
         
-%0A    
     data
@@ -1753,32 +1753,36 @@
 shift()%0A        
+ 
+   
 data.shift()%0A   
@@ -1770,32 +1770,36 @@
    data.shift()%0A
+    
         data.uns
@@ -1811,23 +1811,31 @@
 header)%0A
+    
     %7D%0A%0A
+    
     draw
@@ -1842,10 +1842,17 @@
 Chart()%0A
+    %7D%0A%0A
 %7D)

add null checking