Block Chart TimelineHeatmap - Free Download Dynamic Flat Block Chart Plugin With jQuery - TimelineHeatmap

Free Download Dynamic Flat Block Chart Plugin With jQuery – TimelineHeatmap

Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Flat Block Chart Plugin With jQuery – TimelineHeatmap, hope it will help you in programming stack.

Block Chart TimelineHeatmap - Free Download Dynamic Flat Block Chart Plugin With jQuery - TimelineHeatmap
File Size: 45 KB
Views Total: 2393
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Flat Block Chart Plugin dynamically generates a horizontal timeline-style heat map where the individual values contained in a 3D or 2D matrix are represented as flat clickable blocks.

Basic usage:

1. Import jQuery library and the jQuery TimelineHeatmap plugin into the page.

1 <link href="TimelineHeatmap.css" rel="stylesheet">
3         integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
4         crossorigin="anonymous"></script>
5 <script src="TimelineHeatmap.js"></script>

2. Prepare your data in a 3D or 2D matrix as follows:

01 mydata = [
02   [
03     [
04       "Mar 01",
05       1,
06       56,
07       "03/01/2018"
08     ],
09     [
10       "Mar 02",
11       3,
12       1,
13       "03/02/2018"
14     ],
15     [
16       "Mar 03",
17       4,
18       67,
19       "03/03/2018"
20     ]
21     // ...
22   ]
23 ]

3. Generate a basic heat map in a container you specify.

1 <div id="myHeatmap"></div>
1 myHeatmap = new edaplotjs.TimelineHeatmap('myHeatmap', {
2   data: myData,
3   columnNames: ["label", "color", "height", "custom_field"]
4 });

4. More configuration options to customize the heat map.

01 myHeatmap = new edaplotjs.TimelineHeatmap('myHeatmap', {
02  
03   data: myData,
04   columnNames: ["label", "color", "height", "custom_field"],
05  
06   // The column index in the data matrix for showing labels under each block
07   dataIndexForLabels: 0,
08  
09   // The column index in the data matrix for coding the color of each block
10   dataIndexForColors: 1,
11  
12   // The column index in the data matrix for coding the height of each block
13   dataIndexForHeights: 2,
14  
15   // Enable rendering each block by color quatiles
16   // Default: false
17   useColorQuantiles: true,
18  
19   // The bin and range of the color
20   colorBin: [],
21   colorRange: [],
22  
23   // The bin and range of the height
24   heightBin: [],
25   heightRange: [],
26  
27   // Prevent adding events to blocks with color value zero
28   noEventWhenColorValueZero: true,
29  
30   // Add an arrow on the left of the timeline for appending new data.
31   // If this setting is a function, when the arrow is clicked, the function will be triggered.
32   addLeftArrow: true,
33  
34   // The text on the bottom of the arrow
35   leftArrowLabel: 'More',
36  
37   // Indicate if the chart needs to be plotted when the object is created.
38   plotDataWhenCreated: true
39  
40 });

5. Callback functions.

01 myHeatmap = new edaplotjs.TimelineHeatmap('myHeatmap', {
02  
03   click: function ($e, obj) {
04     console.log("click", $e.data(), obj);
05   },
06  
07   select: function ($e, obj) {
08     console.log("select", $e.data(), obj);
09   },
10  
11   create: function (obj) {
12     console.log("create", obj);
13   };
14  
15 });

6. API methods.

01 // clear block selection
02 myHeatmap.clearBlockSelection();
03  
04 // select a specified block
05 myHeatmap.selectBlockByIndex(5);
06  
07 // Select the last block
08 myHeatmap.selectLastBlock();
09  
10 // Select the first block
11 myHeatmap.selectFirstBlock();
12  
13 // Prepend blocks to the left of the timeline.
14 var data = [["Mar 03", 9, 2, "03/03/2018"], ["Mar 04", 14, 2, "03/04/2018"]];
15 myHeatmap.prependBlocks(data);
16  
17 // Up<a href="https://www.jqueryscript.net/time-clock/">date</a> blocks
18 var data = [["Mar 03", 9, 2, "03/03/2018"], ["Mar 04", 14, 2, "03/04/2018"]];
19 myHeatmap.updateBlocks(data);
20  
21 // Get the data of the current selected block.
22 myHeatmap.getSelectedBlockData();
23  
24 // Get the jQuery DOM element of the current selected block.
25 myHeatmap.getSelectedBlock();
26