JSFiddle - React, Tailwind, and code Playground

by jaimem

HTML

<html>
      <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

        google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawWeekChart);
          function drawWeekChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Date');
            data.addColumn('number', 'Wave Height (Meters)');
            var tideTimes = [
                [new Date(2012, 9, 29, 05, 44, 00, 00), 9.12],
                [new Date(2012, 9, 29, 11, 47, 00, 00), 1.62],
                [new Date(2012, 9, 29, 18, 01, 00, 00), 9.23],
                [new Date(2012, 9, 30, 00, 01, 00, 00), 1.55],
                [new Date(2012, 9, 30, 06, 16, 00, 00), 9.20],
                [new Date(2012, 9, 30, 12, 16, 00, 00), 1.58],
                [new Date(2012, 9, 30, 18, 33, 00, 00), 9.21],
                [new Date(2012, 9, 31, 00, 29, 00, 00), 1.54],
                [new Date(2012, 9, 31, 06, 46, 00, 00), 9.21],
                [new Date(2012, 9, 31, 12, 45, 00, 00), 1.60],
                [new Date(2012, 9, 31, 19, 04, 00, 00), 9.12],
                [new Date(2012, 10, 01, 00, 58, 00, 00), 1.59]
            //  new Date( YYYY, MM, DD, HH, MM, SS, MS), height]
                        ];
            data.addRows(tideTimes);

            var options = {
                title: 'Tide Times',
                smoothLine: true,
                width: 984,
                height: 600,
                hAxis:  {format:'MMM d, y'}
            };

            var chart = new google.visualization.LineChart(document.getElementById('tide_chart_week'));
            chart.draw(data, options);
          }

        </script>
      </head>
      <body>
    <div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
      </body>
    </html>