https://github.com/corentinth/day-heatmap
A simple library to create responsive github like heatmap to display data on a scale of a day.
https://github.com/corentinth/day-heatmap
Last synced: 7 months ago
JSON representation
A simple library to create responsive github like heatmap to display data on a scale of a day.
- Host: GitHub
- URL: https://github.com/corentinth/day-heatmap
- Owner: CorentinTh
- Created: 2017-11-23T00:52:33.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-23T02:15:54.000Z (about 8 years ago)
- Last Synced: 2025-04-07T07:34:39.778Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# day-heatmap.js
`day-heatmap.js` is a simple library to create responsive github like heatmap to display data on a scale of a day.
Try it: [live demo](http://divers.corentin-thomasset.fr/day-heatmap/).
## Setup
It's composed of a javascript and a css file.
**Note:** This library requires jQuery to work.
### Method 1: Direct files
You can download the source files (under `src/`), and add them to your project (the javascript must be loaded after jQuery).
```html
```
### Method 2: CDN
The most easier thing is to use github as a CDN, so you don't have to donwload the files. Just add that to your project:
```html
```
## Make it works
To make it works you just need one line of javascript:
```html
DayHeatmap(element, options).data(dataset).draw();
```
Where :
* `element` is a string representing the id of the div where you want it to be displayed.
* `options` (optional) is an object to customize a the heatmap.
* `halfDays` a boolean, to display only a day in two
* `halfHours` a boolean, to display only a hour in two
* `colors` a 5 row array contening your custom gradient (index 0: the lighter, and index 4 the darker).
* `data` is an object array with the following format :
```javascript
var data = [
{timestamp:1511401167678, value:5},
{timestamp:1511401177542, value:2},
// ...
]
```
### Exemple
Here is a working exemple with all the functionnalities:
```html
Heatmap
.container{
width: 50%;
margin:200px 25%;
}
var dummyData = [{timestamp: 738221588, value: 34}, {timestamp: 455091188, value: 85}, {timestamp: 1006992511, value: 61}, {timestamp: 374216407, value: 96}, {timestamp: 557060294, value: 39}, {timestamp: 1088268560, value: 45}, {timestamp: 790274681, value: 95}, {timestamp: 924184922, value: 46}, {timestamp: 16227933, value: 47}];
DayHeatmap("day-heatmap",
{
halfDays: true,
halfHours: true,
colors: [
"#7ae0cc",
"#3fc5ab",
"#379e8a",
"#28675b",
"#294C58"
]
}).data(dummyData).draw();
```
## Todo
* Allow other type of data input.
* Display tooltip with the value on hover of a square.