Calendar heatmap visualization is derived from traditional heat map visualization where the data is plotted on Calendar. Calendar heatmap can be plotted in a way such that, month can be used as a column, days as a row and data points being a data with different colors or shades of color. Calendar heatmap can be a good visualization to display time series data varying across time. According to Google's definition of calendar heatmap visualization, it is used to show activity/transaction over a long period of time, say months or years. It can be useful to display activity trends over time.
Let's now learn what information can be derived from Calendar heatmap visualization, and then, we will look at the implementation of this visualization on the Splunk dashboard.
The data used for this visualization is the test data from the web server. It has the time and count of any failed transaction. The statistical data used to create calendar heatmap is described in the subsections that follow.
The search query for calendar heatmap visualization is as follows:
|inputcsv Calender.csv | table _time Failed_Transaction
The output of the preceding search query is shown in the following screenshot:
Now, we will plot this data on calendar heatmap visualization to derive useful insight from the data by just looking at it. The calendar heatmap for the preceding data is shown as follows:
In the preceding calendar heatmap visualization, the failed transactions are plotted over every hour range, and different shades of green color are used to plot the data on the calendar map. The ranges and color legend is available in the lower-left corner of the visualization. On hovering the mouse on the legend, you can see the range of the selected color.
On hovering the mouse pointer over any of the boxes of the calendar heatmap, you can see the number of failed transactions (678 as in the preceding screenshot) and the exact time. Similarly, in the preceding visualization, different shades are seen. The darker shades depict a greater number of failed transactions. So, by looking at this visualization, defined business actions can be taken to avoid unnecessary issues. This kind of visualization will be beneficial to plot the information of 1 month or year and take corrective business decisions.
Now, let's learn how we can create a calendar heatmap visualization on the Splunk dashboard. The following steps are required for calendar visualization implementation:
- Similar to geospatial and punchcard visualization, the
CalenderHeatMapdirectory from the downloaded app'sstaticfolder is copied to the respective app'sstaticdirectory where calendar heatmap visualization is to be implemented. The JS (calendarheatmap.js) and CSS (calendarheatmap.css) files from the directory can be used without any modifications, unless any customization is required in the visualization. - The dashboard in which calendar heatmap visualization is to be shown is modified to include
autodiscover.js:<dashboard script="autodiscover.js">
- The following is the sample code that needs to be added in the panel section of the XML source of the dashboard where this visualization is required. The important parameters that need to be changed as per the data and specific user requirement are marked in the following screenshot:
- In the preceding code, the search query, path of the JS and CSS files (
data-require), search ID, manager ID, and time domain need to be customized per user needs. The preceding code will result in the calendar heatmap chart as shown in the Example section of Calendar heatmap.