Blog

How to create a heatmap with jQuery Grid and jsRender

Marina Stoyanova / Thursday, January 30, 2014

Ignite UI igGrid - heatmapThe Ignite UI Grid control is a jQuery-based grid that presents data in tabular form. I have already written about this control and it’s column fixing feature, but now we are going to consider it in a different light. The coolest thing about the grid is that it visualize the information you are  setting in a structured way and gives the end-user the ability to play with it and manipulate it. Imagine combining that data with a heat map - the users will be able to trace it even faster. Heat maps represent data as colors and those colors change respectively to the intensity of the data. In the current blog we will see how to build such grid by using jsRender templates.

Setting the basis

To build the grid you will need the required Ignite UI JavaScript and CSS files. As I said we are going to use jsRender template to define a structure and reuse it to generate HTML dynamically, that is why you will need a jsRender library referenced as well. We are going to use a table tag to host our grid.

  1. <table id="grid">table>

By default, the igGrid control uses the Infragistics template engine, so in order to use jsRender you need to configure it using the templatingEngine option and setting it to a  ”jsRender” value. 

I’ve mentioned few times already jsRender so lets take a step back and see what exactly is this. JsRender is a JavaScript library, which brings a new templating library to HTML5 development that has a codeless tag syntax and high performance, has no dependency on jQuery nor on the Document Object Model (DOM), supports creating custom functions and uses pure string-based rendering. You can read more about jsRender in MSDN 'Client Insight' articles on JsRender part one and part two or check out the documentation.

Back to our implementation of the grid we should create a custom row template if we want to use jsRender. To do that we need to follow few steps. First we have to configure the igGrid to use the jsRender templating engine, as we explained earlier, then we will have to define a helper function specific to the template.

  1. $.views.helpers(
  2.  {
  3.     //define function here
  4.  });

The third step is to create the jsRender template and finally we should define the rowTemplate option to use this template.

  1. <script id="template" type="text/x-jsrender">
  2.     <tr>@*You can usetags and place your data here.*@
  3.                      <td>{{>ID}}td>
  4.     tr>
  5. script>

 

  1. $("#grid").igGrid({
  2.     width: "600px",
  3.     height: "600px",
  4.     dataSource: busy,
  5.     rowTemplate: $("#template").html(),
  6.     columns: [
  7.         { headerText: "Id", key: "ID" },
  8.         { headerText: "Name", key: "Name" },
  9.         { headerText: "Mon", key: "Mon" },
  10.         { headerText: "Tue", key: "Tue" },
  11.         { headerText: "Wed", key: "Wed" },
  12.         { headerText: "Thu", key: "Thu" },
  13.         { headerText: "Fri", key: "Fri" }
  14.     ],
  15.     templatingEngine: "jsrender"
  16. });

Heatmap Grid

Creating a heatmap means we need to represent the values in the grid’s row not only by their numbers and labels but with colors as well. The data we are going to use represents how busy are the employees in one organization each day of the week and their business is represented by percentage – 0% means the employee has no work to do and 100% means he is occupied the whole day. Respectively to those percentage we want to paint the row cells in colors from green to red. We are going to make that in the jsRender helper function. What we need to do is define min and max values for the entire data. In a real case scenario you may have a remote data and you may not be able to calculate the minimum and maximum values on the client side, then you should take them as prepared values from the server side. For our sample as we already know the max and min values so we are going to use them as is to keep it simple. Then on every step we will call that helper giving him the current value of the cell and using that value we will generate an appropriate color for the cell.  

  1. $.views.helpers({
  2.     colorChange: function (val) {
  3.  
  4.         var perRed;
  5.         var perGreen;
  6.         var maxValue = 100;
  7.         var minValue = 0;
  8.  
  9.         var ratio = 1 / (maxValue - minValue);
  10.         var finalValue = (val - minValue) * ratio;
  11.  
  12.         if (finalValue == 0.5) {
  13.             perRed = 1;
  14.             perGreen = 1;
  15.         }
  16.         else if (finalValue > 0.5) {
  17.             perRed = 1;
  18.             perGreen =( 1 - finalValue)*2;
  19.         }
  20.         else {
  21.             perGreen = 1;
  22.             perRed =  finalValue*2;
  23.         }
  24.  
  25.         var red = Math.round(255 * perRed);
  26.         var green = Math.round(255 * perGreen);
  27.  
  28.         var gString = green.toString(16);
  29.         var rString = red.toString(16);
  30.  
  31.         if (gString.length == 1) {
  32.             gString = '0' + gString;
  33.         }
  34.  
  35.         if (rString.length == 1) {
  36.             rString = rString + '0';
  37.         }
  38.  
  39.         var color = '#' + rString + gString + '00';
  40.  
  41.         return color;
  42.     }
  43. });

How do we call the function and when? Well this is a jsRender helper which means that we need it in our template. In the template we createtags for all of the columns in our grid and set a background style to those tags, by calling the function.

  1. <script id="template" type="text/x-jsrender">
  2.     <tr>
  3.         <td>{{>ID}}td>
  4.         <td>{{>Name}}td>
  5.         <td style='background: {{:~colorChange(Mon)}};'>
  6.             <b>{{>Mon}}%b>
  7.         td>
  8.         <td style='background: {{:~colorChange(Tue)}};'>
  9.             <b>{{>Tue}}%b>
  10.         td>
  11.         <td style='background: {{:~colorChange(Wed)}};'>
  12.             <b>{{>Wed}}%b>
  13.         td>
  14.         <td style='background: {{:~colorChange(Thu)}};'>
  15.             <b>{{>Thu}}%b>
  16.         td>
  17.         <td style='background: {{:~colorChange(Fri)}};'>
  18.             <b>{{>Fri}}%b>
  19.         td>
  20.     tr>
  21. script>

The example image demonstrates the final view of the grid.

Heatmap with igGrid and jsRender templates

You can see the jsRender Integration sample for more information about  how to use it in the grid’s row template.

Conclusion

Basically a heatmap visualize a table of numbers with corresponding colors.  This is a useful way for finding highs and lows or sometimes patterns. Although usually the numbers are substituted by colors, using the igGrid you can have them both for even better user experience. JsRender templates are a powerful way of creating and loading HTML tags dynamically and thanks to it’s helper functions we can manipulate those templates as we wish.

You can see a live demo on jsFiddle or download the An ASP.Net MVC Heatmap with Grid sample.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!