Get Free Trial
List of all demos

Highlight trends in your data and show what matters most using a heat map.


    var colorScheme = [
      "#DF3800",
      "#FF6D1E",
      "#FF9900",
      "#FFB600",
      "#A5CE31",
      "#6CBD05",
      "#00A45A"
    ]
    
    var minValue = 0;
    var maxValue = 15000;
    
    function customizeCellFunction(cell, data) {
      if (data && data.type == "value" && !data.isGrandTotal) {
        let backgroundColor = getColorFromRange(data.value);
        let textShadowColor = tinycolor(backgroundColor).darken(15).toString();
        let borderColor = tinycolor(backgroundColor).darken(3).toString();
        cell.style["background-color"] = backgroundColor;
        cell.style["color"] = "white";
        cell.style["font-weight"] = "bold";
        cell.style["text-shadow"] = `0px 2px 3px ${textShadowColor}`;
        cell.style["border-bottom"] = `1px solid ${borderColor}`;
        cell.style["border-right"] = `1px solid ${borderColor}`;
      }
    }
    
    function getColorFromRange(value) {
      if (isNaN(value)) {
        value = minValue;
      }
      value = Math.max(minValue, Math.min(value, maxValue));
      var perc = (minValue + value) / maxValue;
      var colorIdx = Math.round((colorScheme.length - 1) * perc);
      return colorScheme[colorIdx];
    }
    
    var pivot = new Flexmonster({
      container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      width: "100%",
      height: 600,
      toolbar: true,
      customizeCell: customizeCellFunction,
      report: {
        dataSource: {
          filename: "data/sales.csv"
        },
        slice: {
          rows: [{
            uniqueName: "Month"
          }, {
            uniqueName: "[Measures]"
          }],
          columns: [{
            uniqueName: "Category",
            levelName: "Product Name",
            filter: {
              members: [
                "category.[condiments].[bbq sauce]",
                "category.[breakfast cereals].[corn flakes]",
                "category.[confectionery]",
                "category.[bakery].[chocolate biscuits]",
                "category.[fruit preserves].[apple jam]",
                "category.[bakery].[apple cake]",
                "category.[soups].[tomato soup]"
              ]
            }
          }],
          measures: [{
            "uniqueName": "Revenue",
            "aggregation": "sum"
          }]
        },
        formats: [{
          name: "",
          decimalPlaces: 2,
          currencySymbol: "$"
        }]
      }
    });
    
    <div id="pivot-container"></div>
    

    To build the heat map, define a color scale, and change cell coloring based on their values — it is easy to do with Flexmonster API. Refer to our blog post to find out more details on how to create a heat map and apply it to your business data. We have got you covered there.

    Refer to the Customizing the grid guide to try more ways to customize the pivot table: alternate row colors, represent numbers by icons, add hyperlinks to cells, and more.