JSFiddle - React, Tailwind, and code Playground

by enagu

HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="http://momentjs.com/downloads/moment.js"></script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

CSS

body{
  background: #222;
}

JavaScript

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

      function drawChart() {
      
        var g1 = moment("Fri Jan 11 2019 08:00:00 GMT-0300");
        var g2 = moment("Fri Jan 11 2019 08:00:00 GMT-0300");
        /* console.log(now.add(30, 'm')) */
        /* console.log(now.toDate()); */
        var data = []
        /* console.log(g1.hours()+ ":" + g1.minutes()) */
       for(var i=0; i < 1004; i++){
          g1.add(60, 'm');
          g2.add(45, 'm');
          
          var g1_h = (g1.hours()+ ":" + g1.minutes());
          var g2_h = (g2.hours()+ ":" + g2.minutes());
          if(g1_h == g2_h){
            console.log(g1_h + " vs " + g2_h, g1_h == g2_h);
         	}
        }
        /* console.log(now.valueOf()) */
        
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          backgroundColor: '#f1f8e9'
        };

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

        chart.draw(data, options);
      }