jadudm/devices_per_hour.html

## devices_per_hour.html
<!DOCTYPE html>
<html lang = "en">
   <head>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.2/dist/chart.min.js"></script>
   </head>

   <body>
        <canvas id="chart01" width="400" height="400"></canvas>

        <script>
            // I would like to count how many devices are present every hour of the day.
            // This suggests counting how many devices have
            //      a start that is less than or equal to the current hour, AND
            //      an end that is greater than or equal to the current hour
            async function get_count_per_hour (fscs_id, sensor_id, day, hour) {
                const base_uri = "http://127.0.0.1:3000/presences";
                var time = day + "T" + hour + ":00:00";
                var conjunction = ("and=(start_time.lte." + time
                    + ",end_time.gte." + time
                    + ",fscs_id.eq." + fscs_id
                    + ",sensor_id.eq." + sensor_id.toString()
                    + ")"
                    );
                var query = base_uri + "?" + conjunction;
                console.log(query);
                const search = async () => {
                    const response = await fetch(query);
                    var json = await response.json();
                    return json;
                }

                var json = await search();
                return json.length;
            }


            (async function(){
                var counts = []
                for (hour = 0 ; hour < 24 ; hour++) {
                    counts[hour] = await get_count_per_hour("AA0003-001", 1, "2022-05-11", hour);
                }
                console.log(counts);
                draw_hist(counts)
            })();
        </script>

        <script>
            function draw_hist(data) {
                const ctx = document.getElementById('chart01');
                const myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                        datasets: [{
                            label: 'Devices per hour',
                            data: data,
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        </script>
   </body>
</html>
	<!DOCTYPE html>
	<html lang = "en">
	<head>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.2/dist/chart.min.js"></script>
	</head>

	<body>
	<canvas id="chart01" width="400" height="400"></canvas>

	<script>
	// I would like to count how many devices are present every hour of the day.
	// This suggests counting how many devices have
	// a start that is less than or equal to the current hour, AND
	// an end that is greater than or equal to the current hour
	async function get_count_per_hour (fscs_id, sensor_id, day, hour) {
	const base_uri = "http://127.0.0.1:3000/presences";
	var time = day + "T" + hour + ":00:00";
	var conjunction = ("and=(start_time.lte." + time
	+ ",end_time.gte." + time
	+ ",fscs_id.eq." + fscs_id
	+ ",sensor_id.eq." + sensor_id.toString()
	+ ")"
	);
	var query = base_uri + "?" + conjunction;
	console.log(query);
	const search = async () => {
	const response = await fetch(query);
	var json = await response.json();
	return json;
	}

	var json = await search();
	return json.length;
	}


	(async function(){
	var counts = []
	for (hour = 0 ; hour < 24 ; hour++) {
	counts[hour] = await get_count_per_hour("AA0003-001", 1, "2022-05-11", hour);
	}
	console.log(counts);
	draw_hist(counts)
	})();
	</script>

	<script>
	function draw_hist(data) {
	const ctx = document.getElementById('chart01');
	const myChart = new Chart(ctx, {
	type: 'bar',
	data: {
	labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
	datasets: [{
	label: 'Devices per hour',
	data: data,
	borderWidth: 1
	}]
	},
	options: {
	scales: {
	y: {
	beginAtZero: true
	}
	}
	}
	});
	}
	</script>
	</body>
	</html>