Press "Enter" to skip to content

Dynamic Github Like Heatmap Contribution Graph In Vanilla 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


See Demo And Download

Official Website(cybeaer): Click Here

This superior jQuery/javascript plugin is developed by cybeaer. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.