Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
JavaScript

Heatmaps Using JavaScript: Part Two

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

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.

  1. Create or update index.html using the following code
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.   
    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>  
    15.   
    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>  
    59.   
    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.

    code

  2. 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. });  
    18.   
    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.

  3. 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.

    sample

  4. 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

  5. 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.

    sample

    This way just by modifying domain and subdomain values, we can generate drill down or summarized views of heatmap. 
Read more articles on JavaScript:

Up Next
    Ebook Download
    View all
    Learn
    View all