Skip to content

Instantly share code, notes, and snippets.

@dansleboby

dansleboby/read.html

Created January 5, 2025 17:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dansleboby/68b93c34fad8d6e23bd65068f05be84d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dansleboby/68b93c34fad8d6e23bd65068f05be84d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dansleboby created this gist Jan 5, 2025.
    168 changes: 168 additions & 0 deletions read.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,168 @@
    <!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>