How to get Uptime charts for Web Monitoring like Dynatrace?

user_15327033 0
Viewed 338

PROBLEM STATEMENT

Hello Guys. I am new to Web Development. I am working on a project that involves showing uptime charts of certain websites for website monitoring. The kind of chart needed is as follows:

Uptime Chart

As we can see, it's a time series chart and in the same chart the successful calls to the site are in green and the unsuccessful ones are shown in red. My problem is I am unable to get this in the same chart. So can someone tell me what has to be done ? I am currently using Chart.js for showing realtime charts on the webpage.

Methods Tried Let's say my time series dummy dataset looks like this:

data: [
        { x: "2021-03-08 00:08:46", y: 1 },
        { x: "2021-03-08 00:38:46", y: 0 },
        { x: "2021-03-08 01:08:46", y: 1 },
        { x: "2021-03-08 01:38:46", y: 0 },
        { x: "2021-03-08 02:08:46", y: 1 },
        { x: "2021-03-08 02:38:46", y: 0 },
        { x: "2021-03-08 03:08:46", y: 1 },
        { x: "2021-03-08 03:38:46", y: 0 },
        { x: "2021-03-08 04:08:46", y: 1 },
        { x: "2021-03-08 04:38:46", y: 0 },
        { x: "2021-03-08 05:08:46", y: 1 },
        { x: "2021-03-08 05:38:46", y: 0 },
        { x: "2021-03-08 06:08:46", y: 1 },
        { x: "2021-03-08 06:38:46", y: 0 },
        { x: "2021-03-08 07:08:46", y: 1 },
        { x: "2021-03-08 07:38:46", y: 0 },
        { x: "2021-03-08 08:08:46", y: 1 },
        { x: "2021-03-08 08:38:46", y: 0 },
        { x: "2021-03-08 09:08:46", y: 1 },
        { x: "2021-03-08 09:38:46", y: 0 },
        { x: "2021-03-08 10:08:46", y: 1 },
        { x: "2021-03-08 10:38:46", y: 0 } 
      ]

What I tried is separating the 1's and 0's and in the same chart showing the 1's in green and 0's in red having value as 1. My code from chart.js looks like this:

var ctx = document.getElementById("myChart");
ctx.height = 500;
ctx.width = 500;
var data = {
  datasets: [
    {
      fill: true,
      label: "Completed",
      borderColor: "#4BB543",
      backgroundColor: "#4BB543",
      borderColor: "#4BB543",
      data: [
        { x: "2021-03-08 00:08:46", y: 1 },
        { x: "2021-03-08 01:08:46", y: 1 },
        { x: "2021-03-08 02:08:46", y: 1 },
        { x: "2021-03-08 03:08:46", y: 1 },
        { x: "2021-03-08 04:08:46", y: 1 },
        { x: "2021-03-08 05:08:46", y: 1 },
        { x: "2021-03-08 06:08:46", y: 1 },
        { x: "2021-03-08 07:08:46", y: 1 },
        { x: "2021-03-08 08:08:46", y: 1 },
        { x: "2021-03-08 09:08:46", y: 1 },
        { x: "2021-03-08 10:08:46", y: 1 },
      ],
    },
    {
      fill: true,
      label: "Issues",
      borderColor: dangerColor,
      backgroundColor: "#FF0000",
      borderColor: "#FF0000",
      data: [
        { x: "2021-03-08 00:38:46", y: 1 },
        { x: "2021-03-08 01:38:46", y: 1 },
        { x: "2021-03-08 02:38:46", y: 1 },
        { x: "2021-03-08 03:38:46", y: 1 },
        { x: "2021-03-08 04:38:46", y: 1 },
        { x: "2021-03-08 05:38:46", y: 1 },
        { x: "2021-03-08 06:38:46", y: 1 },
        { x: "2021-03-08 07:38:46", y: 1 },
        { x: "2021-03-08 08:38:46", y: 1 },
        { x: "2021-03-08 09:38:46", y: 1 },
        { x: "2021-03-08 10:38:46", y: 1 },
      ],
    },
  ],
};

var lineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          type: "time",
          time: {
            unit: "hour",
          },
          display: true,
          scaleLabel: {
            display: true,
            labelString: "Time",
          },
          ticks: {
            major: {
              fontStyle: "bold",
              fontColor: "#FF0000",
            },
          },
        },
      ],
      yAxes: [
        {
          display: true,
          scaleLabel: {
            display: true,
            labelString: "Response Time(s)",
          },
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
    maintainAspectRatio: false,
    bezierCurve: false,
  },
});

Here's how my output chart looks like: Obtained Chart using the code

As we can see the green is overpowering the red. I tried with other shades of green but the results are still not good. Please take a look and let me know how can make the uptime chart as the one shown in the first image. Thanks.

chart.js css html javascript
1 Answers

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.

user_83628220
Related