Gráficos de líneas (1)
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
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;
}
}
}