JavaScript Library for Creating an Interactive Timeline Heatmap

by Posted on

This JavaScript library is for creating an interactive timeline heatmap. Each colored “block” in the timeline represents a time point (e.g. one day). The blocks have differenct labels, colors, and heights (optional), which can encode three different dimensions. It is also possible to store custom dimensions in the DOM elements’ data attribute. One example that uses this chart is Smell PGH. In the example, each block means one day, and the color of the blocks represent the concentration of smell reports in that day.
Javascript-Timeline-Plugin

Libraries

First, include the following libraries on html file:

<link href="TimelineHeatmap.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="TimelineHeatmap.js" type="text/javascript"></script>



HTML

Create a html container for Heatmap

<div id="chart-container"></div>

JS

Generate a basic heat map in a container you specify.

var container_id = "chart-container";
var settings = {
  data: [["Mar 01", 1, 3, "03/01/2018"], ["Mar 02", 2, 15, "03/02/2018"]],
  columnNames: ["label", "color", "height", "custom_field"],
  dataIndexForLabels: 0,
  dataIndexForColors: 1,
  dataIndexForHeights: 2
};
fbchart = new edaplotjs.TimelineHeatmap(container_id, settings);




More configuration options to customize the heat map.

myHeatmap = new edaplotjs.TimelineHeatmap('chart-container', {
 
  data: myData,
  columnNames: ["label", "color", "height", "custom_field"],
 
  
  dataIndexForLabels: 0,
 
  
  dataIndexForColors: 1,
 
  
  dataIndexForHeights: 2,
 
  
  
  useColorQuantiles: true,
 
  
  colorBin: [],
  colorRange: [],
 
  
  heightBin: [],
  heightRange: [],
 
  
  noEventWhenColorValueZero: true,
 
  
  
  addLeftArrow: true,
 
  
  leftArrowLabel: 'More'
 
});




Callback functions.

myHeatmap = new edaplotjs.TimelineHeatmap('chart-container', {
 
  click: function ($e, obj) {
    console.log("click", $e.data(), obj);
  },
 
  select: function ($e, obj) {
    console.log("select", $e.data(), obj);
  },
 
  create: function (obj) {
    console.log("create", obj);
  };
 
});

API methods


myHeatmap.clearBlockSelection();
 

myHeatmap.selectBlockByIndex(5);
 

myHeatmap.selectLastBlock();
 

myHeatmap.selectFirstBlock();
 

var data = [["Mar 03", 9, 2, "03/03/2018"], ["Mar 04", 14, 2, "03/04/2018"]];
myHeatmap.prependBlocks(data);
 
// Up<a href="https://www.jqueryscript.net/time-clock/">date</a> blocks
var data = [["Mar 03", 9, 2, "03/03/2018"], ["Mar 04", 14, 2, "03/04/2018"]];
myHeatmap.updateBlocks(data);
 

myHeatmap.getSelectedBlockData();
 

myHeatmap.getSelectedBlock();
 

myHeatmap.getNumberOfBlocks();
 

myHeatmap.getBlockDataByIndex(index);
 

myHeatmap.getFirstBlockData();
 

myHeatmap.getLastBlockData();
 

myHeatmap.hideLeftArrow();
 

myHeatmap.showLeftArrow();
 

myHeatmap.setLeftArrowOpacity(0.5);
 

myHeatmap.disableLeftArrow();
 

myHeatmap.enableLeftArrow();

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by yenchiah. Visit their official github repository for more information and follow for future updates.


Published by admin