Time series, zoomable

author(s): Torstein Hønsi

by Yuriy Bablyukh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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">

    </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;
}

JavaScript

const allData =[
    [
        1652077835668,
        90.24,
        3899.43,
        686.52,
        930.55,
        2123.69,
        2471.79
    ],
    [
        1652078532621,
        87.52,
        4287.3,
        864.18,
        1121.57,
        2524.79,
        3175.09
    ],
    [
        1652078830482,
        87.52,
        4287.3,
        864.18,
        1121.57,
        2524.79,
        3175.09
    ],
    [
        1652079023503,
        88.47,
        4180.03,
        736.21,
        961.99,
        1972.25,
        2940.11
    ],
    [
        1652079135865,
        93.35,
        3240.48,
        677.68,
        868.86,
        1803.38,
        2157.15
    ],
    [
        1652079501546,
        88.15,
        3054.56,
        742.15,
        831.6,
        1659.59,
        1878.69
    ],
    [
        1652079659216,
        87.16,
        3512.82,
        739.11,
        926.18,
        2008.22,
        2241.57
    ],
    [
        1652080388865,
        100.61,
        4592.28,
        1028.23,
        1120.01,
        2304.83,
        3608.22
    ],
    [
        1652082502771,
        93.53,
        2747,
        763.91,
        840.82,
        1854.41,
        2158.59
    ],
    [
        1652082749836,
        93.21,
        3115.26,
        741.05,
        847.16,
        1690.49,
        2027.38
    ],
    [
        1652084242676,
        87.52,
        4287.3,
        864.18,
        1121.57,
        2524.79,
        3175.09
    ],
    [
        1652085120137,
        92.34,
        3758.66,
        813.3,
        1081.32,
        2458.28,
        2909.75
    ]
]
const averages = [],
  minimum = [],
  maximum = [],
  median = [],
  p90 = [],
  p95 = [];
allData.forEach(el => {
  averages.push([el[0], el[4]]);
  minimum.push([el[0], el[1]]);
  maximum.push([el[0], el[2]]);
  median.push([el[0], el[3]]);
  p90.push([el[0], el[5]]);
  p95.push([el[0], el[6]]);
});

console.log(averages);
console.log(minimum);

Highcharts.chart('container', {
 ...