168 lines
6.0 KiB
HTML
Executable File
168 lines
6.0 KiB
HTML
Executable File
<!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>
|
|
|