JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="chart"></div>

JavaScript

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

    var greenhouse = []
    
    for (x = 0; x < 100; x++){
        greenhouse[x] = {DateTime:{Hour:null, Minute:null},Temperature:null}
         greenhouse[x].DateTime.Hour = x+1
         greenhouse[x].DateTime.Minute = 0
         greenhouse[x].Temperature = Math.round((Math.random()*5)*10)/10;
    };

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number','Hour');
        data.addColumn('number', 'Temperature');
        for (i = 0; i < greenhouse.length; i++) {
            data.addRow([greenhouse[i].DateTime.Hour,greenhouse[i].Temperature]);
        }

        var options = {
            'title': 'Daily Report for Humidity',
            'width': 600,
            'height': 500
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
        chart.draw(data, options);
    }