Embed Github contributions graph in website

Question

Is there a way to embed the Github contributions graph in HTML5?

Answer 1

You can scrape the HTML at this url: https://github.com/users/<username>/contributions and put it on your page.

Answer 2

I wrote a JavaScript library to do that: github-calendar.

Here is an example how to use it:

<!-- Prepare a container for your calendar. -->
<script
  src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"
>
</script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
  rel="stylesheet"
  href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    new GitHubCalendar(".calendar", "your-username");
</script>

Here you can see it in action:

Basically, since we need cross domain requests we need a proxy. It makes a request to GitHub profile page (github.com/<user>) and then brings back the needed stuff from there.

For more information, check out the documentation on GitHub.

Answer 3

I was able to achieve this with Angular 4 by doing the following:

1. Make a HTTP GET request to the url mentioned by @jianweichuah https://github.com/users/<username>/contributions.

2. You'll need a proxy to get past the CORS issue just as the github-calendar library does. proxy-url/https://github.com/users/<username>/contributions

3. Then present it back in the template.

Sadly you don't get all the information easily, but it is in the SVG details.

I have a write-up of my exact steps here: https://www.chiangs.ninja/blog/ And an example of it on the main site under the GitHub tab. I also grabbed my user information from the GitHub API and populated it around the chart.

Answer 4

Grass Graph is what I found as the best option to do what you're looking for.

You can get the graph generated as simple image by simply putting it so:

<img src="https://grass-graph.moshimo.works/images/mkartak.png">

Answer 5

This guy: http://www.rshah.org/ wrote a Github chart API. This could definitely help: http://ghchart.rshah.org/ . Plus it is only HTML, so couldn't get any cleaner. Just change the username and alt tag to yours.