Project Description

This is a simple project using C#, ASP.NET, JQuery, and heatmap.js that allows you to create a heatmap for a web page using static data from a SQL database.

How it Works


All client clicks are recorded in a hidden multiline textbox field. Upon page unload (button click, browser close, etc...), an AJAX call is made to a webservice to which all click coordinates are passed. The webservice connects then inserts the coordinates into the database table. Some buttons and a textbox have been added to the Default.aspx for demonstration purposes.


Upon loading this page the x and y coordinates recorded on the default.aspx page are retrieved from the T_HeatMapCoordinates database table and passed to the heatmap.js script for plotting. In order to plot the heatmap overlay on an image, simply take a screen shot of the web page that you want to overlay the plots on, add it to your project directory, and reference it in the #heatmaparea ID of style.css. 

For more information on heatmap.js, please visit

Feature Plans for Future Releases

1. Display click counts when the user mouses over a plotted point.

2. Track mouse and thus eye movement.

3. Count page unloads (passed to the web service each time the unload event is called) in order to gather load/unload statistics.

Last edited Jun 22, 2012 at 5:15 PM by jbates, version 12