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
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,