JSFiddle - React, Tailwind, and code Playground

by cespinoza

HTML

<script src="http://humblesoftware.com/static/js/flotr2.min.js"></script>
  <div id="container"></div>
    <!--[if IE]>
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->

CSS

body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
      }

JavaScript

(function () {

        var
          container = document.getElementById('container'),
          start = (new Date).getTime(),
          data, graph, offset, i;

        // Draw a sine curve at time t
        function animate (t) {

          data = [];
          offset = 2 * Math.PI * (t - start) / 10000;
            
        d = new Date(),
        tz = d.getTimezoneOffset();
        jsonUrl = 'http://date.jsontest.com/'
        jsonUrlLocal = '200.27.222.3/json'
        var array2 = []
         $.getJSON(jsonUrl, function(data) {
            var i = 0;
            $.each(data, function(key, val) {
                if (typeof val === 'number'){
                    d = new Date(val - 5 * 60 * 1000);
                    array2.push([d.getTime()- tz*60*1000,Math.random()]);
                    console.log(array2)
                    i++;
                    }
                });
         });
            
            
            
          // Sample the sine function
          for (i = 0; i < 4 * Math.PI; i += 0.2) {
            data.push([i, Math.sin(i - offset)]);
          }
            console.log(data)
          // Draw Graph
          graph = Flotr.draw(container, [ data ], {
            yaxis : {
              max : 2,
              min : -2
            }
          });

          // Animate
          setTimeout(function () {
            animate((new Date).getTime());
          }, 5000);
        }

        animate(start);
      })();