Time series, zoomable

author(s): Torstein Hønsi

by Christian Sonne

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Highcharts has extensive support for time series, and will adapt
        intelligently to the input data. Click and drag in the chart to zoom in
        and inspect the data.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

(async () => {
		const rawData = [
    {
        "timestamp": "2024-09-18T09:10:33.389Z",
        "maxMemoryUsed": 148,
        "duration": 2220
    },
    {
        "timestamp": "2024-09-18T09:12:24.187Z",
        "maxMemoryUsed": 159,
        "duration": 945
    },
    {
        "timestamp": "2024-09-18T10:43:46.956Z",
        "maxMemoryUsed": 154,
        "duration": 2216
    },
    {
        "timestamp": "2024-09-18T11:06:54.872Z",
        "maxMemoryUsed": 155,
        "duration": 2197
    },
    {
        "timestamp": "2024-09-18T12:03:40.106Z",
        "maxMemoryUsed": 188,
        "duration": 3078
    },
    {
        "timestamp": "2024-09-18T12:20:52.151Z",
        "maxMemoryUsed": 175,
        "duration": 3066
    },
    {
        "timestamp": "2024-09-18T12:52:19.159Z",
        "maxMemoryUsed": 224,
        "duration": 2531
    },
    {
        "timestamp": "2024-09-18T12:59:05.258Z",
        "maxMemoryUsed": 159,
        "duration": 2121
    },
    {
        "timestamp": "2024-09-18T13:06:25.824Z",
        "maxMemoryUsed": 168,
        "duration": 2297
    },
    {
        "timestamp": "2024-09-18T13:26:04.584Z",
        "maxMemoryUsed": 157,
        "duration": 2111
    },
    {
        "timestamp": "2024-09-18T13:54:10.297Z",
        "maxMemoryUsed": 166,
        "duration": 2715
    },
    {
        "timestamp": "2024-09-18T13:54:12.121Z",
        "maxMemoryUsed": 220,
        "duration": 3348
    },
    {
        "timestamp": "2024-09-18T14:50:57.964Z",
        "maxMemoryUsed": 192,
        "duration": 2764
    },
    {
        "timestamp": "2024-09-18T14:52:37.017Z",
        "maxMemoryUsed": 221,
        "duration": 1799
    },
    {
        "timestamp": "2024-09-18T15:02:49.004Z",
        "maxMemoryUsed": 159,
        "duration": 2222
    },
    {
        "timestamp": "2024-09-18T15:06:50.106Z",
        "maxMemoryUsed": 217,
        "duration": 7447
    },
    {
        "timestamp": "2024-09-18T15:15:22.472Z",
        "maxMemoryUsed": 147,
      ...