JSFiddle - React, Tailwind, and code Playground

by abelkbil

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id='chart_div' style='width:100%;'></div>

JavaScript

google.charts.load('current', {'packages':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);
      var start=now = new Date();
      start= new Date(new Date().getTime() - (2 * 60 * 60 * 1000));

      var chart ;
      var data; 
      function drawChart() {
        chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
        data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Performance');
        data.addColumn({type: 'string', role:'annotation'});
        data.addColumn({type: 'string', role: 'style'});

         // create a DataView of the data to highlight special annotations
        // var view = new google.visualization.DataView(data);
        // view.setColumns([0, 1, {
        //     // this series only includes the non-special annotations
        //     type: 'string',
        //     role: 'annotation',
        //     calc: function (dt, row) {
        //         return (dt.getValue(row, 3)) ? null : dt.getValue(row, 2);
        //     }
        // }]);


        while(start < now){
          var s = new Date(start);
          s.setSeconds(s.getSeconds() + 60);
          start = s.getTime();

          data.addRows([
            [new Date(start), Math.floor((Math.random() * 100) + 90),'','']
          ]);
        }

        
        
        var options = {
          displayAnnotations: false,
          hAxis: {
            //viewWindowMode:'explicit',
            minValue: new Date(start),
            maxValue: new Date(now),
            //max:120
          }
        };

        chart.draw(data, options);
        //google.visualization.events.addListener(chart, 'select', selectionHandler);
         function updateChart(){
          now = new Date();
          start= new Date(new Date().getTime() - (2 * 60 * 60 * 1000));


          data.addRows([
              [new Date(), Math.floor((Math.random() * 120) + 90),'dasd','line...