Heat Map in Salesforce ☁️⚡️

By definition, Heat Maps are graphical representations of data that utilize color-coded systems. The primary purpose of Heat Maps is to better visualize the volume of locations/events within a dataset and assist in directing viewers towards areas on data visualizations that matter most. But they're much more than that.

Please follow below code

Visualforce Page

<apex:page >
    <html>
        <head>
            <script src='https://www.gstatic.com/charts/loader.js'></script>
            <script>
                google.charts.load('49', {'packages': ['vegachart']}).then(drawChart);
            
            function drawChart() {
                // A DataTable is required, but it can be empty.
                const dataTable = new google.visualization.DataTable();
                
                const options = {
                    'vega': {
                        "$schema": "https://vega.github.io/schema/vega/v5.json",
                        "width": 500,
                        "height": 500,
                        "padding": 5,
                        
                        "title": {
                            "text": "Seattle Annual Temperatures",
                            "anchor": "middle",
                            "fontSize": 16,
                            "frame": "group",
                            "offset": 4
                        },
                        
                        "data": [
                            {
                                "name": "temperature",
                                "url": "https://vega.github.io/vega/data/seattle-weather-hourly-normals.csv",
                                "format": {"type": "csv", "parse": {"temperature": "number", "date": "date"}},
                                "transform": [
                                    {
                                        "type": "formula", "as": "hour",
                                        "expr": "hours(datum.date)"
                                    },
                                    {
                                        "type": "formula", "as": "day",
                                        "expr": "datetime(year(datum.date), month(datum.date), date(datum.date))"
                                    }
                                ]
                            }
                        ],
                        
                        "scales": [
                            {
                                "name": "x",
                                "type": "time",
                                "domain": {"data": "temperature", "field": "day"},
                                "range": "width"
                            },
                            {
                                "name": "y",
                                "type": "band",
                                "domain": [
                                    //Number of rows needs to be displayed on the X access
                                    6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
                                    0, 1, 2, 3, 4, 5
                                    
                                ],
                                "range": "height"
                            },
                            {
                                "name": "color",
                                "type": "linear",
                                "range": {"scheme": "goldred"},
                                "domain": {"data": "temperature", "field": "temperature"},
                                "reverse": true,
                                "zero": false, "nice": true
                            }
                        ],
                        
                        "axes": [
                            {"orient": "bottom", "scale": "x", "domain": false, "title": "Month", "format": "%b"},
                            {
                                "orient": "left", "scale": "y", "domain": false, "title": "Hour",
                                "encode": {
                                    "labels": {
                                        "update": {
                                            "text": {
                                                "signal": "datum.value === 0 ? 'Midnight' : datum.value === 12 ? 'Noon' : datum.value < 12 ? datum.value + ':00 am' : (datum.value - 12) + ':00 pm'"
                                            }
                                        }
                                    }
                                }
                            }
                        ],
                        
                        "legends": [
                            {
                                "fill": "color",
                                "type": "gradient",
                                "title": "Avg. Temp (°F)",
                                "titleFontSize": 12,
                                "titlePadding": 4,
                                "gradientLength": {"signal": "height - 16"}
                            }
                        ],
                        
                        "marks": [
                            {
                                "type": "rect",
                                "from": {"data": "temperature"},
                                "encode": {
                                    "enter": {
                                        "x": {"scale": "x", "field": "day"},
                                        "y": {"scale": "y", "field": "hour"},
                                        "width": {"value": 5},
                                        "height": {"scale": "y", "band": 1},
                                        "tooltip": {
                                            "signal":
                                            "timeFormat(datum.date, '%b %d %I:00 %p') + ': ' + datum.temperature + '°'"
                                        }
                                    },
                                    "update": {
                                        "fill": {"scale": "color", "field": "temperature"}
                                    }
                                }
                            }
                        ]
                    }
                };
                
                const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
                chart.draw(dataTable, options);
            }
            </script>
        </head>
        
        <body>
            <div id="chart-div" style="width: 500px; height: 500px;"></div>
        </body>
        
    </html>
</apex:page>