jQuery Plugin For Github Style Heatmap Calendar - Contribution Graph

jQuery Plugin For Github Style Heatmap Calendar - Contribution Graph
File Size: 6.92 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery plugin that renders a Github style, SVG based calendar heatmap for user profiles to represent time series data. Inspired by Github's contribution calendar graph.

Integrated with the tooltip functionality that allows the user to view the details when hovering over the blocks.

See also:

How to use it:

1. Include the JavaScript github_contribution.js and Stylesheet github_contribution_graph.css on the page.

<script src="/path/to/jquery.min.js"></script>
<script src="js/github_contribution.js"></script>
<link href="css/github_contribution_graph.css" rel="stylesheet" />

2. Create an element to hold the calendar heatmap.

<div id="myheatMap"></div>

3. Define your data (a list of timestamps) for the calendar heatmap.

myData = [1544415560251, 1560745160251, 1553833160251, 1544761160251, 1540354760251]

4. Generate a basic calendar heatmap.

$('#myHeatMap').github_graph( {
  data: myData
  texts: ['completed task','completed tasks']
});

5. Override the default day/month names as per your needs.

$('#myHeatMap').github_graph( {
  data: myData
  texts: ['completed task','completed tasks'],
  month_names: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
  h_days : ['M','W','F']
});

6. Override the default colors.

$('#myHeatMap').github_graph( {
  data: myData
  texts: ['completed task','completed tasks'],
  colors: ['#eeeeee','#d6e685','#8cc665','#44a340','#44a340']
});

This awesome jQuery plugin is developed by bachvtuan. For more Advanced Usages, please check the demo page or visit the official website.