[Product] How to create a Heatmap widget?

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

This is 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 default selection is Admin, User, and Dashboard Only. 

7.  Click Apply.

8.  Proceed to configure the dataset by clicking the Datasource icon. Click + Add Dataset button and select New Layer.

9.  Select a Dataset to use.  For example: ConnectWise Tickets Statistics - Cloud

10.  Add the Columns and Filters that will satisfy your business requirements. For example, select hours_actual, date_resolved, ticket_number, and resolved_by for columns for, and filter by date_resolved in the last 14 days.

11.  Add a function for the columns, if needed. Under Column Display, click the fx icon that corresponds to the column that needs a function. 

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. 

Repeat this step for every column that needs a function.

12.  Add and set up Measure. Measures are aggregates like sum. max, avg, and count.  For example, ticket count measure.

13.  Add and set up Dimension. Dimensions are used for grouping by data).  For example, group by for Actual Hours, Date, and Resolved by.

14.  Click Save to save the setup.

15.  You can also add an Order by option for your result.  Click + Order By and select an option. 

          Choose to show the results in either ascending or descending manner by clicking the arrow in the following section of the window.

15.  Click Apply to save.

16.  Next, set up the widget Configuration.  Click the Config icon.

17.    Set the chart value results for the x-y axis:

         A. Dimension - Select an option from the drop-down menu to label the x-axis value on the chart.  For example, select Date. 

         B.  Measure - Select an option from the drop-down menu to label the y-axis value on the chart. For example, select Hours.

         C.  Label - Select a label and give it a name.  This is the specific value result shown in the chart.  For example, Ticket count by Hours.

         D.  Show Label checkbox - Tick this box to show the label results.

         E.   Min/Max Value -   Set this one up based on the Minimum and Maximum value for the results. This the basis on the color results from Red-Yellow-Green.

18.  Set up Chart view:

        F.  Orient - Set up the Heatmap Legend to Horizontal  or vertical 

        G.  Grid Top - This is the percentage distance between the chart space above.

        H.  Left Side Distance -  This is the Heatmap Legend location in the chart (right, center, or left).

         I.  Bottom Side Distance - This is the percentage distance between the chart space below.

         J   Is Total (toggle switch) -  If ON, it will calculate the Grand Total between the X and Y axis.

19. Click the Save button to save the configuration.

20.  Then, click Apply to apply all changes made to the widget.