README
Implementation Non English decimal points Alternative scale value Foreground color changes
javascript tables

MFColumnGradient

MFColumnGradient is a simple javaScript class that will adjust the background colors of a table column based on the value compared to the column range, similar to that seen in Excel Conditional Formatting Color Scales.

Implementation

To implement, simply include the .js file

html
<script src='https://www.methodfish.com/Download/MFColumnGradient/files/1.0/js/mf-column-gradient.js'></script>

Have a table on your webpage:

A65
B66
C67
D68

html
<script src='https://methodfish.com/Download/MFColumnGradient/files/1.0/js/mf-column-gradient.js'></script>

then call the following javaScript to tell the class to adjust the background colors from #005500 (lowest) to #00FF00 (highest) values.

js
window.addEventListener('load',function() {
    const colN=2; // columns start at 0 (so 2 is the third column)
    const lowValueCol='#005500';
    const highValueCol='#00FF00';
    const tableId='myTable';
    
    const gradient = new MFColumnGradient(tableId, lowValueCol, highValueCol);
    gradient.setColumnGradient(colN);
});

Resulting in

A65
B66
C67
D68


Non English decimal points

By default, the class will read all values in the nth column and will ignore "%" or "," characters to detect the number. If the numbers use "," as the decimal place (and "." as the thousands separator), then you can adjust the javascript call setDecimalPlaceChar(chr) to indicate an alternative decimal place character:

js
window.addEventListener('load',function() {    
    const gradient = new MFColumnGradient('myTable', '#005500', '#00FF00');
    gradient.setDecimalPlaceChar(',');
    gradient.setColumnGradient(2);
});


Alternative scale value

For row cells that might want to change a color based on something other than that see visible on the cell, you can use the data-cgvalue attribute to override what is used internal getValue process.

html
<table>
  <thead>
     <tr><th>A</th><th>B</th></tr>
   </thead>
   <tbody>
     <tr><td>a1</td><td data-cgvalue='10'>Ten</td></tr>
     <tr><td>a2</td><td data-cgvalue='20'>Twenty</td></tr>
   </tbody>
</table>

Foreground color changes

To automatically change the color of the foreground of the cells being changed, switching from black to white when the background goes over a 50% darkness, use the doAutoForeground argument:

js
window.addEventListener('load',function() {
    const lightBgCol = 'black'; // light background color
    const darkBgCol = 'white'; // dark background color
    const gradient = new MFColumnGradient('myTable', '#005500', '#00FF00');
    gradient.setAutoForeground(lightBgCol, darkBgCol);
    gradient.setColumnGradient(2);
});

See https://jsfiddle.net for an editable demo.


link Click to view a demo

square

About

License

Latest Release

Version 1.02024-05-08

Also see

articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare

Comments

New Comment

NOTE: (Put code blocks in [[[ and ]]] markup to be formatted.)

(Posted comments will be checked by the administrator before being published)



PrivacyCookies