Colorize Numeric Values In Table Columns - Column HeatMap

Column HeatMap is a jQuery plugin to make your data table more readable by applying different background colors to table cells based on values in specific columns.

Ideal for creating a table-based heatmap to represent data where different values are represented as different colors.

See Also:

• Highlight Largest/Lowest Value In Each Row Or Column - tableMinMax
• Auto Colorize Elements Based On Their Values - jQuery ColorizeJS
• Visual Tabular Data Comparison Plugin - jQuery Table Compare
• Highlight Table Cells Based On Predefined Content - tableCellColorizer

How To Use It:

1. Load the minified version of the Column HeatMap plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/columnHeatmap.min.js"></script>

2. Call the function columnHeatmap on your HTML table and determine the column index(zero-based) where you want to calculate & compare values.

<table id="table">
  <thead>
    <tr>
      <th>Month</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$240</td>
    </tr>
  </tbody>
</table>

$('#table').columnHeatmap({
  columns: [1] // required
});

3. Determine whether to dynamically change the text color based on background. Default: true.

$('#table').columnHeatmap({
  columns: [1] // required
  contrast: false
});

4. Determine whether to revert colors. Default: false.

$('#table').columnHeatmap({
  columns: [1] // required
  inverse: true
});

5. Specify the starting point for HSL colors (0-360).

$('#table').columnHeatmap({
  columns: [1] // required
  colorStartPoint: 155
});

6. Determine whether to apply a smooth transition effect to colorized values. Default: true.

$('#table').columnHeatmap({
  columns: [1] // required
  animated: true,
  animationSpeed: .1
});

7. The plugin also provides a custom function to parse cell values.

$('#table').columnHeatmap({
  columns: [1] // required
  fn_parseValue: function(cell_value){
    cell_value = 1;
    return cell_value;
  }
});

Changelog:

2023-04-13

• Bugfix

---

This awesome jQuery plugin is developed by PauloAK. For more Advanced Usages, please check the demo page or visit the official website.