GitHub participation graphs built with a canvas element and sorcery
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
demo
src
vendor Updating proxy url Sep 23, 2013
.gitignore
.gitmodules
Gitgraph.min.js
Gruntfile.js
README.markdown
package.json

README.markdown

Gitgraph

Dirt simple GitHub participation graphs built with a <canvas> element and sorcery.

Usage

  1. Paste right before your page's closing </body> tag
<script src="Gitgraph.min.js"></script>
  1. From within a script tag or a JS file
    var graph = new Gitgraph({ 
        user        : 'nex3',                // any github username
        repo        : 'sass',                // name of repo
        domNode     : document.body,         // (optional) DOM node to attach to 
        width       : 800,                   // (optional) graph width
        height      : 300,                   // (optional) graph height
        allColor    : "rgb(202, 202, 202)",  // (optional) color of user's participation
        userColor   : "rgb(51, 102, 153)",   // (optional) color of total participation
        background  : "white",               // (optional) background styles
        showName    : true                   // (optional) show or hide name of user / repo
    });

Limitations

GitHub hasn't exposed participation data via the api yet, but plans to. Until then, requests funnel through a simple proxy via my vps.

Contributing

Gitgraph uses Grunt for file linting and uglification. To start contributing, first make sure node is installed. Then:

git clone https://github.com/bitpshr/Gitgraph.git
cd Gitgraph
git submodule update --recursive --init
npm install
# hack on Gitgraph.js, run `grunt`, view demo/index.html

License

WTFPL