⇪

Añadir una lista de opciones

facebook-svg gplus-svg twitter-svg

Esta es una continuación de gráficos circulares (3)

Desde 2008 hasta 2014

El gráfico que acabamos de dibujar está muy bien, pero me gustaría saber que pasaba en 2008 cuando Internet Explorer era todavía el navegador más utilizado, y Google Chrome no existía, y me gustaría saber como creció Firefox, y Google Chrome, y como IE perdió importancia hasta quedarse con solo el 10% de usuarios.

Para poder verlo todo empezamos añadiendo al HTML una lista desplegable ( <select> ) con 7 opciones ( de 2008 hasta 2014 ). También en el titulo <h4> habrá un pequeño cambio: En el lugar del año ( 2014 ) ahora aparece <span id="output">. Manipularemos el contenido de este <span> a través de JavaScript para que el año cambie cada vez que alguien selecciona otra opción de la lista desplegable.



Estadísticas de uso de navegadores

( para el mes de enero del año  )

En el JavaScript habrá más cambios. De entrada la variable oData se transformará en un objeto de objetos, uno para cada ano de la lista desplegable.


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

Por lo cual habrá que escribir una función ( queAno() ) que nos permita saber que año acaba de seleccionar el usuario, y almacenarlo en una variable ( var ano ).


function queAno() {
    var selectAno = document.getElementById('losAnos'); // la lista desplegable
    var index = selectAno.selectedIndex;
    var ano = selectAno.options[index].innerHTML;
    return ano;
  }
  ..................
  // almacena el año en una variable
var ano = queAno();

La función sectorCircular() queda igual que antes.


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();
}

La función laLeyenda() queda casi sin cambiar. Solo que esta vez toma como argumento el año ( var ano ), y utilizamos el objeto oData[ano] para recuperar los datos necesarios para construir el gráfico.


function laLeyenda(ano) {
  var ly = Y;
  var lx = (canvas.width / 2) - offset + r + 30;
  ctx.textBaseline = 'top';
  ctx.font = '12px Verdana';
  var otrosValue = 100;
  for (var propiedad in oData[ano]) {
    ctx.fillStyle = oColores[propiedad];
    ctx.fillRect(lx, ly, 15, 15);
    ctx.fillStyle = '#333';
    ctx.fillText(propiedad + ': ' + oData[ano][propiedad] + '%', lx + 25, ly);
    otrosValue -= oData[ano][propiedad];
    ly += 23;
  }
  otrosValue = Math.round(otrosValue * 10) / 10;
  ctx.fillStyle = oColores.otros;
  ctx.fillRect(lx, ly, 15, 15);
  ctx.fillStyle = '#333';
  ctx.fillText('otros: ' + otrosValue + '%', lx + 25, ly);
}

A la función dibujarGrafico(), que también tomará como argumento el año, habrá algunos cambios importantes. En primer lugar llamaremos el método clearRect para limpiar el <canvas> cada vez que se actualiza el gráfico. A continuación el código queda casi sin cambiar, pero utilizaremos objeto oData[ano] en lugar de oData.
Al final la función dibujarGrafico() llama laLeyenda(ano). 


function dibujarGrafico(ano) {
  // limpia el canvas	
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // actualiza el año en el titulo
  document.getElementById('output').innerHTML = ano;
  // dibuja el gráfico
  ctx.fillStyle = oColores.otros;
  ctx.arc(X, Y, r, 0, 2 * Math.PI);
  ctx.fill();
  var ap = 0;
  for (var propiedad in oData[ano]) {
    var af = ap + (2 * Math.PI / 100) * oData[ano][propiedad];
    sectorCircular(ap, af, oColores[propiedad]);
    ap = af;
  }
  // llama la función laLeyenda		
  laLeyenda(ano);
}

Y lo mas importante: al cambiar lo seleccionado en la lista desplegable actualizamos el gráfico.


selectAno = document.getElementById('losAnos');
selectAno.onchange = function() {
  dibujarGrafico(queAno());
}

Poniendolo todo junto



Estadísticas de uso de navegadores

( para el mes de enero del año  )







var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext('2d');
  if (ctx) {

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

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

    function queAno() {
      var selectAno = document.getElementById('losAnos');
      var index = selectAno.selectedIndex;
      var ano = selectAno.options[index].innerHTML;
      return ano;
    }

    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();
    }

    function laLeyenda(ano) {
      var ly = Y;
      var lx = (canvas.width / 2) - offset + r + 30;
      ctx.textBaseline = 'top';
      ctx.font = '12px Verdana';
      var otrosValue = 100;
      for (var propiedad in oData[ano]) {
        ctx.fillStyle = oColores[propiedad];
        ctx.fillRect(lx, ly, 15, 15);
        ctx.fillStyle = '#333';
        ctx.fillText(propiedad + ': ' + oData[ano][propiedad] + '%', lx + 25, ly);
        otrosValue -= oData[ano][propiedad];
        ly += 23;
      }
      otrosValue = Math.round(otrosValue * 10) / 10;
      ctx.fillStyle = oColores.otros;
      ctx.fillRect(lx, ly, 15, 15);
      ctx.fillStyle = '#333';
      ctx.fillText('otros: ' + otrosValue + '%', lx + 25, ly);
    }

    function dibujarGrafico(ano) {
      // limpia el canvas	
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // actualiza el año en el titulo
      document.getElementById('output').innerHTML = ano;
      // dibuja el gráfico
      ctx.fillStyle = oColores.otros;
      ctx.arc(X, Y, r, 0, 2 * Math.PI);
      ctx.fill();
      var ap = 0;
      for (var propiedad in oData[ano]) {
        var af = ap + (2 * Math.PI / 100) * oData[ano][propiedad];
        sectorCircular(ap, af, oColores[propiedad]);
        ap = af;
      }
      // llama la función laLeyenda		
      laLeyenda(ano);
    }

    var ano = queAno();
    // en el titulo escribe el año: 2014	
    document.getElementById('output').innerHTML = ano;

    var r = 100;
    var offset = 75;
    var X = (canvas.width / 2) - offset;
    var Y = canvas.height / 2;
    // inicia el canvas dibujando el gráfico para 2014								
    dibujarGrafico(ano);
    // cada vez que cambia el año cambiará el gráfico
    selectAno = document.getElementById('losAnos');
    selectAno.onchange = function() {
      dibujarGrafico(queAno());
    }
  }
}

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