index.html


<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="smoothie.js"></script>
    <script src="socket.io.js"></script>
    <script type="text/javascript">

      var socket = io('https://broker.ants.builders');
      // var socket = io('http://localhost:4000');
      var fig = new TimeSeries();


      socket.on('data', function (data) {
        console.log("received",data)
        fig.append(data[0], data[1]);
      });

      
      function createTimeline() {
        var chart = new SmoothieChart({
          millisPerPixel:1000,
          timestampFormatter:SmoothieChart.timeFormatter,
          grid:{strokeStyle:'transparent'}
        });
        chart.addTimeSeries(fig, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
        chart.streamTo(document.getElementById("chart"), 500);
      }
    </script>
  </head>
  <body onload="createTimeline()">

    <p>Number of devices nearby:</p>

    <canvas id="chart" width="1200" height="500"></canvas>

  </body>
</html>