Heatmaps Using JavaScript: Part Two

Madan Bhintade
8y
5.7k
0
0
100
Article

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. (Referto below screenshot).

To display the heatmap in above format, we passed the domain as month and the subdomain as day. Referto the below screenshot from our earlier code base:

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 call volume of a service center across the entire year. Our decision makers need information,such as howthe 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
1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5. <title>Cal-Heatmap Samples</title>
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
11. <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
12. <script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
13. <link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
14. </head>
16. <body>
17. <div class="container">
18. <div class="page-header">
19. <h2>
20. Cal-HeatMap Samples</h2>
21. </div>
22. <div class="row">
23. <div class="col-lg-12">
24. <div class="panel panel-default">
25. <div class="panel-heading">
26. <span class="glyphicon glyphicon-equalizer"></span>Service Call Statistics
27. <div class="pull-right">
28. Display : <select id="selDomain">
29. <option value="">None</option>
30. <option value="year">By Year</option>
31. <option value="month">By Month</option>
32. <option value="day">By Day</option>
33. </select>
34. <select id="selSubDomain">
35. <option value="">None</option>
36. <option value="month">By Month</option>
37. <option value="day">By Day</option>
38. <option value="hour">By Hour</option>
39. </select>
40. </div>
41. </div>
42. <div class="panel-body">
43. <div id="heatmap-navigation">
44. <button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs">
45. <i class="glyphicon glyphicon-chevron-left"></i>
46. </button>
47. <button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs">
48. <i class="glyphicon glyphicon-chevron-right"></i>
49. </button>
50. </div>
51. <div id="cal-heatmap">
52. </div>
53. </div>
54. </div>
55. </div>
56. </div>
57. <script src="app.js" type="text/javascript"></script>
58. </body>
60. </html>
Inthe above code base, you will notice drop downs 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.
Create a new app.js and copy below code to it
1. $(document).ready(function()
2. {
3. var selectedDomain;
4. var selectedSubDomain;
5. $("#selDomain").change(function()
6. {
7. selectedDomain = $(this).find(':selected').val();
8. });
9. $("#selSubDomain").change(function()
10. {
11. selectedSubDomain = $(this).find(':selected').val();
12. //empty called to clear earlier displayed heatmap.
13. $("#cal-heatmap").empty();
14. //Display Heatmap based domain and subdomain selected
15. loadHeatMap(selectedDomain, selectedSubDomain);
16. });
17. });
19. function loadHeatMap(domainval, subdomainval)
20. {
21. var cal = new CalHeatMap();
22. cal.init
23. ({
24. domain: domainval,
25. subDomain: subdomainval,
26. cellSize: 10,
27. itemName: ["service call", "service calls"],
28. data:
29. {
30. "1451640542": 20,
31. "1451651342": 40,
32. "1454502542": 10,
33. "1454491742": 20,
34. "1454513342": 5,
35. "1454426942": 5,
36. "1454580062": 5,
37. "1454662862": 20,
38. "1450602062": 20,
39. "1450612862": 5,
40. "1449921662": 10,
41. "1449907262": 10,
42. "1452019700": 40,
43. "1454688100": 50,
44. "1452710900": 5,
45. "1452883700": 15,
46. "1453142900": 15,
47. "1453488500": 30,
48. "1456239700": 80,
49. "1453662300": 20,
50. "1455130100": 60,
51. "1455562100": 70,
52. "1455131100": 10,
53. "1456166900": 30,
54. "1456399000": 12,
55. "1451674100": 90
56. },
57. range: 5,
58. displayLegend: true,
59. domainMargin: 20,
60. animationDuration: 800,
61. domainDynamicDimension: true,
62. start: new Date(2016, 01, 01),
63. end: new Date(2016, 02, 26),
64. scale: [10, 20, 80],
65. previousSelector: "#heatmap-previous",
66. nextSelector: "#heatmap-next",
67. });
68. }
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 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.
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.
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 hour can be seen.

This way just by modifying domain and subdomain values, we can generate drill down or summarized views of heatmap.