jQuery Plugins Home

HeatColor, a jQuery plugin

What is it?
Examples
Download
Usage Specs
History
Contact

   

What is it?

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element.  The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a "heat" color based on its derived value's position within the range.

You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work.

It can find the min and max values of the desired elements, or you can pass them in manually.

Examples

Each example is followed by the code used in the example.

Example 1: Passing in table rows, used in conjunction with the tablesorter plugin.
Click on a column heading to resort. Loads up sorted on HR column.
Note: tablesorter doesn't appear to work in IE6, so IE6 will give some funky results.

Player G AB R H 2B 3B HR RBI TB BB SO SB CS OBP SLG AVG
A Rodriguez
158 583 143 183 31 0 54 156 376 95 120 24 4 .422 .645 .314
C Pena
148 490 99 138 29 1 46 121 307 103 142 1 0 .411 .627 .282
D Ortiz
149 549 116 182 52 1 35 117 341 111 103 3 1 .445 .621 .332
J Thome
130 432 79 119 19 0 35 96 243 95 134 0 1 .410 .563 .275
P Konerko
151 549 71 142 34 0 31 90 269 78 102 0 1 .351 .490 .259
J Morneau
157 590 84 160 31 3 31 111 290 64 91 1 1 .343 .492 .271
J Dye
138 508 68 129 34 0 28 78 247 45 107 2 1 .317 .486 .254
T Hunter
160 600 94 172 45 1 28 107 303 40 101 18 9 .334 .505 .287
M Ordonez
157 595 117 216 54 0 28 139 354 76 79 4 1 .434 .595 .363
V Guerrero
150 574 89 186 45 1 27 125 314 71 62 2 3 .403 .547 .324
A Beltre
149 595 87 164 41 2 26 99 287 38 104 14 2 .319 .482 .276
J Cust
124 395 61 101 18 1 26 82 199 105 164 0 2 .408 .504 .256
F Thomas
155 531 63 147 30 0 26 95 255 81 94 0 0 .377 .480 .277
V Martinez
147 562 78 169 40 0 25 114 284 62 76 0 0 .374 .505 .301
H Matsui
143 547 100 156 28 4 25 103 267 73 73 4 2 .367 .488 .285
G Sheffield
133 494 107 131 20 1 25 75 228 84 71 22 5 .378 .462 .265
T Hafner
152 545 80 145 25 2 24 100 246 102 115 1 1 .385 .451 .266
A Rios
161 643 114 191 43 7 24 85 320 55 103 17 4 .354 .498 .297
G Sizemore
162 628 118 174 34 5 24 78 290 101 155 33 10 .390 .462 .277
B Upton
129 474 86 142 25 1 24 82 241 65 154 22 8 .386 .508 .300
$("#ex1").tablesorter();

function sortwithcolor( column ) {
	$("#ex1 > tbody > tr").heatcolor(
		function() { return $("td:nth-child(" + column + ")", this).text(); }
	);
};

$("th").click(function() {
	$(this).siblings().css("background-color","#cccccc").end().css("background-color","#dd0000");
	sortwithcolor( $(this).parent().children().index( this ) + 1 );
});

sortwithcolor(8);


Example 2: 10-point rating system

$("div.row").each(function() {
	$("div", this).heatcolor(
		function() {
			return $(this).parent().children().index( this[0] ) + 1;
		},
		{ maxval: 10, 
		minval: 1, 
		colorStyle: 'greentored',
		lightness: 0.3 }
	);
});

Example 3: Using list elements - using value attribute of list elements, green to red color style

How much do you love cotton candy?

$("#ex2 li").heatcolor(
	function() { 
	// 'this' will refer to current li element
	return $(this).attr("value"); },
	{ 
		lightness: 0.3,
		colorStyle: 'greentored'
	}
);


Example 4: Divs, using reverse order (normally highest would be green, lowest red when using greentored colorstyle)
Also uses maxval and minval passed in rather than calculated

1
2
3
6
14


$("#ex3 div").heatcolor(
	function() { return $(this).text(); },
	{	lightness: 0,
		colorStyle: 'greentored',
		maxval: 15,
		minval: 1,
		reverseOrder: true
	}
);

Download

Download jquery.heatcolor.0.0.1.js (6K)
Download jquery.heatcolor.0.0.1.pack.js (2K)

Usage

$("selector").heatcolor( valueFunction[function], options[map] );

param type required? default description example
valueFunction function yes -- Function to return the value to be evaluated within a range. Looks within context of currently iterating element. function() { return $("td:nth-child(10)",this).text(); } // would return text of 10th column of current row, if table rows passed in
options map no Set optional parameters
param type default description example
elementFunction Function

{ return $(this);
}

return element to color function() { return $("td:nth-child(1)") } // would return first td in row if rows passed in
maxval Number null Maximum value in range - if not passed in, will be calculated automatically 100
minval Number null Minimum value in range - if not passed in, will be calculated automatically 1
lightness Number between 0 and 0.9 0.75 sets lightness of color-
0 is darkest, 0.9 is lightest
0.6
colorStyle String 'roygbiv' style of coloring - possible values 'roygbiv' or 'greentored' 'greentored'
reverseOrder Boolean false By default the values will be colored highest to lowest; set this to true to color lowest to highest true

History

Version 0.0.1 released November 29, 2007


Contact

Questions, comments? joshnathanson at gmail dot com