mourner / simpleheat

A tiny JavaScript library for drawing heatmaps with Canvas

Home Page:http://mourner.github.io/simpleheat/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Help to better understand how to show the heatmap

FulvioSpelta opened this issue · comments

Hi all, i'm trying to use the library to show data from a matrix PIR temperature sensor that give me a 8x8 temperature matrix.

I've done a simple page to show the values and added a custom gradient in order to show a legend too; the result is this one:
image
image

This is the gradient:

var myGradientHeat = {
	0.0:	'black',
	0.2: 'blue',
	0.4: 'cyan',
	0.6: 'lime',
	0.8: 'yellow',
	1.0: 'red'
};

Fake data has been used to show series from min to max and check the gradient.
Heatmap is drawn settuing Maxvalue as max value in the series and minOpacity at 5%

The matter is that i suppose to see the entire gradient, to be clear: i aspect to see black points where the point's value is min (0 for this series) and red point at max.

I see that points that have values from half to max have color that more or less follow the gradient (legend) but moving towards min value the point's color differ from gradient and they become transparent.

Question: is this an expected behavior or not ? Is there a method to achieve my goal to show all the point following the gradient?

Thank you very much for the help.

I would guess 'minOpacity' set to '1' should solve this, based on documentation, but haven't gotten this library to work at all for me yet.