How to Create a Heatmap Widget

The heatmap widget in the MSPbots dashboards is a graphical representation of data where values are depicted by colors (red, yellow, and green) to identify hot and cold spots in the data. These spots help determine and understand trends and behavior that are critical to business analysis and achieving goals.

An example of a heatmap widget:

To make a heatmap widget for your dashboard: 

1. Login to the MSPbots dashboard and navigate to Widgets.
2. Click the New Widget button and select the Heatmap widget type. 
   
   
3. When the Widget Builder window opens, give the widget a Name. 
   
   
4. Next, add a Description. 
5. Then, select or edit the roles that will have access to the widget. The roles selected by default are Admin, User, and Dashboard Only.
   
   
6. Click Apply.
7. Proceed to configure the dataset by clicking the Datasource icon and then the + Add Dataset button.
   
   
8. Select New Layer when the Add New Layer window opens. This action will bring up the Dataset window.
9. On the Dataset window, select a Dataset to use.  Example: ConnectWise Tickets Statistics - Cloud 
   
   
10. Add and configure the Columns and Filters according to your business requirements. For example, if you want to show the count of resolved tickets in the last 14 days, select hours_actual, date_resolved, ticket_number, and resolved_by for the columns and filter by date_resolved in the last 14 days. 
    
    
11. Add a function for the columns, if needed.
    1. Under Column Display, click the fx icon that corresponds to the column that requires a function. 
       
       
    2. Select an option for Field Formula and click Save. For example, for the hours_actual column, add a field formula to round off hours to return real hour values without a decimal.
    3. Repeat Step 11 for every column that needs a function.
       
       
12. Next, add and set up Measure. Measures are aggregates like sum, max, avg, and count. 
    
    For example, if you want to count the number of tickets, select count for Summary Type, Ticket Number for Fields, Ticket Count for Alias,
    and Number for Format Type.  Click Confirm to save this setting.
     
13. Add and set up Dimension to group data.  Example: group by Actual Hours, Date, and Resolved by. 
    
    

14. Click Save to save the setup. 
    
    To sort and order the results on the heatmap widget 

    1. Click + Order By and select an option.
       
       
    2. Sort the results by choosing to show data in either ascending or descending manner by clicking the arrow shown in the following section of the window.
       
       
    3. Click Apply to save.
       
       
15. Next, set up the widget Configuration. Click the Config icon.
    
16. Set the chart value results for the x-y axis using the following guide:
    • A - Dimension - Select an option from the drop-down menu to label the x-axis value on the chart. Example: Select Date.
    • B - Measure - Select an option from the drop-down menu to label the y-axis value on the chart. Example: Select Hours.
    • C - Label - Select a label and give it a name. This is the specific value result shown in the chart. Example: Select Ticket count by Hours.
    • D - Show Label - Tick this checkbox to show the label results.
    • E - Min/Max Value -   The value set here will be the basis for the Minimum and Maximum value for the results. This also determines the color of the results. 
      
      
17. Set up Chart view using the following guide:
    • • F - Orient - Set the Heatmap Legend to horizontal  or vertical 
      • G -Grid Top - This is the percentage distance of the chart from the margin above it.
      • H - Left Side Distance - This sets the Heatmap Legend's location on the chart. Choose right, center, or left.
      • I- Bottom Side Distance - This is the percentage distance of the chart from the margin below it.
      • J - Is Total - Turn this switch ON to get the grand total of the rows and columns (X and Y axis). 
        
        
18. Click Save to keep the configuration. 
19. Finally, click Apply to apply all changes made to the widget.