Gráficos circulares (1)

facebook-svg gplus-svg twitter-svg

Las estadísticas son importantes. Los gráficos circulares, también llamados gráficos de tarta ( pie charts ), son recursos estadísticos que se utilizan para representar porcentajes y proporciones. A continuación vamos a dibujar un gráfico circular que muestra las tendencias en el uso de los principales navegadores.
Empezamos con modestia, haciendo algo muy sencillo, que ampliaremos y mejoraremos hasta conseguir un gráfico expresivo, que podrá ser reutilizado con otros datos.

El HTML


Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )

Su navegador no soporta canvas :(

El JavaScript

En el JavaScript mpezamos declarando un objeto oData y algunas propiedades de este: los nombres de los principales navegadores y el porcentaje de usuarios que utilizan cada navegador.

 var oData = {
      'IE': '10.2',
      'Firefox': '26.9',
      'Chrome': '55.7',
      'Safari': '3.9',
      'Opera': '1.8'
};

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

var oColores = {
      'IE': '#6495ED',
      'Firefox': '#FF8C00',
      'Chrome': '#FFD700',
      'Safari': '#32CD32',
      'Opera': '#DC143C',
      'otros': '#ddd'
};

En el centro del <canvas> ( X,Y ) dibujamos un círculo con el radio r = 100 y un color de relleno fillStyle ="#ddd". Este círculo representa la base del gráfico que vamos a dibujar.

    // el radio del gráfico;					
    var r = 100;
    // las coordenadas del centro del canvas
    var X = canvas.width / 2
    var Y = canvas.height / 2;
    // dibuja un circulo gris en el centro del canvas
    ctx.fillStyle = '#ddd';
    ctx.moveTo(X, Y);
    ctx.arc(X, Y, r, 0, 2 * Math.PI);
    ctx.fill();
 

Encima dibujamos un sector circular, equivalente al porcentaje de usuarios que utilizaban Internet Explorer en el mes de enero del 2014.

    var ap = 0;
    var af = (2 * Math.PI / 100) * oData.IE;
    var Xap = X + r * Math.cos(ap);
    var Yap = Y + r * Math.sin(ap);

    ctx.beginPath();
    ctx.fillStyle = oColores.IE;
    ctx.moveTo(X, Y);
    ctx.lineTo(Xap, Yap);
    ctx.arc(X, Y, r, ap, af);
    ctx.closePath();
    ctx.fill();
  }
}

El ángulo de partida del sector circular ap = 0 y el ángulo final af = (2*Math.PI/100)*oData.IE donde (2*Math.PI/100) representa el 1% de la circunferencia, y oData.IE corresponde a la propiedad IE del objeto oData. En este caso oData.IE = 10.2
Xap e Yap son las coordinadas en la circunferencia donde empieza el sector circular, y el color de relleno de este fillStyle = oColores.IE.

Recuerde como dibujar un sector circular en el canvas


var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext('2d');
  if (ctx) {
    var oData = {
      'IE': '10.2',
      'Firefox': '26.9',
      'Chrome': '55.7',
      'Safari': '3.9',
      'Opera': '1.8'
    };
    var oColores = {
      'IE': '#6495ED',
      'Firefox': '#FF8C00',
      'Chrome': '#FFD700',
      'Safari': '#32CD32',
      'Opera': '#DC143C',
      'otros': '#ddd'
    };
    // el radio del gráfico;					
    var r = 100;
    // las coordenadas del centro del canvas
    var X = canvas.width / 2
    var Y = canvas.height / 2;
    // dibuja un circulo gris en el centro del canvas
    ctx.fillStyle = '#ddd';
    ctx.moveTo(X, Y);
    ctx.arc(X, Y, r, 0, 2 * Math.PI);
    ctx.fill();
    // dibuja un sector circular		
    var ap = 0;
    var af = (2 * Math.PI / 100) * oData.IE;
    var Xap = X + r * Math.cos(ap);
    var Yap = Y + r * Math.sin(ap);

    ctx.beginPath();
    ctx.fillStyle = oColores.IE;
    ctx.moveTo(X, Y);
    ctx.lineTo(Xap, Yap);
    ctx.arc(X, Y, r, ap, af);
    ctx.closePath();
    ctx.fill();
  }
}

Estadísticas de uso de navegadores
( para el mes de enero del año 2014 )

Su navegador no soporta canvas :(

Aligerando el código

Observamos que podemos escribir una función que dibuja un sector circular. Esto aligerará mucho el código más adelante.
La función sectorCircular( ap, af, color ) toma 3 argumentos: ap ( ángulo de partida ), af ( ángulo final ) y el color.


function sectorCircular(ap, af, color) {
  var Xap = X + r * Math.cos(ap);
  var Yap = Y + r * Math.sin(ap);

  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(X, Y);
  ctx.lineTo(Xap, Yap);
  ctx.arc(X, Y, r, ap, af);
  ctx.closePath();
  ctx.fill();
}

Continúa leyendo...