We bring you the second blog of the two blog series to our open source contribution. You might have read our initial blog “How to track video viewing pattern using JavaScript?”, where we share how to track your user’s data using our library. Now we would put that to use, i.e. we would create some meaning out of it. Sounds interesting correct ?We are team of developers and we loved the challenge given to us by our client not to use and ready made competent and create our own. Hence, we took a step ahead and made it available to other folks of the community as we have used a lot from the community.Check the link below to download both the libraries as one alone is not gonna make sense for now.

Let me share the entire requirement once again. Our client wanted to capture the viewing pattern of his user for the video uploaded on his portal. So we came up with idea to create a heat map that will effectively show the activity the user while watching the video.Here is how you would use the ‘trt-video-heatmap’ library.

Step 1:

Include the ‘trt-video-analytics’ library that would get you the data for creating heat map. The above mentioned library would return an array of the data.

Step 2:

Now you can store the data in the DB in string format and pass that data in array form to the ‘trt-video-heatmap’ library. Along with that we have the flexibility to pass the color combination as well to create the heat map in the color gradient of your choice.End result will look something like this :-)

Step 3:

I know, above two steps are just description but now let’s dive into the coding part. How easy we have made it.First you need to add script tag into your page<script type=”text/javascript” src=”heatMap.js”>After that we need to initialize the instance of the HeatMap library with the specific parametersvar colorCode = ['rgb(255, 245, 204)','rgb(255, 205, 143)','rgb(255, 155, 97)', 'rgb(255, 81, 46)', 'rgb(255, 0, 0)', 'rgb(226, 0, 0)', 'rgb(191, 2, 2)', 'rgb(156, 1, 1)', 'rgb(125, 2, 2)']var data =[1,1,1,1,1,1,2,2,2,2,2,2,undefined,undefined,undefined,undefined,undefined,3,3,3,3,1,1,1,2,2,2,2,5,5,5,5,6,6,6,6]var map = new HeatMap(data, colorCode, id of element);Done that’s it now your heat map is ready.Do share your feedback. :)Read Also : How to track video viewing pattern using JavaScript?· · · ·Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.