HeatMap integration

More
3 years 3 months ago #122752 by david2013
david2013 created the topic: HeatMap integration
Did anyone successfully integrate any heatmap tool (ie. heatmap.js, clickheat) into LimeSurvey without using iframe? Heatmap.js looks very cool. I want to display an image and allow people to click on it. Then save the coordiantes into open end question. Once project is done, I can load all the coordiantes into the image to generate the heatmap.

Does anyone done it before? Any help is appreciated

Please Log in or Create an account to join the conversation.

More
3 years 3 months ago #122790 by tpartner
tpartner replied the topic: HeatMap integration
The heatmap isn't something you would do within LimeSurvey but to capture the coordinates of a click on an image (presumably in relative percentages), you could place something like this in the source of a short-text question. When the image is clicked, the script places a marker at that position and loads the coordinates (comma separated) into the text input. The text input can be hidden by uncommenting line 8 of the script.

Question 1:<br /><br />
<div class="image-wrapper" style="border:2px solid #999; width: 600px;">
	<img src="http://www.google.com/logos/doodles/2015/fifa-womens-world-cup-2015-finals-5184884003831808-hp2x.jpg" style="border:0 none; width: 100%; height: auto;" />
</div>
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function() {	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Hide the text input - uncomment below
		//$('input.text', thisQuestion).hide();
 
		// Create the click "marker"
		$('.image-wrapper', thisQuestion).append('<div class="click-marker" />');
		var leftVal = 0;
		var topVal = 0;
		var displayVal = 'none';
		if($.trim($('input.text', thisQuestion).val()) != '') {
			leftVal = $.trim($('input.text', thisQuestion).val()).split(',')[0]+'%';
			topVal = $.trim($('input.text', thisQuestion).val()).split(',')[1]+'%'; 
			displayVal = 'block';
		}
		$('.click-marker', thisQuestion).css({
			'display': displayVal,
			'position': 'absolute',
			'left': leftVal,
			'top': topVal,
			'margin': '-10px 0 0 -10px',
			'width': '18px',
			'height': '18px',
			'-moz-border-radius': '10px',
			'-webkit-border-radius': '10px',
			'border-radius': '10px',
			'background': '#0C0',
			'border': '1px solid #090'
		});
 
		// Insert an overlay to click on
		$('.image-wrapper', thisQuestion).css('position', 'relative').append('<div class="click-overlay" />');
		$('.click-overlay', thisQuestion).css({
			'position': 'absolute',
			'left': 0,
			'top': 0,
			'margin': 0,
			'width': $('.image-wrapper', thisQuestion).width()+'px',
			'height': $('.image-wrapper', thisQuestion).height()+'px'
		});
 
		// Click event on the overlay
		$('.click-overlay', thisQuestion).click(function(e) {
			var thisWidth = $(this).width();
			var thisHeight = $(this).height();
			var posX = $(this).offset().left;
			var posY = $(this).offset().top;
			var xCoord = e.pageX - posX;
			var yCoord = e.pageY - posY;
			var xCoordPercent = (xCoord/thisWidth)*100;
			var yCoordPercent = (yCoord/thisHeight)*100;
 
			// Load the click coordinates (as relative percentages)
			$('input.text', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2));
 
			// Reposition the marker
			$('.click-marker', thisQuestion).css({
				'display': 'block',
				'left': xCoordPercent+'%',
				'top': yCoordPercent+'%'
			});
		});
 
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: david2013

Please Log in or Create an account to join the conversation.

More
3 years 3 months ago #122904 by david2013
david2013 replied the topic: HeatMap integration
Thank you very much for your help. Just curious, why convert xCoord and yCoord into percentages (xCoordPercent and yCoordPercent)? What's the advantage?

Please Log in or Create an account to join the conversation.

More
3 years 3 months ago #122906 by tpartner
tpartner replied the topic: HeatMap integration
There's no advantage in the data, I just assumed you would need relative coordinates for the heat map.

They are, however, needed to position the marker in case of resizing.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!