Gráfico de columnas (1)

Los gráficos de columnas resultan de gran utilidad para mostrar los cambios que se producen en los datos a lo largo del tiempo o para ilustrar comparaciones entre elementos. A continuación vamos a dibujar un gráfico de columnas que muestra las tendencias en el uso de Internet Explorer y Firefox a lo largo de siete años ( entre 2008 y 2014 ).

Empezamos declarando un objeto oData y algunas propiedades de este: los años entre 2008 y 2014. El valor asociado con cada año es otro objeto cuyas propiedades son 'IE' de Internet Explorer y 'Firefox'.

var oData = {
  2008:{'IE':'54.7',   'Firefox':'36.4'},
  2009:{'IE':'44.8',   'Firefox':'45.5'},
  2010:{'IE':'36.2',   'Firefox':'46.3'},
  2011:{'IE':'26.6',   'Firefox':'42.8'},
  2012:{'IE':'20.1',   'Firefox':'37.2'},
  2013:{'IE':'14.3',   'Firefox':'30.2'},
  2014:{'IE':'10.2',   'Firefox':'26.9'}   ,            
};

¿Que significa? La primera línea nos dice que en 2008 Internet Explorer era utilizado por el 54.7% de los usuarios, mientras que el Firefox era utilizado por el 36.4% de los internautas

También declaramos el objeto oColores, donde el nombre del navegador va asociado al color que le representa.

Dibujar la cuadricula

Dibujar una cuadricula puede ser muy complicado si queremos calcular los valores que aparecen en los ejes, y la distancia entre ellos. Pero esto es solo un tutorial, asi que mantendremos las cosas sencillas.
Decidimos que la distancia entre las coordenadas, tanto del eje vertical como del eje horizontal es de 60px, que el valor mínimo en el eje vertical es de 0% y el valor máximo es de 60%. Por lo tanto cada 60px equivalen a un paso de 15% en el eje vertical, y a un año en el eje horizontal.
Hemos utilizado el método translate() para que las líneas de la cuadricula sean finas. Para saber más por favor lea Como dibujar líneas finas.
Por todo lo demás el código va acompañado de comentarios explicativos.

Dibujar el gráfico

Para dibujar el gráfico de columnas escribimos un bucle for ( for(var propiedad in oData){...} ) que recorre el objeto oData. Para cada propiedad de este (el año) el bucle:
- escribe el año en el eje horizontal.
- dibuja el rectángulo que representa el porcentaje de usuarios que utilizaban IE aquel año.
- dibuja otro rectángulo para Firefox.
La altura de cada recángulo es proporcional con el valor de la propiedad (porcentaje de usuarios).

var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext('2d');
  if (ctx) {
    var oData = {
      2008:{'IE':'54.7',   'Firefox':'36.4'},
      2009:{'IE':'44.8',   'Firefox':'45.5'},
      2010:{'IE':'36.2',   'Firefox':'46.3'},
      2011:{'IE':'26.6',   'Firefox':'42.8'},
      2012:{'IE':'20.1',   'Firefox':'37.2'},
      2013:{'IE':'14.3',   'Firefox':'30.2'},
      2014:{'IE':'10.2',   'Firefox':'26.9'}   ,            
   };                
    var oColores = {'IE':'#6495ED',   'Firefox':'#FF8C00'};   
	
    // construye la cuadricula

    // dibuja el eje vertical
    ctx.strokeStyle = '#ccc';
    ctx.lineWidth = 1;
    ctx.save();
    ctx.translate(0.5, 0);
    ctx.beginPath();
    ctx.moveTo(45, 25);
    ctx.lineTo(45, 275);
    ctx.stroke();
    ctx.restore();
    // define el estilo de texto
    ctx.font = '12px Verdana';
    ctx.fillStyle = 'blue';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    // el porcentaje máximo 
    var porcentaje = 60;
    // cada 60px 
    for (var y = 30; y < 275; y += 60) {
      // dibuja el texto
      ctx.fillText(porcentaje + '%', 40, y);
      // dibuja una línea horizontal
      ctx.save();
      ctx.translate(0, 0.5);
      ctx.beginPath();
      ctx.moveTo(40, y);
      ctx.lineTo(475, y);
      ctx.stroke();
      ctx.restore();
      //el porcentaje disminuye en un 15%
      porcentaje -= 15;
    }
    // dibuja las columnas
    // define el estilo de texto
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    // empezamos a dibujar a 60px del margen izquierdo
    var o = 60;
    // para cada propiedad en el objeto oData
    for (var propiedad in oData) {
      // el color del texto (2008, 2009...)
      ctx.fillStyle = 'blue';
      // dibuja el texto
      ctx.fillText(propiedad, o, 275);
      // dibuja un primer rectángulo para IE
      var H1 = (oData[propiedad]['IE'] * 60) / 15; // calcula la altura
      ctx.fillStyle = oColores['IE']; // define el color
      ctx.fillRect(o, 270 - H1, 20, H1);
      // dibuja un segundo rectángulo para Firefox																	
      var H2 = (oData[propiedad]['Firefox'] * 60) / 15; // calcula la altura
      ctx.fillStyle = oColores['Firefox']; // define el color
      ctx.fillRect(o + 20, 270 - H2, 20, H2)
        // aumenta en 60px la distancia del lado izquierdo
      o += 60;
    }
  }
}

Para mejorar el gráfico añadiremos un rótulo flotante con el nombre del navegador, el año y el porcentaje de usuarios. Continúa leyendo...

w3.unpo<code>todo