Dynamic Github Like Heatmap Contribution Graph In Javascript

Heatmap.js is a JavaScript library for creating a Github contribution graph like a heatmap to display user activity.

github contribution graph js, github contribution graph art, github contribution graph api, github graph visualization, github contribution graph not showing, github activity overview graph

How to make use of it:

1. Load JavaScript Heatmap.js and CSS Heatmap.css into the document.

<script src="heatmap.js"></script>
<link rel="stylesheet" href="heatmap.css" />

2. Create a container to hold the heatmap.

<div id="heatmap"></div>

3. Prepare your data in a JS object.

{
  1.4.2021T0:0:0: 4,
  1.6.2021T0:0:0: 4,
  1.8.2021T0:0:0: 1,
  1.9.2021T0:0:0: 1,
  2.1.2021T0:0:0: 2,
  // ...
}

4. Presentation of a heat map with the data provided.

let heatmap = new HeatmapPlugin('heatmap', data);

5. Customize the heatmap.

let heatmap = new HeatmapPlugin('heatmap', data, {
    legend: true,
    timescale: true,
    range: {
        from: '#year#-01-01T00:00:00',
        till: '#year#-12-30T00:00:00',
        grade: 1,
        interval: 'day', //month, year, hours, minutes
        rows: 7,
    },
    units: 5
});

6. Override the default heatmap styles.

let heatmap = new HeatmapPlugin('heatmap',data, {
    legend: true,
    timescale: true,
    range: {
        from: '#year#-01-01T00:00:00',
        till: '#year#-12-30T00:00:00',
        grade: 1,
        interval: 'day', //month, year, hours, minutes
        rows: 7,
    },
    units: 5
},{
    width: '10',
    height: '10',
    font: {
      size: '10',
      family: 'Arial',
      color: 'white'
    }
});

7. Determine if you want to display the heatmap immediately.

let heatmap = new HeatmapPlugin('heatmap',data, {
    legend: true,
    timescale: true,
    range: {
        from: '#year#-01-01T00:00:00',
        till: '#year#-12-30T00:00:00',
        grade: 1,
        interval: 'day', //month, year, hours, minutes
        rows: 7,
    },
    units: 5
},{
    width: '10',
    height: '10',
    font: {
      size: '10',
      family: 'Arial',
      color: 'white'
    }
}, true);

Github Style Contribution Graph In JavaScript, JS Dynamic Github-like heatmap Plugin/Github, github contribution graph hack, github activity graph generator