Añadir una leyenda

facebook-svg gplus-svg twitter-svg

Esta es una continuación de gráficos de líneas (1)

Añadir los demás navegadores

A continuación queremos dibujar los gráficos para los demás navegadores. Para esto escribimos un bucle for que recorre todas las propiedades ( navegadores ) del objeto oData ( for(var nav in oData) ), y reemplazamos oData["Firefox"] del ejemplo anterior con oData[nav] – donde nav es una variable que almacena el nombre del navegador.


for (var nav in oData) {
  ctx.beginPath();
  ctx.strokeStyle = oData[nav]['color'];
  ctx.fillStyle = oData[nav]['color'];
  ctx.moveTo(80, 270 - (oData[nav][i] * 60) / 15);
  var o = 80;
  // para cada propiedad en el objeto oData
  for (var i = 2008; i <= 2014; i++) {
    ctx.lineTo(o, 270 - (oData[nav][i] * 60) / 15);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(o, 270 - (oData[nav][i] * 60) / 15, 3, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
    ctx.moveTo(o, 270 - (oData[nav][i] * 60) / 15);
    o += 60;
  }
}

Añadir una leyenda

También hemos escrito una función que dibuja la leyenda.
La función recorre el objeto oData ,dibuja un pequeño rectángulo del color del navegador ( oData[nav]["color"] ) y escribe al lado el nombre del navegador.


function laLeyenda() {
  // las coordenadas de la esquina derecha arriba de la leyenda
  var ly = 160;
  var lx = 500;
  ctx.textBaseline = "top";
  ctx.textAlign = "left";
  ctx.font = "12px Verdana";
  for (var nav in oData) {
    ctx.beginPath();
    // el color que representa el navegador
    ctx.fillStyle = oData[nav]["color"];
    // la casilla
    ctx.fillRect(lx, ly, 15, 15);
    // el nombre del navegador
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.fillText(nav, lx + 25, ly);
    // calcula el valor de ly para la siguiente línea
    ly += 23;
  }
}

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;
    }
    // define el estilo de texto
    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 
    function laLeyenda() {
      // las coordenadas de la esquina derecha arriba de la leyenda
      var ly = 160;
      var lx = 500;
      ctx.textBaseline = "top";
      ctx.textAlign = "left";
      ctx.font = "12px Verdana";
      for (var nav in oData) {
        ctx.beginPath();
        // el color que representa el navegador
        ctx.fillStyle = oData[nav]["color"];
        // la casilla
        ctx.fillRect(lx, ly, 15, 15);
        // el nombre del navegador
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.fillText(nav, lx + 25, ly);
        // calcula el valor de ly para la siguiente línea
        ly += 23;
      }
    }
    ctx.lineWidth = 2;
    for (var nav in oData) {
      ctx.beginPath();
      ctx.strokeStyle = oData[nav]["color"];
      ctx.fillStyle = oData[nav]["color"];
      ctx.moveTo(80, 270 - (oData[nav][i] * 60) / 15);
      var o = 80;
      // para cada propiedad en el objeto oData
      for (var i = 2008; i <= 2014; i++) {
        ctx.lineTo(o, 270 - (oData[nav][i] * 60) / 15);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(o, 270 - (oData[nav][i] * 60) / 15, 3, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fill();
        ctx.moveTo(o, 270 - (oData[nav][i] * 60) / 15);
        o += 60;
      }
    }
    // llama la función laLeyenda;	
    laLeyenda();
  }
}								
Su navegador no soporta canvas :(

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...