[Heatmap] Jquery Plugin for Display As a Graph of the Contribution on Github

Jquery plugin to present as a contribution graph on Github when viewing a user profile, you can use it to apply to other JS frameworks like Angularjs as well.

How to make use of it:

1. Include the JavaScript github_contribution.js and Stylesheet github_contribution_graph.css on the web 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 a component to hold the calendar heatmap.

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

3. Define your information for the calendar heatmap.

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

4. Generate a primary 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']
});

jQuery Plugin For Github Style Heatmap Calendar, GitHub Contribution Graph Plugin, github contributions graph, rebuild contribution graph, github show contributions to private repos, how to increase github contributions, github contributions graph api


See Demo And Download

Official Website(bachvtuan): Click Here

This superior jQuery/javascript plugin is developed by bachvtuan. For extra Advanced Usage, please go to the official website.

Share