javascript - ¿cómo hacer gráficos de barras de participación de 52 semanas como los que ha hecho Github?

Estoy tratando de hacer gráficos de barras similares a como lo hace Github para mostrar cuántos commits hay o cuántas personas están siguiendo repositorios, por ejemplo, https://github.com/popular/watched.

¿Alguien sabe qué biblioteca usaron para hacerlo?

ACTUALIZACIÓN Quería reabrir esta pregunta si es posible. Al re-investigar esto, las soluciones a continuación, aunque geniales por derecho propio, parecen un poco demasiado complicadas para lo que estoy buscando.

He cambiado a usar este agradable tutorial de Nettuts que dibuja un solo gráfico de barras, pero estoy teniendo problemas para adaptarlo y dibujar múltiples gráficos de barras. http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-canvas-create-a-jquery-graph-plugin/

He hecho un fiddle donde he añadido manualmente código para manejar un segundo gráfico, pero creo que necesito algunos bucles for para que esto funcione con un número variable de gráficos. Aquí está ese fiddle: http://jsfiddle.net/trpeters1/zHH76/

¿Alguien podría editar este fiddle para abordar esta pregunta?

Respuesta #1

Investiga d3.js. Hay varios ejemplos de cómo puedes tomar un arreglo en JavaScript y convertirlo en un gráfico así.

Aquí hay un ejemplo (más avanzado): http://mbostock.github.com/d3/ex/population.html
Y aquí hay otro ejemplo que está más cerca de lo que quieres: http://mbostock.github.com/d3/tutorial/bar-2.html

EDITAR

El código real que Git Hub utiliza para crear los gráficos se ve algo así:

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;
})();

Básicamente, están llamando a la etiqueta data-source ubicada en el canvas, la cual devuelve un JSON que representa la cantidad de trabajo/participación/visualizaciones (o cualquier métrica que estén calculando) y luego recorren cada valor devuelto y llaman a this.canvas.fillRect con el ancho predefinido ((Screensize.width/52) - (paddingLeft + paddingRight)) y la altura del JSON devuelto

Respuesta #2

Prueba Morris para mostrar datos de series temporales.

También Timeplot.