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.
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" > |
2 |
< script src = "https://code.jquery.com/jquery-3.3.1.min.js" |
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 |
27 |
// Get the current number of blocks. |
source : jquery.net