[Chartjs]-How to get Uptime charts for Web Monitoring like Dynatrace?

by

2👍

✅

Can be done using visavail.js library. From the description:

The Visavail.js chart allows a quick insight into which periods of time a time-dependent dataset covers. It is visually similar to a Gantt chart and allows easy identification of missing pieces and gaps in large datasets. Missing periods of data are marked in red while blocks of complete periods of data are marked in green. The user discovers dates that define start and end of such periods by tooltips, as shown in the picture below.

Preview
[…] The Visavail.js library takes single data points with dates and information about data availability as inputs, combines them into time blocks, and visualizes these blocks.

The dataset should be in the following format:

var dataset = [{
"measure": "Series", // name of the data series, will become y-axis label
"measure_description": "Description", // description of y-axis label, visible with mouse over
"interval_s": 1800, // time period in seconds a single data point is expected to cover (30 minutes in your example)
"data": [
    ["2021-03-08 00:08:46", 1],// data as arrays of period start data string and bit determining
    ["2021-03-08 00:38:46", 0],
    ["2021-03-08 01:08:46", 1],
    ["2021-03-08 01:38:46", 0],
    ["2021-03-08 02:08:46", 1],
    ["2021-03-08 02:38:46", 0],
    ["2021-03-08 03:08:46", 1],
    ["2021-03-08 03:38:46", 0],
    ["2021-03-08 04:08:46", 1],
    ["2021-03-08 04:38:46", 0],
    ["2021-03-08 05:08:46", 1],
    ["2021-03-08 05:38:46", 0],
    ["2021-03-08 06:08:46", 1],
    ["2021-03-08 06:38:46", 0],
    ["2021-03-08 07:08:46", 1],
    ["2021-03-08 07:38:46", 0],
    ["2021-03-08 08:08:46", 1],
    ["2021-03-08 08:38:46", 0],
    ["2021-03-08 09:08:46", 1],
    ["2021-03-08 09:38:46", 0],
    ["2021-03-08 10:08:46", 1],
    ["2021-03-08 10:38:46", 0]
   ]
}];

In the following links you can see several examples of how to use the library CodeSandbox Demo.

Leave a comment