A panel plugin for Grafana to visualize hourly heatmaps.
An hourly heatmap aggregates data into buckets by day and hour to analyze activity or traffic during the day.
The carpet-plot panel plugin is one of the most used plugins for Grafana. Unfortunately, it's no longer being actively maintained.
Grafana 7.0 introduced a new plugin architecture based on React. Instead of migrating the original plugin from Angular, this is completely rewritten from scratch, using inspiration from the original plugin.
This section lists the available configuration options for the JSON API data source.
Option | Description |
---|---|
Time | Name of the field to use for time. Defaults to the first time field. |
Value | Name of the field to use for value. Defaults to the first number field. |
Option | Description |
---|---|
Show cell border | Toggles a cell border to make it easier to distinguish cells with similar values |
Show tooltip | Toggles the tooltip. Due to the current tooltip implementation, this severely impacts performance and I recommend that you disable this for large time intervals. For more information, refer to #12. |
From and To | Lets you choose the hours to display. This can be used to set working hours, or to filter parts of the day with low traffic |
Option | Description |
---|---|
Show legend | Toggles the color spectrum |
Show value indicator | Toggles an indicator that shows the current value in the legend |
Gradient quality | Determines the quality of the color spectrum. Higher quality means more SVG elements being drawn. Reduce the quality if you experience degraded performance. |
Option | Description |
---|---|
Group by | Size of each bucket |
Calculation | Calculation to use for reducing data within a bucket |
Color palette | Colors to use for the heatmap. Select from any of the predefined color palettes, or select Custom to create your own. Select Field options to use the colors from the built-in Color scheme field option |
Invert color palette | Inverts the currently selected color palette |
Null value color | Color to display when a bucket contains no data as opposed to a data value of 0. |
By default, data sources limits the number of data points to the width of the panel in pixels. If you're visualizing data over a long time, then you may need to adjust the Max data points under Query options in the query editor.