⇪

Gráficos de líneas (1)

facebook-svg gplus-svg twitter-svg

Los gráficos de líneas son una buena solución para representar los datos numéricos. Resultan especialmente útiles para expresar los cambios que se producen a lo largo del tiempo.
A continuación vamos a dibujar un gráfico de líneas que muestra las tendencias en el uso de los principales navegadores a lo largo de siete años ( entre 2008 y 2014 ).

Empezamos declarando un objeto oData y algunas propiedades de este: los principales navegadores. ( Son los mismos datos que hemos utilizado antes, pero organizados de otra manera.) El valor asociado a cada navegador es otro objeto cuyas propiedades son los años desde 2008 hasta 2014. 

var oData = {
"IE":	  {"2008":"54.7","2009":"44.8", "2010":"36.2", "2011":"26.6", "2012":"20.1",  "2013":"14.3", "2014":"10.2", "color":"#6495ED"},
"Firefox":{"2008":"36.4","2009":"45.5", "2010":"46.3", "2011":"42.8", "2012":"37.2",  "2013":"30.2", "2014":"26.9", "color":"#FF8C00"},
"Chrome": {"2008":"0",   "2009":"3.9",  "2010":"10.8", "2011":"23.8", "2012":"35.3",  "2013":"48.4", "2014":"55.7", "color":"#FFD700"},
"Safari": {"2008":"1.9", "2009":"3.0",  "2010":"3.7",  "2011":"4.0",  "2012":"4.3",   "2013":"4.2",  "2014":"3.9",  "color":"#32CD32"},
"Opera":  {"2008":"1.4", "2009":"2.3",  "2010":"2.2",  "2011":"2.5",  "2012":"2.4",   "2013":"1.9",  "2014":"1.8",  "color":"#DC143C"}
};

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 en el canvas.
Por todo lo demás el código va acompañado de comentarios explicativos.


// 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;
}

Para acabar la cuadricula tenemos que escribir los años y marcar el punto que los representa en el eje horizontal.


// define algunos estilos para el texto								
ctx.textAlign = "center";
ctx.textBaseline = "top";
// empieza a dibujar a 80px del margen izquierdo
var o = 80;
// para cada año
for (var i = 2008; i <= 2014; i++) {
  // marca el punto
  ctx.moveTo(o, 268);
  ctx.lineTo(o, 272);
  ctx.stroke();
  // escribe el año
  ctx.fillStyle = "blue";
  ctx.fillText(i, o, 275);
  //aumenta la distáncia en 60px
  o += 60;
}

Dibujar el gráfico para Firefox

Para dibujar el gráfico para Firefox utilizamos un bucle for que recurre los años entre 2008 y 2014:
for(var i = 2008; i<=2014; i++)
Para cada año el bucle dibuja una línea  desde el punto anterior
ctx.lineTo(o, 270-(oData['Firefox'][i] * 60)/15);
y un pequeño circulo con el radio de 3px.
ctx.arc(o, 270-(oData['Firefox'][i] * 60)/15, 3,0,2*Math.PI);
Al final para evitar que la línea quede ligeramente desviada, mueve el "lápiz" hacia atrás, en el centro del pequeño círculo: ctx.moveTo(o, 270-(oData['Firefox'][i] * 60)/15);.


// define allgunos estilos
ctx.lineWidth = 2;
ctx.strokeStyle = oData['Firefox']['color'];
ctx.fillStyle = oData['Firefox']['color'];
// empieza a trazar el gráfico
ctx.beginPath();
ctx.moveTo(80, 270 - (oData['Firefox']['2008'] * 60) / 15);
var o = 80;
// para cada propiedad en el objeto oData
for (var i = 2008; i <= 2014; i++) {
  ctx.lineTo(o, 270 - (oData['Firefox'][i] * 60) / 15);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(o, 270 - (oData['Firefox'][i] * 60) / 15, 3, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.fill();
  // para evitar que la línea quede lojeramente desviada
  ctx.moveTo(o, 270 - (oData['Firefox'][i] * 60) / 15);
  o += 60;
}

Poniéndolo todo junto

Su navegador no soporta canvas :( 

var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
  if (ctx) {
	var oData = {
	"IE":	  {"2008":"54.7","2009":"44.8", "2010":"36.2", "2011":"26.6", "2012":"20.1",  "2013":"14.3", "2014":"10.2", "color":"#6495ED"},
	"Firefox":{"2008":"36.4","2009":"45.5", "2010":"46.3", "2011":"42.8", "2012":"37.2",  "2013":"30.2", "2014":"26.9", "color":"#FF8C00"},
	"Chrome": {"2008":"0",   "2009":"3.9",  "2010":"10.8", "2011":"23.8", "2012":"35.3",  "2013":"48.4", "2014":"55.7", "color":"#FFD700"},
	"Safari": {"2008":"1.9", "2009":"3.0",  "2010":"3.7",  "2011":"4.0",  "2012":"4.3",   "2013":"4.2",  "2014":"3.9",  "color":"#32CD32"},
	"Opera":  {"2008":"1.4", "2009":"2.3",  "2010":"2.2",  "2011":"2.5",  "2012":"2.4",   "2013":"1.9",  "2014":"1.8",  "color":"#DC143C"}
	};
    // 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;
    }
    // la cuadricula para el eje horizontal
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    // empezamos a dibujar a 80px del margen izquierdo
    var o = 80;
    for (var i = 2008; i <= 2014; i++) {
      ctx.moveTo(o, 268);
      ctx.lineTo(o, 272);
      ctx.stroke();
      ctx.fillStyle = "blue";
      ctx.fillText(i, o, 275);
      o += 60;
    }
    // GRAFICO PARA FIREFOX
    // define allgunos estilos
    ctx.lineWidth = 2;
    ctx.strokeStyle = oData["Firefox"]["color"];
    ctx.fillStyle = oData["Firefox"]["color"];
    // empieza a trazar el gráfico
    ctx.beginPath();
    ctx.moveTo(80, 270 - (oData["Firefox"]["2008"] * 60) / 15);
    var o = 80;
    // para cada propiedad en el objeto oData
    for (var i = 2008; i <= 2014; i++) {
      // dibuja la línea	
      ctx.lineTo(o, 270 - (oData["Firefox"][i] * 60) / 15);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(o, 270 - (oData["Firefox"][i] * 60) / 15, 3, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fill();
      // para evitar que la línea quede lojeramente desviada
      ctx.moveTo(o, 270 - (oData["Firefox"][i] * 60) / 15);
      o += 60;
    }
  }
}
Su navegador no soporta canvas :(

Continúa leyendo...