Section 12: Configuring a Heatmap

NOTE: Heatmaps highlight values of numbers relative to their position within a range. The numbers are arranged in a tabular display, and colors are assigned to the respective cells based on the value within the cell. Two colors are assigned to the extremes of a range. Depending on where each value falls relative to the limits of the range, a shading is created from a proportional mix of the colors, and is used as the background of the cell.

When Completed

Your NetCharts Designer perspective will appear like this:
 
heatmap

Getting Started

Start by closing any open editors. Go to NetCharts Designer’s File menu and select the Close All option.
 
Next, create a new project named HeatmapProject..

Create the Dataset

From the toolbar click on the Create a New Dataset wizard. Name your new dataset data, select Hypersonic SQL from the Data Sources list, and click Next.
 
heatmap
 
Enter the following query:

SELECT Month, “Server 1 Hits” FROM PAGEHITTABLE

into the SQL: text box in the SQL Parameters group. Select the date format MMM-yy from the Date Format pull down menu in the General group. Two columns of data will be returned:
 
heatmap

Create the Heatmap

Now that we have created our dataset the next step is to create the heatmap. From the toolbar click on the New Chart icon. Call it Heatmap, select Heatmap for the type,
 
heatmap
 
Click Finish.

Bind Data to the Heatmap

Now we must bind our data that we created in Step 1 to our heatmap Chart. Select the Data Source Binding tab and under the Data tree control select Heatmap Values. Choose data.ndx as your Data Source. Select Column 1 for the HeatmapValues and click the Select Rows button.
 
heatmap
 
Next select Heatmap Labels from the Data tree control, choose data.ndx as the Data Source. Select column 0 for the Heatmap Labels and click the Select Rows button.
 
heatmap

Additional Style

In the Presentation tab under the Heatmap Chart tree control add a Chart title of Server 1 Hits, and create a style named chartTitle with 12 pt Arial Bold. Select the Cell Colors tree node and change the value of Color 1 to green and Color 2 to red. Uncheck the use Default for Min and Max and enter 2000 for the Min value and 8000 for the Max value.
 
heatmap