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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<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>


Output


Library : https://vega.github.io/vega/examples/heatmap/

Checkout complete video below
 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 

Post a Comment

0 Comments