3.2.0

Conditional Font Color (RAG-Concept)

Hi All,

I'm trying to interpret the percental utilization in a column as basis for the font color of the same column. The result should be a dynamic color spectrum from green (0%) to red (100%). The arithmetic calculation of the color HEX-Code is no big deal, but I'm lacking the proper code to assign it as font color to the last column in the table.

In the current version of my source code, I've writte the HEX color to the 2nd column for debugging purposes:

<html>
<head>
<title>ActiveWidgets Examples</title>
<style>body {font: 1ppx Tahoma}</style>
<script src="testaw/aw.js"></script>
<link href="testaw/aw.css" rel="stylesheet"></link>
<style>
#myGrid {height: 200px; width: 500px;}
#myGrid .aw-row-selector {text-align: center}
#myGrid .aw-column-0 {text-align: left;}
#myGrid .aw-column-1 {text-align: left;}
#myGrid .aw-column-2 {text-align: right;}
#myGrid .aw-column-3 {text-align: right;}
#myGrid .aw-column-4 {text-align: right;}
#myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}
</style>
</head>
<body>
<script>
var myCells = [
["2007-05-13","23:49:49",170,55],
["2007-05-13","23:55:33",170,53],
["2007-05-14","00:13:37",170,52],
["2007-05-14","07:13:55",210,59],
["2007-05-14","14:55:22",170,77]
];

var obj = new AW.UI.Grid;
var columns = ["Date", "Time", "Available", "In-Use", "Utilization"];
var string = new AW.Formats.String;
var int = new AW.Formats.Number;
var float = new AW.Formats.Number;
float.setTextFormat("###.## %");
obj.setId("myGrid");
obj.setColumnCount(5);
obj.setRowCount(5);
obj.setHeaderText(columns);
obj.setCellFormat([string, string, int, int, float]);
obj.setCellData(myCells);
function sum(column,row){ return this.getCellValue(3, row) / this.getCellValue(2, row) * 100; }
obj.setCellData(sum, 4);

function hexco(column,row){ util = parseInt ( this.getCellValue(3, row) / this.getCellValue(2, row) * 255 ) ; utilneg = 255 - util ; red = utilneg.toString(16) ; green = util.toString(16) ; return "#" + red + green + "00" ; }
obj.setCellData(hexco,1);
obj.getCellTemplate(4).setStyle("color","blue") ;

document.write(obj);

</script>
</body>
</html>


Has anybody got an idea what's necessary to solve this problem? Thank you for any kind of reply
Greg
May 14,
Hi all,

a further forum search revealed a new approach to this problem. Someone suggested to perform the color assignment in a for-loop, and voila, it works:

function myColor(available,inuse){util=parseInt(inuse/available*255);utilneg=255-util;red=util.toString(16);if(util<=16)red="0"+red;green=utilneg.toString(16);if(utilneg<=16)green="0"+green;return "#"+red+green+"00";}
for(x=0;x<obj.getRowCount();x++){obj.getCellTemplate(4,x).setStyle("color",myColor(obj.getCellText(2,x),obj.getCellText(3,x)));}

Maybe this thread saves other users from tearing their hair ;-).
Greg
May 14,
Modifying each cell template in a loop might be quite slow. Instead you could define a new calculated cell property ('color') and link the cell template style to it, see the example here -

http://www.activewidgets.com/javascript.forum.19446.1/setting-a-cell-to-a.html
Alex (ActiveWidgets)
May 14,

This topic is archived.

See also:


Back to support forum