dansleboby · January 5, 2025 17:05
diff --git a/read.html b/read.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Memory Usage Over Time</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        function humanFileSize(bytes, si=false, dp=1) {
            const thresh = si ? 1000 : 1024;

            if (Math.abs(bytes) < thresh) {
                return bytes + ' B';
            }

            const units = si
                ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
                : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
            let u = -1;
            const r = 10**dp;

            do {
                bytes /= thresh;
                ++u;
            } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);


            return bytes.toFixed(dp) + ' ' + units[u];
        }
    </script>
 </head>
 <body>
    <div id="container"></div>

    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "output_tests.csv",
                dataType: "text",
                success: function (data) {
                    var lines = data.split('\n');
                    var seriesDataCurrent = [];
                    var seriesDataPeak = [];
                    var passIds = []; // Array to store pass IDs

                    for (var i = 0; i < lines.length; i++) {
                        var values = lines[i].split(',');
                        if (values.length >= 5) {
                            var passId = values[0]; // Get the pass ID
                            var microtime = parseFloat(values[1]);
                            var timestamp = microtime * 1000;
                            seriesDataCurrent.push([timestamp, parseInt(values[3])]);
                            seriesDataPeak.push([timestamp, parseInt(values[4])]);
                            passIds.push(passId); // Store the pass ID
                        }
                    }

                    Highcharts.stockChart('container', {
                        rangeSelector: {
                            buttons: [{
                                type: 'millisecond',
                                count: 500,
                                text: '0.5s'
                            }, {
                                type: 'second',
                                count: 1,
                                text: '1s'
                            }, {
                                type: 'second',
                                count: 2,
                                text: '2s'
                            }, {
                                type: 'second',
                                count: 3,
                                text: '3s'
                            },
                             {
                                type: 'all',
                                text: 'All'
                            }],
                            selected: 2
                        },
                        title: {
                            text: 'Memory Usage Over Time'
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: {
                                millisecond: '%H:%M:%S.%L',
                                second: '%H:%M:%S',
                                minute: '%H:%M',
                                hour: '%H:%M',
                                day: '%e. %b',
                                week: '%e. %b',
                                month: '%b \'%y',
                                year: '%Y'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'Memory Usage'
                            },
                            labels: {
                                formatter: function () {
                                    return humanFileSize(this.value);
                                }
                            }
                        },
                        tooltip: {
                            shared: true,
                            valueDecimals: 2,
                            formatter: function () {
                                var points = this.points;
                                var s = '<b>' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</b><br/>';

                                points.forEach(function (point) {
                                    s += '<span style="color:' + point.series.color + '">\u25CF</span> ' + point.series.name + ': <b>' + humanFileSize(point.y) + '</b><br/>';
                                });

                                return s;
                            }
                        },
                        legend: { // Add the legend options
                            enabled: true, // Enable the legend
                            align: 'center', // Align the legend to the center
                            verticalAlign: 'bottom', // Position the legend at the bottom
                            layout: 'horizontal' // Arrange items horizontally
                        },
                        series: [{
                            name: 'Current Memory',
                            data: seriesDataCurrent,
                            type: 'line' // Use line instead of spline
                        }, {
                            name: 'Peak Memory',
                            data: seriesDataPeak,
                            type: 'line' // Use line instead of spline
                        }],
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: false
                                }
                            }
                        }
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Error loading CSV: " + textStatus);
                }
            });
        });
    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Memory Usage Over Time</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://code.highcharts.com/stock/highstock.js"></script>
	<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
	<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
	<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	}
	#container {
	width: 100%;
	height: 100%;
	}
	</style>
	<script>
	function humanFileSize(bytes, si=false, dp=1) {
	const thresh = si ? 1000 : 1024;

	if (Math.abs(bytes) < thresh) {
	return bytes + ' B';
	}

	const units = si
	? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
	: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
	let u = -1;
	const r = 10**dp;

	do {
	bytes /= thresh;
	++u;
	} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);


	return bytes.toFixed(dp) + ' ' + units[u];
	}
	</script>
	</head>
	<body>
	<div id="container"></div>

	<script>
	$(document).ready(function () {
	$.ajax({
	type: "GET",
	url: "output_tests.csv",
	dataType: "text",
	success: function (data) {
	var lines = data.split('\n');
	var seriesDataCurrent = [];
	var seriesDataPeak = [];
	var passIds = []; // Array to store pass IDs

	for (var i = 0; i < lines.length; i++) {
	var values = lines[i].split(',');
	if (values.length >= 5) {
	var passId = values[0]; // Get the pass ID
	var microtime = parseFloat(values[1]);
	var timestamp = microtime * 1000;
	seriesDataCurrent.push([timestamp, parseInt(values[3])]);
	seriesDataPeak.push([timestamp, parseInt(values[4])]);
	passIds.push(passId); // Store the pass ID
	}
	}

	Highcharts.stockChart('container', {
	rangeSelector: {
	buttons: [{
	type: 'millisecond',
	count: 500,
	text: '0.5s'
	}, {
	type: 'second',
	count: 1,
	text: '1s'
	}, {
	type: 'second',
	count: 2,
	text: '2s'
	}, {
	type: 'second',
	count: 3,
	text: '3s'
	},
	{
	type: 'all',
	text: 'All'
	}],
	selected: 2
	},
	title: {
	text: 'Memory Usage Over Time'
	},
	xAxis: {
	type: 'datetime',
	dateTimeLabelFormats: {
	millisecond: '%H:%M:%S.%L',
	second: '%H:%M:%S',
	minute: '%H:%M',
	hour: '%H:%M',
	day: '%e. %b',
	week: '%e. %b',
	month: '%b \'%y',
	year: '%Y'
	}
	},
	yAxis: {
	title: {
	text: 'Memory Usage'
	},
	labels: {
	formatter: function () {
	return humanFileSize(this.value);
	}
	}
	},
	tooltip: {
	shared: true,
	valueDecimals: 2,
	formatter: function () {
	var points = this.points;
	var s = '<b>' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</b><br/>';

	points.forEach(function (point) {
	s += '<span style="color:' + point.series.color + '">\u25CF</span> ' + point.series.name + ': <b>' + humanFileSize(point.y) + '</b><br/>';
	});

	return s;
	}
	},
	legend: { // Add the legend options
	enabled: true, // Enable the legend
	align: 'center', // Align the legend to the center
	verticalAlign: 'bottom', // Position the legend at the bottom
	layout: 'horizontal' // Arrange items horizontally
	},
	series: [{
	name: 'Current Memory',
	data: seriesDataCurrent,
	type: 'line' // Use line instead of spline
	}, {
	name: 'Peak Memory',
	data: seriesDataPeak,
	type: 'line' // Use line instead of spline
	}],
	plotOptions: {
	series: {
	marker: {
	enabled: false
	}
	}
	}
	});
	},
	error: function (jqXHR, textStatus, errorThrown) {
	alert("Error loading CSV: " + textStatus);
	}
	});
	});
	</script>

	</body>
	</html>