Introduction
Before getting into the details of this article, please go through my earlier article on heatmaps.
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]()
This way just by modifying domain and subdomain values, we can generate drill down or summarized views of the heatmap.
Read more articles on JavaScript