256 Kilobytes

Answers in Client-Side | By August R. Garcia

Published 6 days agoTue, 08 Oct 2019 18:56:14 -0700 | Last update 6 days agoTue, 08 Oct 2019 19:08:22 -0700

36 views, 0 RAMs, and 0 comments

Tags: JavaScript, Colors, Conditional Formatting

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 191 🗨 943 🐏 286
Site Owner

Here's some code. However, this code is fairly slow on large tables (adds roughly 50-150 milliseconds for 190 rows of four columns). Probably usuable if either performance is improved, execution is done behind the scenes with some magic, or there is a smaller HTML table.

<table id="demo_color_scale">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Val 1</th>
      <th>Val 2</th>
      <th>Val 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td                         >Data</td>
      <td class="auto-color-scale">  100</td>
      <td class="auto-color-scale">   56</td>
      <td class="auto-color-scale">   12</td>
    </tr>
    <tr>
      <td                         >Data</td>
      <td class="auto-color-scale">  54</td>
      <td class="auto-color-scale">    1</td>
      <td class="auto-color-scale"> 12.5</td>
    </tr>
    <tr>
      <td                         >Data</td>
      <td class="auto-color-scale">  100</td>
      <td class="auto-color-scale">   75</td>
      <td class="auto-color-scale">   82</td>
    </tr>
    <tr>
      <td                         >Data</td>
      <td class="auto-color-scale">   44</td>
      <td class="auto-color-scale">   75</td>
      <td class="auto-color-scale">   12</td>
    </tr>
  </tbody>
</table>
<script>
// Blend two hex colors together by an amount. Example: 
// console.log(blendColors('#00FF66', '#443456', 0.5));
// https://stackoverflow.com/questions/6367010/average-2-hex-colors-together-in-javascript  
function blendColors(colorA, colorB, amount) {
  const [rA, gA, bA] = colorA.match(/\w\w/g).map((c) => parseInt(c, 16));
  const [rB, gB, bB] = colorB.match(/\w\w/g).map((c) => parseInt(c, 16));
  const r = Math.round(rA + (rB - rA) * amount).toString(16).padStart(2, '0');
  const g = Math.round(gA + (gB - gA) * amount).toString(16).padStart(2, '0');
  const b = Math.round(bA + (bB - bA) * amount).toString(16).padStart(2, '0');
  return '#' + r + g + b;
}


// TODO - Apply color scale to specified columns  
function apply_color_scale_to_html_table(query_selector) {  

        // Select (first match for) the query selector 
        let table   = document.querySelector(query_selector);    

        // Get maximum value in range  
        let min_val = 0; 

        // Get minimum value in range 
        let max_val = 100; 

        // The distance between min_val and max_val  
        let range   = max_val - min_val; 

        // The colors to use for the gradient starting at the lowest and highest values   
        //let low_hex  = "#00FF66" ; 
        //let high_hex = "#443456" ; 

        // ===== Light/bright colors ===== //  
        //let low_hex  = "#FF4545" ; // Red     
        //let low_hex  = "#FFFF45" ; // Yellow      
        //let low_hex  = "#FFE445" ; // Orange       
        //let high_hex = "#45FF45" ; // Green  

        // ===== Dark Colors ===== //  
        let low_hex  = "#AA4415" ; // Orange       
        let high_hex = "#15AA15" ; // Green  

        // Get all of the table cells 
        let cells   = table.querySelectorAll( "td.auto-color-scale" ); 

        for (iii = 0; iii < cells.length; ++iii) {
                let cell = cells[iii]            ;    

                // The text in the cell with leading/trailing whitespce removed     
                let val  = cell.innerText.trim() ; 

                // Remove commas (for example, 250,000 should be 250000)   
                // TODO - Is this necessary (?)  
                val = val.replace(/,/g, "");  

                // If the cell is numeric (and also not an empty cell)  
                if (  !isNaN(val)  &&   val != ""  )  { 
                        // FIXME - Floats 
                        val = parseInt(val);   

                        percent_in_range = val / range;

                        //color = blendColors(low_hex, high_hex, 0.5); 
                        color                      = blendColors(low_hex, high_hex, percent_in_range); 

                        // Concatenate an alpha/opacity value onto the hex color. Ex: #00FF00 --> #00FF0084  
                        color += "84";     

                        cell.style.backgroundColor = color;                   
                        //cell.style.color      =  color; 
                } 
        }  
} 
apply_color_scale_to_html_table("#demo_color_scale"); 
</script> 

Demo of Color Scale with JavaScript

Col 1 Val 1 Val 2 Val 3
Data 100 56 12
Data 54 1 12.5
Data 100 75 82
Data 44 75 12
Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 6 days ago

Edit History

• [2019-10-08 18:56 PDT] August R. Garcia (6 days ago)
• [2019-10-08 18:56 PDT] August R. Garcia (6 days ago)
• [2019-10-08 18:56 PDT] August R. Garcia (6 days ago)
• [2019-10-08 18:56 PDT] August R. Garcia (6 days ago)
🕓 Posted at 08 October, 2019 18:56 PM PDT

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.