> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.omni.co/feedback

```json
{
  "path": "/showcase/visualizations/uptime-heatmaps",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Uptime heatmaps

> The code for these examples can be used in the Markdown visualization to heatmap that colors each time slot based on a percentage value.

Typically used to show the reliability of a service over time, these can be configured for different timeframes or coloring thresholds.

## Red/green uptime heatmap

This example shows the last 30 days of data, coloring any day red if the service level percentage is anything but 100%.

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/uptime-heatmap-red-green-771b5e6325eb74f3fbe2865316684383.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=278ae1a904f0ee39b0fb708df96f9705" alt="" width="760" height="708" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/uptime-heatmap-red-green-771b5e6325eb74f3fbe2865316684383.png" />

### Setup

This chart has a simple structure - the time slot and a % value for each chart you want to make. [Add column totals to the query](/analyze-explore/point-click-queries#column-totals) and change the total calculation to `average` to add the average uptime below each chart.

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/uptime-heatmap-red-green-results-1d843b45a39fdfa41dee82404e00d99a.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=4867729c26bee6bfd8af5fee5872c24b" alt="" width="1282" height="646" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/uptime-heatmap-red-green-results-1d843b45a39fdfa41dee82404e00d99a.png" />

### Example code

```html expandable theme={null}
<style>
  h3:first-of-type { margin-top: 0; }
  h3 { margin-bottom: var(--size2); }
  ul.grids {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(30, 1fr);
    gap: 2px;

    & li {
      font-size: 8px;
      background: #E93323;
      display: block;
      width: 100%;
      height: 32px;
    }
    
    & li.uptime-1 {
      background: #84C982;
    }
  }

  ul.labels {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    font-size: var(--font-xs);
    color: var(--color-text2);
  }
</style>
<h3>Service A</h3>
<ul class="grids">
{{#result}}
<li class="uptime-{{uptime_data.service_a.raw}}">&nbsp;</li>
{{/result}}
</ul>
<ul class="labels">
  <li>30 days ago</li>
  <li>Service A uptime</li>
  <li>today</li>
</ul>

<h3>Service B</h3>
<ul class="grids">
{{#result}}
<li class="uptime-{{uptime_data.service_b.raw}}">&nbsp;</li>
{{/result}}
</ul>
<ul class="labels">
  <li>30 days ago</li>
  <li>Service B uptime</li>
  <li>today</li>
</ul>

<h3>Service C</h3>
<ul class="grids">
{{#result}}
<li class="uptime-{{uptime_data.service_c.raw}}">&nbsp;</li>
{{/result}}
</ul>
<ul class="labels">
  <li>30 days ago</li>
  <li>Service C uptime</li>
  <li>today</li>
</ul>
```

## Gradient uptime heatmap

This example shows the last 30 days of data, bucketing the colors along a red to yellow to green gradient. It also adds colored text to explain the current status.

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/uptime-heatmap-gradient-7714c79792751f546deb149e8761056e.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=55f434276f6e226e44fc7a40b317cad9" alt="" width="760" height="262" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/uptime-heatmap-gradient-7714c79792751f546deb149e8761056e.png" />

### Setup

You'll need a column for the time unit, a column for the percentage measurement, and a calculation to figure out how to apply the color. The gradient in this example is bucketed into 5 possible values. Adjust the calculation for `Color tier` to control how the coloring is applied. [Add column totals to the query](/analyze-explore/point-click-queries#column-totals) and change the total calculation to `average` to add the average uptime below each chart.

Note that this example invents an uptime percentage value via a calculation.

The following table explains the query setup, including the calculation formulas.

| Col | Name                  | Description or formula                                                  | Purpose                     |
| --- | --------------------- | ----------------------------------------------------------------------- | --------------------------- |
| A   | Date                  | Time unit slot                                                          | used for drawing each box   |
| B   | Uptime (`calc_1`)     | Uptime value                                                            | 0-1 value for the time slot |
| C   | Color tier (`calc_2`) | IF(B1 > 0.75, 1, IF(B1 > 0.7, 2, IF(B1 > 0.65, 3, IF(B1 > 0.6, 4, 5)))) | Bucket-ize the uptime value |

### Example code

```html expandable theme={null}
<style>
  --l1: #76AD2D;
  --l2: #B0AB29;
  --l3: #E5A924;
  --l4: #E37F32;
  --l5: #E04345;
  
  h3 { 
    margin-block: 0 var(--size1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;

    & .status {
      font-size: var(--font-sm);
      display: none;
    }
    & .status.level-1.operational {
      display: block;
      color: var(--l1);
    }
    & .status.level-2.impacted {
      display: block;
      color: var(--l2);
    }
    & .status.level-3.impacted{
      display: block;
      color: var(--l3);
    }
    & .status.level-4.impacted, {
      display: block;
      color: var(--l4);
    }
    & .status.level-5.down {
      display: block;
      color: var(--l5);
    }
  }
  ul.uptime {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(30, 1fr);
    gap: 4px;

    & li {
      font-size: 8px;
      background: lightblue;
      display: block;
      width: 100%;
      height: 48px;
      border-radius: 2px;
    }
    
    & li.uptime-1 {
      background: var(--l1);
    }
    & li.uptime-2 {
      background: var(--l2);
    }
    & li.uptime-3 {
      background: var(--l3);
    }
    & li.uptime-4 {
      background: var(--l4);
    }
    & li.uptime-5 {
      background: var(--l5);
    }
  }

  ul.labels {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    font-size: var(--font-xs);
    color: var(--color-text2);
  }
p.notes {
  margin-top: var(--size8);
  color: var(--color-text1);
}  
</style>
<h3>Service A
  <span class="status level-{{result.29.calc_2.value}} operational">Operational</span>
  <span class="status level-{{result.29.calc_2.value}} impacted">Impacted</span>
  <span class="status level-{{result.29.calc_2.value}} down">Down</span>
</h3>
<ul class="uptime">
{{#result}}
<li class="uptime-{{calc_2.value}}">&nbsp;</li>
{{/result}}
</ul>
<ul class="labels">
  <li>30 days ago</li>
  <li>86.33 % uptime</li>
  <li>today</li>
</ul>
```