Added files

2023-09-12 21:49:15 +01:00
parent e9f79defce
commit 6b2c0d0d36
11 changed files with 20269 additions and 0 deletions
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ping Results</title>
+    
+    <script src="/cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
+    <script src="/cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <link rel="stylesheet" href="/code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <script src="/code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <!-- Include jQuery UI Timepicker addon -->
+    <link rel="stylesheet" href="/cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">
+    <script src="/cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
+</head>
+<body>
+    <h1>Ping Results</h1>
+    <div>
+        Start Date & Time: <input type="text" id="startDate">
+        End Date & Time: <input type="text" id="endDate">
+        <button id="applyFilterButton">Apply Filter</button>
+    </div>
+    <canvas id="pingChart" width="800" height="400"></canvas>
+    <script>
+        $(document).ready(function () {
+            // Initialize date pickers with time picker addon
+            $("#startDate").datetimepicker({
+                dateFormat: "yy-mm-dd",
+                timeFormat: "HH:mm:ss"
+            });
+            $("#endDate").datetimepicker({
+                dateFormat: "yy-mm-dd",
+                timeFormat: "HH:mm:ss"
+            });
+
+            $.ajax({
+                type: "GET",
+                url: "ping_data.csv", // Replace with the path to your CSV file
+                dataType: "text",
+                success: function (data) {
+                    processData(data);
+                }
+            });
+
+            // Attach click event handler to Apply Filter button
+            $("#applyFilterButton").click(function () {
+                applyDateFilter();
+            });
+        });
+
+        let labels = [];
+        const datasets = {}; // Store datasets for each IP
+        let chart = null; // Declare a variable to store the Chart instance
+
+        function processData(csvData) {
+            const rows = csvData.split('\n');
+
+            for (let i = 1; i < rows.length; i++) {
+                const columns = rows[i].split(',');
+                const timestampStr = columns[0]; // Timestamp in "YYYY-MM-DD HH:MM:SS" format
+                const ip = columns[1];
+
+                if (!datasets[ip]) {
+                    // Create a new dataset for the IP address
+                    datasets[ip] = {
+                        label: `Response Time (ms) - ${ip}`,
+                        data: [],
+                        borderColor: getRandomColor(), // Function to generate random colors
+                        borderWidth: 1,
+                        fill: false
+                    };
+                }
+
+                const responseTime = parseFloat(columns[2]);
+                const formattedTimestamp = formatTimestamp(timestampStr); // Format timestamp
+
+                labels.push(formattedTimestamp);
+                datasets[ip].data.push(responseTime);
+            }
+
+            createChart(labels, Object.values(datasets));
+        }
+
+        function formatTimestamp(timestampStr) {
+            const timestamp = new Date(timestampStr);
+            return timestamp.toLocaleString(); // Format as date and time
+        }
+
+        function applyDateFilter() {
+            // Get selected start and end date/time
+            const startDate = $("#startDate").datetimepicker("getDate");
+            const endDate = $("#endDate").datetimepicker("getDate");
+
+            // Filter data based on selected date range
+            const filteredLabels = [];
+            const filteredDatasets = {};
+
+            labels.forEach((label, index) => {
+                const timestamp = new Date(label);
+
+                if (timestamp >= startDate && timestamp <= endDate) {
+                    filteredLabels.push(label);
+
+                    // Copy the datasets for IPs within the selected date range
+                    Object.keys(datasets).forEach((ip) => {
+                        if (!filteredDatasets[ip]) {
+                            filteredDatasets[ip] = { ...datasets[ip] };
+                            filteredDatasets[ip].data = [];
+                        }
+
+                        filteredDatasets[ip].data.push(datasets[ip].data[index]);
+                    });
+                }
+            });
+
+            // Update the chart with filtered data
+            updateChart(filteredLabels, Object.values(filteredDatasets));
+        }
+
+        function createChart(labels, datasets) {
+            const ctx = document.getElementById('pingChart').getContext('2d');
+            chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: datasets
+                },
+                options: {
+                    scales: {
+                        x: {
+                            type: 'category', // Use category scale for date and time labels
+                            position: 'bottom', // Position x-axis at the bottom
+                            title: {
+                                display: true,
+                                text: 'Timestamp (Date + Time)'
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Response Time (ms)'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        function updateChart(labels, datasets) {
+            if (chart) {
+                chart.destroy();
+            }
+            createChart(labels, datasets);
+        }
+
+        function getRandomColor() {
+            const letters = '0123456789ABCDEF';
+            let color = '#';
+            for (let i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
+            }
+            return color;
+        }
+    </script>
+</body>
+</html>
+