How to make 52-week graphical participation charts like Github?

Question

I'm trying to make histograms look like Github does this to show how many commits or how many people are viewing repositories, for example https://github.com/popular/watched .

Does anyone know which library they used to create it?

UPDATE I would like to reopen this question if possible. Re-investigating this, the solutions below, while surprising in themselves, seem too involved in what I'm looking for.

I switched to using this beautiful Nettuts tutorial, which draws one histogram, but I find it difficult to adapt it to draw several histograms. http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-canvas-create-a-jquery-graph-plugin/

I made a fiddle, where I manually added code to work with the second graph, but I believe that I need some of the loops to make this work for a variable number of graphs. Here is this fiddle: http://jsfiddle.net/trpeters1/zHH76/

Can someone edit this script to solve this issue?

Answer 1

Take a look at d3.js. There are several examples of how you can take an array in JavaScript and turn it into such a graph.

Here is an example (more advanced): http://mbostock.github.com/d3/ex/population.html
And here is another example that is closer to what you want: http://mbostock.github.com/d3/tutorial/bar-2.html

EDIT

The actual code that Git Hub uses to create graphs looks something like this:

GitHub.ParticipationGraph = (function(){ function b(target){ this.el = target; this.onSuccess = $.proxy(this.onSuccess, this); this.canvas = this.el.getContext("2d"); this.refresh(); } b.prototype.barWidth = 7; b.prototype.barMaxHeight = 20; b.prototype.getUrl = function(){ return $(this.el).data("source"); }; b.prototype.setData = function(data){ this.data = data; if (data == null || data.all == null || data.owner == null) { this.data = null; } this.scale = this.getScale(this.data); }; b.prototype.getScale = function(data){ var mx, i; if (data == null) return; mx = data.all[0]; for(i = 0; i < data.all.length; i++) { if (data.all[i] > mx) { mx = data.all[i]; } } return mx >= this.barMaxHeight ? (this.barMaxHeight-.1)/mx : 1; }; b.prototype.refresh = function(){ $.ajax({ url: this.getUrl(), dataType: "json", success: this.onSuccess }); }; b.prototype.onSuccess = function(data){ this.setData(data); this.draw(); }; b.prototype.draw = function(){ if (this.data == null) return; this.drawCommits(this.data.all, "#cacaca"); this.drawCommits(this.data.owner, "#336699"); }; b.prototype.drawCommits = function(data, color){ var i, width, height, x, y; for (i = 0; i < data.length; i++) { width = this.barWidth; height = data[i] * this.scale; x = i * (this.barWidth + 1); y = this.barMaxHeight - height; this.canvas.fillStyle = color; this.canvas.fillRect(x, y, width, height); } }; return b; })(); 

Basically, they call the data-source tag, located on the canvas, which returns some JSON that represents the amount of work / participation / hours (or any metric that they calculate), and then they go through each return value and call this.canvas.fillRect with a predefined width ( (Screensize.width/52) - (paddingLeft + paddingRight) ) and a height from the returned JSON

Answer 2

Try morris to display time series data.

Also Timeplot .