Categoría: HTML5

Gráficos Estadísticos con jqPlot
En aplicaciones en los que introducimos una gran cantidad de datos, lo más lógico será posteriormente explotar esos datos y obtener estadísticas e informes. En estos casos los datos obtenidos se visualizan de una manera óptima en gráficas que nos ayudan representar visualmente la gran cantidad de datos que en muchos casos hemos obtenido. Una manera fácil de generar gráficos estadísticos en aplicaciones web es utilizar javascript para mostrarlas en tiempo de ejecución.

La opción que utilizo para generar gráficas pasa por jQuery junto con jqPlot. Se trata de un plugin jQuery que genera gráficos estadísticos en el navegador dentro de tus páginas web. Soporta gráficas lineales, de barras y circulares (en forma de tarta). Tiene numerosas opciones de configuración como la inclusión de sombras y la interacción con eventos drag&drop. jqPlot ha sido probado en IE7, IE8 o superior, Firefox, Chrome, Safari y Opera. La licencia de uso es MIT y GPL versión 2, por lo que podemos utilizarlo libremente de forma gratuita en nuestros proyectos. Requiere jQuery (1.4.3 o superior para algunas características), la cual está incluida en la distribución.

Uso de la librería

Antes de nada debemos descargar jqPlot y lo podemos hacer desde la sección de descargas de la página del proyecto: http://www.bitbucket.org/cleonello/jqplot/

Para usar jqPlot debes incluir en tu página web: jquery, jqPlot, el fichero css de jqPlot y opcionalmente, el script excanvas para que tu página soporte canvas en Internet Explorer (esta característica HTML5 no la soportan las versiones de IE anteriores a la versión 9. Si es superior no es necesario incluir excanvas):
```

<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
```
Lo siguiente es añadir el contenedor de la gráfica. Se trata de una capa a la que podemos darle si deseamos un ancho y un alto. Lo que es obligatorio es indicar un id.
```
<div id="chartdiv" style="height:400px;width:300px; "></div>
```
Creamos la gráfica llamando a la función jqplot, con dos parámetros obligatorios, el id de la capa contenedora y un array con los datos, normalmente enviados por el servidor y obtenidos desde base de datos. La invocación al método suele realizarse cuando la página está preparada:
```
<script type="text/javascript">
  
</script>
```
Esto generará una gráfica como la siguiente:

Opciones de jqPlot

Podemos personalizar la gráfica pasando parámetros a la función como tercer parámetro, de la forma:
```
$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});
```
Todas las opciones disponibles están descritas en el fichero jqPlotOptions.txt de la distribución.

Dependiendo de las características y de lo complejo que queramos que sea nuestra gráfica es posible que necesitemos incluir en nuestra página enlaces a otros plugins que se incluyen el la distribución jqPlot. Hay plugins para personalizar el renderizado de gráficas de barras con varias series, para personalizar la leyenda, las etiquetas en los ejes, etc:
```

<script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>

<script type="text/javascript" src="js/jqplot/jqplot.pieRenderer.min.js"></script>    
<script type="text/javascript" src="js/jqplot/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/jqplot/jqplot.enhancedLegendRenderer.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/jqplot/jquery.jqplot.css" />
```
Ejemplos

En el siguiente enlace se puede ver la librería en funcionamiento con varios ejemplos. A continuación algunas imágenes con diferentes tipos de gráficas:

Gráficas lineales: http://www.jqplot.com/tests/line-charts.php

Gráficas circulares: http://www.jqplot.com/tests/pie-donut-charts.php

Gráficas de barras: http://www.jqplot.com/tests/bar-ch arts.php

Ni que decir tiene que jqPlot no es la única librería jQuery para la generación de gráficos estadísticos. A continuación os dejo dos enlaces a páginas dónde se enumeran varias alternativas:
- 5 Top jQuery Chart Libraries for Interactive Charts
- 20 Useful jQuery Chart and Graph Plugins
6 mayo, 2013
Placeholder en Internet Explorer
Placeholder es un atributo HTML5 utilizado como una pequeña pista o descripción corta del valor esperado en un campo de texto dentro de un formulario, como por ejemplo «Buscar», «Introduzca su e-mail», etc. Esta descripción se muestra dentro de la caja de texto cuando éste se encuentra vacío y desaparece cuando el elemento obtiene el foco.

Cómo hemos dicho se encuentra disponible desde la versión de HTML5 y su uso se encuentra bastante extendido en aplicaciones y páginas a lo largo y ancho de Internet. Funciona en los campos input de tipo: text, search, url, tel, email y password. Es soportado por todos los navegadores (Firefox, Opera, Chrome, Safari, etc.), pero existe un problema si quieres utilizarlo con Internet Explorer (de momento ninguna versión lo soporta).

Navegando por la web en busca de una solución para aplicar a uno de los proyectos en los que trabajo, cuya interfaz debe ser similar en todos los navegadores, encontré ésta que usa jQuery. jQuery es una librería javascript, que siempre es aplicable a multitud de problemas y usos, para alterar el comportamiento y visualización de los documentos web en navegadores, así como realizar peticiones asíncronas (ajax), y de la que ya os he hablado en otros artículos.

Podemos usar el siguiente código:
```
$(function() {
    if(!$.support.placeholder) {

            var active = document.activeElement;

            $(':text').focus(function () {
                    if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                            $(this).val('').removeClass('hasPlaceholder');
                    }

            }).blur(function () {
                    if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                    }
            });

            $(':text').blur();
            $(active).focus();

            $('form').submit(function () {
                    $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });

    }
});
```
Y este podría ser el css con el estilo, ya que el color de la letra del placeholder aparecería en un tono más grisáceo, como difuminado:
```
.hasPlaceholder { color: #777; } 
```
Lo que hace el código es sobreescribir el evento focus (posicionas el foco) y blur (el foco abandona el elemento) para elementos de tipo texto, en aquellos navegadores que no soportan el atributo placeholder, vamos en IE. Cuando se producen dichos eventos, leen el texto del atributo placeholder y lo muestran como valor del elemento (blur) aplicando la clase hasplaceholder, o bien borran el valor del campo (focus) y eliminan la clase hasplaceholder del campo de texto.

También se sobreescribe el evento submit, para borrar todos los valores de los campos de texto que muestran el texto placeholder, justo antes de enviar el formulario al servidor evitando que esos campos tengan valores incorrectos.

Se trata de una solución bastante elegante y nada intrusiva, porque sólo se aplica si el navegador no soporta el atributo. En caso de utilizar placeholder con Firefox, Safari, Chrome… el código jQuery no tiene efecto.
13 junio, 2012