Heatmaps Using JavaScript: Part Two

Madan Bhintade
Sep 13
14k
0
1

100

Article

Heatmaps.zip

Introduction

Before getting into the details of this article, please go through my earlier article on heatmaps.

Heatmaps Using JavaScript: Part 1

Cal-HeatMap Custom Domains and Sub Domains

In our earlier example, we created a heatmap with the typical look of data shown for every month and on a daily basis using JavaScript. (Refer to below screenshot).

screenshot

To display the heatmap in the above format, we passed the domain as a month and the subdomain as day. Refer to the below screenshot from our earlier codebase.

code

Showing call volume of a service center based on Year, Month and Day ranges.

Let's consider a scenario in which we need to display the call volume of a service center across the entire year. Our decision-makers need information,such as how the service center is doing across the year and across the months.

Also they would like to see how the service center is doing within a day for every hour. To achieve these different formats, Cal-HeatMap needs to be generated using appropriate domain and subdomains values.

Now let's follow the below steps for our refined business case.

Create or update index.html using the following code.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Cal-Heatmap Samples</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
</head>

<body>
    <div class="container">
        <div class="page-header">
            <h2>Cal-HeatMap Samples</h2>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-equalizer"></span>Service Call Statistics
                        <div class="pull-right">
                            Display :
                            <select id="selDomain">
                                <option value="">None</option>
                                <option value="year">By Year</option>
                                <option value="month">By Month</option>
                                <option value="day">By Day</option>
                            </select>
                            <select id="selSubDomain">
                                <option value="">None</option>
                                <option value="month">By Month</option>
                                <option value="day">By Day</option>
                                <option value="hour">By Hour</option>
                            </select>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="heatmap-navigation">
                            <button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </button>
                            <button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs">
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </button>
                        </div>
                        <div id="cal-heatmap"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="app.js" type="text/javascript"></script>
    </div>
</body>

</html>

In the above code base, you will notice dropdowns with domain and subdomain values. Based on the selection of these domains and subdomains, a heatmap will be generated and data will be displayed accordingly.

code

Create a new app.js and copy below code to it.

$(document).ready(function() {    
    var selectedDomain;    
    var selectedSubDomain;    
    $("#selDomain").change(function() {    
        selectedDomain = $(this).find(':selected').val();    
    });    

    $("#selSubDomain").change(function() {    
        selectedSubDomain = $(this).find(':selected').val();    

        // Empty called to clear earlier displayed heatmap    
        $("#cal-heatmap").empty();    

        // Display Heatmap based on domain and subdomain selected    
        loadHeatMap(selectedDomain, selectedSubDomain);    
    });    
});    
function loadHeatMap(domainval, subdomainval) {    
    var cal = new CalHeatMap();    
    cal.init({    
        domain: domainval,    
        subDomain: subdomainval,    
        cellSize: 10,    
        itemName: ["service call", "service calls"],    
        data: {    
            "1451640542": 20,    
            "1451651342": 40,    
            "1454502542": 10,    
            "1454491742": 20,    
            "1454513342": 5,    
            "1454426942": 5,    
            "1454580062": 5,    
            "1454662862": 20,    
            "1450602062": 20,    
            "1450612862": 5,    
            "1449921662": 10,    
            "1449907262": 10,    
            "1452019700": 40,    
            "1454688100": 50,    
            "1452710900": 5,    
            "1452883700": 15,    
            "1453142900": 15,    
            "1453488500": 30,    
            "1456239700": 80,    
            "1453662300": 20,    
            "1455130100": 60,    
            "1455562100": 70,    
            "1455131100": 10,    
            "1456166900": 30,    
            "1456399000": 12,    
            "1451674100": 90    
        },    
        range: 5,    
        displayLegend: true,    
        domainMargin: 20,    
        animationDuration: 800,    
        domainDynamicDimension: true,    
        start: new Date(2016, 01, 01),    
        end: new Date(2016, 02, 26),    
        scale: [10, 20, 80],    
        previousSelector: "#heatmap-previous",    
        nextSelector: "#heatmap-next",    
    });    
}

Pl. Note. I have modified the code from my earlier article to accommodate year, month, day, and hour-based display of heatmaps. Mainly JavaScript-based logic to render heatmap based on domains is moved to JS file.

Open index.html in a browser and choose By Year and By Month options at Display: field of a panel. Heatmap will be showing all the years and month-wise call statistics. This gives us a summarized view for the entire year and for a month. Navigate through previous and next buttons to see how the service center is performing across the years.

sample

Now choose By Month and By Year options at Display: field of a panel. Heatmap will be showing all the months and daily call statistics. This is the same format we created in my earlier article.

sample

Now choose By Day and By Hour options at Display: field of a panel. Heatmap should be showing all the days and hourly call statistics. This way how calls are handled hour by the hour can be seen.

sample