Artículos
Java

Gráficos de torta y barras con JFreeChart

Creado: 31/May/2012 Actualizado: 29/Dic/2014

El otro día veíamos como crear, de una forma sencilla, un gráfico con JFreeChart. Hoy les presento una forma muy fácil para crear y mostrar un gráfico de torta y uno de barras en Java con JFreeChart.

Recordar que lo primero es descargarse las librerías de JFreeChart. Vamos a necesitar las siguientes librerías JFreeChart y JCommon

Una vez que estén importados los respectivos .jar podremos comenzar a ver el código.

Una forma fácil que se me ocurrió para mostrarles el funcionamiento de esta librería fue crear unos 10000 números aleatorios entre 0 y 9 y llevar un registro de cuantas veces apareció cada número. Para esto tenemos el siguiente código:

Random rnd = new Random(System.currentTimeMillis());
// Establece una semilla para el random
int[] array = new int[10];
for (int i = 0; i < 10000; i++)
  array[rnd.nextInt(10)]++;

Cada vez que el random da un numero, se aumenta en uno la cantidad de veces que fue dado. Una vez finalizado el algoritmo tenemos un arreglo donde en cada índice se indica cuantas veces surgió ese índice del random.

Luego, procederemos a crear el gráfico de torta en base a nuestro arreglo con JFreeChart. Lo tendremos todo en el método crearGraficoTorta.

private static JPanel crearGraficoTorta(int[] array) {...} 

Lo primero será crear un dataset donde vamos a almacenar las distintas ‘porciones’ de la torta. Es por ello que utilizamos una clase DefaultPieDataSet de JFreeChart.

DefaultPieDataset dataset = new DefaultPieDataset();
for (int i = 0; i < array.length; i++)
  dataset.setValue("Valor " + i + ": " + array[i], array[i]);

Utilizamos un bucle for para agregar las ‘porciones’ a nuestro grafico de torta. El ultimo parametro indica el valor de la torta que ocupa cada porcion.

Luego, en base a este dataset, creamos nuestro gráfico. Utilizamos la factoría de creación de gráficos de JFreeChart, la ChartFactory.

JFreeChart chart = ChartFactory.createPieChart("Repeticion de randoms",
  dataset, true, true, true);

Podemos hacer algunas mejoras sobre el propio gráfico con JFreeChart como añadirle un fondo o quitar la leyenda:

chart.setBackgroundPaint(Color.white);
chart.removeLegend();

Finalmente, retornamos un panel que contenga a esa torta.

Ahora, procederemos a crear el gráfico de barras en base a nuestro arreglo.

private static JPanel crearGraficoBarras(int[] array) {...}

Volvemos a crear un dataset donde vamos a almacenar las distintas ‘barras’. En este caso es un DefaultCategoryDataSet.

DefaultCategoryDataset dataset = new DefaultCategoryDataset();
String serie = "Numeros";
for (int i = 0; i < array.length; i++)
  dataset.addValue(array[i], serie, "" + i);los valores son añadidos al DataSet con un addValue().

Una vez completado el dataset, se crea el grafico de barras en base a el.

JFreeChart chart = ChartFactory.createBarChart("Repeticion de randoms", null, 
  null, dataset, PlotOrientation.HORIZONTAL, true, true, false);

Para terminar debemos agregar los gráficos a un frame para poder verlos:

JFrame frame = new JFrame("CrearGraficos - LineaDeCodigo");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(2, 1));
frame.add(crearGraficoTorta(array));
frame.add(crearGraficoBarras(array));
frame.pack(); 
frame.setLocationRelativeTo(null); 
frame.setVisible(true);

En este código hemos añadido los gráficos mediante el método .add() del JFrame. Adicionalmente hemos redimensionado el tamaño del frame, al minimo posible con el método .pack() y centrado el frame con .setLocationRelativeTo(null).

Nuestro resultado final para crear gráficos de torta y barras con JFreeChart nos quedará de la siguiente forma:
JFreeChart3

Una vez que saben como hacer uno de estos gráficos con JFreeChart, el resto (Líneas de Tiempo, Gráficos XY, etc.) son básicamente el mismo procedimiento con algunos detalles con respecto al dataset de cada tipo.

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
jQuery Mobile

Listas con imágenes en jQuery Mobile

Creado: 30/May/2012 Actualizado: 25/Ago/2021

Las listas de elementos que desarrollemos para nuestros dispositivos móviles con jQuery Mobile no solo tiene por qué estar compuestas de texto, si no que también pueden contener imágenes dentro de la lista.

Imaginemos una lista de películas dónde cada una de las películas lleva la caratula de dicha película.

ListaImagenes

Lo primero que tenemos que hacer es crear la lista de elementos mediante el atributo data-role=»listview».

<ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Qué película buscas?">			
  <li><a href="#"><h3>Casablanca</h3></a></li>
  <li><a href="#"><h3>Charada</h3></a></li>			
  <li><a href="#"><h3>Dos Hombres y Un Destino</h3></a></li>			
</ul>

Vemos que hemos utilizado un elemento H3 para dar mayor relevancia al contenido del elemento de la lista. Ya que luego seguiremos añadiendo información a dicho elemento y el título será lo más representativo.

Ahora para meter la imagen simplemente tendremos que utilizar un elemento IMG de HTML. Pondremos el elemento IMG antes del contenido del título:

<ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Qué película buscas?">			
  <li><a href="#"><img loading="lazy" src="img/casablanca.png" width="100" height="100"><h3>Casablanca</h3></a></li>
  <li><a href="#"><img loading="lazy" src="img/charada.png" width="100" height="100"><h3>Charada</h3></a></li>			
  <li><a href="#"><img loading="lazy" src="img/doshombresyundestino.png" width="100" height="100"><h3>Dos Hombres y Un Destino</h3></a></li>
</ul>

Ya tenemos las imágenes puestas dentro de nuestra lista de elementos en jQuery Mobile. Ahora ya solo nos queda meter mas información a los elementos. Eso, sí, solo si queremos.

Al final el código jQuery Mobile nos quedará de la siguiente forma:

<ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Qué película buscas?">			
  <li><a href="#"><img loading="lazy" src="img/casablanca.png" width="100" height="100"><h3>Casablanca</h3><p>Situado en África desocupada durante... <br>Categoría: Drama</p></a></li>
  <li><a href="#"><img loading="lazy" src="img/charada.png" width="100" height="100"><h3>Charada</h3><p>El romance y suspenso en París, como una mujer... <br>Categoría: Comedia</p></a></li>			
  <li><a href="#"><img loading="lazy" src="img/doshombresyundestino.png" width="100" height="100"><h3>Dos Hombres y Un Destino</h3><p>Dos ladrones de bancos y trenes occidentales ladrones huyen a Bolivia ...<br>Categoría: Biografía</p><p></p></a></li>
</ul>
Artículos
Java

Gráficos en Java con JFreeChart

Creado: Actualizado: 29/Dic/2014

Mientras tanto hago el análisis de mi proyecto de título me he visto en la necesidad de buscar algunas librerías gráficas para que me faciliten el trabajo en Java, es así que he llegado a JFreeChart, librería para estadísticas gráficas. Hoy por hoy les explicaré lo sencillo que resulta crear un gráfico con JFreeChart.

Lo primero que tenemos que hacer es agregar la librerías de JFreeChart, si no las tenemos, podemos acceder a ellas desde la página de sus programadores.

Principalmente trabajaremos con dos librerías que son jcommon-1.0.16.jar y jfreechart-1.0.13.jar

Las librerías quedarán así en tu proyecto:

JFreeChart

Una vez que hayamos agregado las librerías de JFreeChart cremos un proyecto nuevo y agregamos un JFrame. Este JFrame puede servir directamente como un gráfico, pero en éste ejemplo lo he usado para agregar un botón que hará la llamada del gráfico en un nuevo JFrame.

Nos vamos a el JFrame que ya agregamos, y añadimos sobre él un botón, el cual llamará al gráfico. Visualmente debería quedar algo así:

JFreeChart2

Lo primero será declarar un atributo JFrame dentro de nuestra clase, la cual hemos llamado GraficosJFreeChart:

JFrame frame = new JFrame("Probando JFreeChart");

El constructor de JFreeChart inicializaremos el JFrame, cambiaremos su tamaño y posición en la pantalla:

frame.setSize(500, 270);
frame.setLocationRelativeTo(getRootPane());
this.setLocationRelativeTo(getRootPane());

Cabe destacar que cuando hacemos referencia a «this» estamos haciendo referencia a la ventana de la clase principal en éste caso la primera que agregamos.

La acción de click sobre el botón será la que lance toda la ejecución y carga de los gráficos JFreeChart.

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {...} 

Lo primero que haremos con los gráficos JFreeChart es crear un DataSet, que es dónde vamos a meter los datos que representaremos gráficamente. Para ello utilizamos un DefaultCategoryDataset y añadimos los valores mediante el método .addValue().

DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.addValue(1.0, "Row 1", "Column 1");
dataset.addValue(5.0, "Row 1", "Column 2");
dataset.addValue(3.0, "Row 1", "Column 3");
dataset.addValue(2.0, "Row 2", "Column 1");
dataset.addValue(3.0, "Row 2", "Column 2");
dataset.addValue(2.0, "Row 2", "Column 3");
dataset.addValue(10.0,"Row 3", "Column 4");
dataset.addValue(10.0,"Row 3", "Column 4");

Destaquemos que las llamadas al método addValue() se agregan un valor, un fila y una columna determinada. ¿Estas pensando en una base de datos? Sí, fácilmente podrían salir los datos de una base de datos. Quizás mas adelante lo expliquemos.

Una vez que tenemos el DataSet relleno nos dedicaremos a generar el gráfico. Los gráficos en JFreeChart se generan mediante la factoría CharFactory. En este caso, como queremos crear un gráfico de barras utilizamos el método .createBarChart().

JFreeChart chart = ChartFactory.createBarChart(
  "Ejemplo básico para Linea de Codigo",
  "Categorías",
  "Valores",
  dataset,
  PlotOrientation.VERTICAL,
  true,
  true,
  true
);

En la creación del gráfico al método createBarChart le pasamos el título, los valores de los textos de los ejes, si queremos que haya leyenda,… y lo más importante el DataSet con los datos.

El gráfico creado hay que mostrarlo. Para mostrar un gráfico en JFreeChart hay que ponerlo en un Panel. Así que creamos un panel con la clase ChartPanel al cual le pasamos como parámetro el gráfico que acabamos de crear. Después mostramos el panel en el JFrame.

ChartPanel chartPanel = new ChartPanel(chart, false);
frame.setContentPane(chartPanel);
frame.setVisible(true);

Ya tenemos nuestro primer gráfico con Java y JFreeChart.

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
jQuery Mobile

Listas Ordenadas con jQuery Mobile

Creado: 28/May/2012 Actualizado: 26/Dic/2024

Aunque en los ejemplos que hemos visto hasta ahora con jQuery Mobile (lista de elementos, filtrar elementos, listas anidadas,…) las listas utilizadas no tenían ningún orden, con jQuery Mobile podemos crear listas ordenadas para presentar el contenido.

Para poder crear listas ordenadas con jQuery Mobile simplemente tenemos que recurrir a la estructura HTML de las listas ordenadas. Es decir, al elemento OL. De esta forma, si una lista desordenada con jQuery Mobile era:

<ul data-role="listview" data-inset="true">
  ...
</ul>

Una lista ordenada con jQuery Mobile será:

<ol data-role="listview" data-inset="true">
  ...
</ol>

Recuerda que las listas en jQuery Mobile se demarcan con el atributo data-role al cual le asignamos el valor «listview».

Quedándonos el código fuente de una lista ordenada con jQuery Mobile de la siguiente forma:

<ol data-role="listview" data-inset="true" data-filter="true">
  <li><a href="#">Espartaco</a></li>
  <li><a href="#">La Naranja Mecánica</a></li>
  <li><a href="#">El Padrino</a></li>
  <li><a href="#">Sin Perdón</a></li>
  <li><a href="#">Dos Hombres y Un Destino</a></li>
</ol>	

De esta forma tan sencilla hemos conseguido crear listas ordenadas con jQuery Mobile.

Código Fuente

Descárgate el código fuente de Listas Ordenadas con jQuery Mobile
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
jQuery Mobile

Filtrar elementos con jQuery Mobile

Creado: 26/May/2012

jQuery Mobile nos ofrece un mecanimo de filtrado de datos en cliente muy potente. Y es que podemos configurar las listas para que permitan filtrar los elementos.

Si partimos de una lista sencilla con jQuery Mobile:

  • Avila
  • Burgos
  • León
  • Palencia
  • Salamanca
  • Segovia
  • Soria
  • Valladolid
  • Zamora

Lo único que tenemos que hacer es insertar un atributo data-filter=»true». Este atributo de jQuery Mobile hará que aparezca un elemento de filtrado en nuestras listas.

  • Avila
  • Burgos
  • León
  • Palencia
  • Salamanca
  • Segovia
  • Soria
  • Valladolid
  • Zamora

Generando el siguiente resultado:

listaElementosjQueryMobile3

El siguiente paso será configurar el texto que aparece en la caja de filtrado. Para que aparezca algo representativo. Por ejemplo, si estamos buscando ciudades podríamos poner algo como «¿Qué ciudad estás buscando?». Lo que tenemos que hacer es modificar el placeholder del campo de búsqueda.

Para modificar el placeholder de la lista en jQuery Mobile tenemos dos opciones. La primera es mediante un atributo. Este es el attributo data-filter-placeholder. Lo que tendremos que hacer es darle como valor el texto que queremos que aparezca en el filtro.

    ...

La segunda forma que tenemos de modificar el texto de la caja de filtrado en jQuery Mobile es vía código. Y es que el texto del placeholder se puede modificar en la variable $.mobile.listview.prototype.options.filterPlaceholder. Por lo tanto, en el evento «mobileinit», es decir, cuando se está inicializando el framework podems modificar su valor.

$(document).bind("mobileinit", function(){
  $.mobile.listview.prototype.options.filterPlaceholder = "Texto del PlaceHolder Cambiado Por Código";    
});

Recuerda que para escuchar eventos en jQuery utilizamos el método .bind()

Esta segunda opción es más para una configuración general de los placeholder de todos los filtros de la aplicación. Es por ello que se suele sacar a un fichero de configuración custom-scripting.js en el cual podamos modificar sus valores de forma sencilla.

Pues manos a la obra y haz que tu aplicación pueda filtrar elementos con jQuery Mobile.

Artículos
HTML

Tablas HTML con borde

Creado: 24/May/2012 Actualizado: 08/Ene/2024

Si estás pensando cómo diseñar tablas HTML con borde y si ya has hecho el ejemplo de Crear una tabla con HTML habrás visto que el resultado de tu código no es parecido al esperado y que no hay ninguna línea que delimite la tabla. Esto es debido a que las tablas HTML por defecto no aparecen con borde.

Buscando documentación por Internet sobre cómo poner un borde a una tabla en HTML verás que se habla del atributo border. De esta forma el siguiente código nos permite crear una tabla con borde:

<table border="1">
  <tbody>
    <tr>
      <td>Artículo</td>
      <td>Cantidad</td>
    </tr>
    <tr>
      <td>Zapatillas</td>
      <td>1.500</td>
    </tr>
    <tr>
      <td>Gorras</td>
      <td>12.200</td>
    </tr>
    <tr>
      <td>Pantalones</td>
      <td>3.800</td>
    </tr>
    <tr>
      <td>Camisetas</td>
      <td>7.100</td>
    </tr>
  </tbody>
</table>

Si bien, el atributo border ya no se encuentra dentro de la especificación HTML y su uso no es aconsejado. La forma de crear una tabla HTML con borde es mediante hojas de estilo, es decir, CSS.

Lo que tenemos que hacer es añadir un estilo CSS a nuestra página web. Un estilo que vaya referente a las tablas. Es por ello que el selector utilizado en este caso es table y td.

table,td { ... }

Ya que si el borde solo se lo aplicamos a la tabla veremos que nos aparecerá únicamente el borde exterior.

La propiedad que nos permite crear el borde es border. Y los parámetros que le ponemos son el grosor del borde, el tipo de línea y el color. Así el código CSS para crear tablas HTML con borde es el siguiente:

table,td {
	border: 1px solid black;
}

De esta manera ya tendremos nuestras tablas HTML con borde utilizando un pequeño selector CSS.

Código Fuente

Descárgate el código fuente de Tablas HTML con borde
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Tablas HTML con borde

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Artículos
HTML

Crear una tabla en HTML

Creado: 23/May/2012 Actualizado: 29/May/2015

Las tablas son elementos que nos sirven en HTML para mostrar datos organizados. Si trabajas con programas de ofimática estarás familiarizado con su funcionamiento y las utilidades que puede tener una tabla.

Por ejemplo podemos tener una tabla que nos muestre los artículos que tenemos en un almacén. Algo parecido a:

tabla

El elemento HTML que preresenta a una tabla es TABLE. Con lo cual TABLE será el elemento padre a la hora de crear una tabla en HTML.

...

Ahora hay que conocer otros dos elementos que hay dentro de la tabla. El primero es TR. Este elemento representa una fila. Así que dentro del elemento TABLE tendremos tantos elementos TR como filas tenga nuestra tabla. Nosotros como tenemos 5 filas, pues ponemos 5 veces el elemento TR:

...............

Una vez que tenemos las filas definidas mediante el elemento TR vamos a poner las celdas. Las celdas se definen mediante el elemento TD. Dentro del elemento TD irá el contenido de la celda en cuestión.

De esta manera nuestra primera fila se representaría de la siguiente forma:


  Artículo
  Cantidad

Y la segunda fila de la siguiente forma:


  Zapatillas
  1.500

Como vemos la tabla en HTML es una secuencia de elementos TR representando las filas y TD representando las celdas.

tabla2

El código completo de nuestra tabla en HTML será el siguiente:

ArtículoCantidad
Zapatillas1.500
Gorras12.200
Pantalones3.800
Camisetas7.100

Ya hemos visto que es sencillo crear una tabla en HTML

Código Fuente

Descárgate el código fuente de Crear una tabla en HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Artículos
HTML5

Música infinita en tu web con HTML5

Creado: 20/May/2012 Actualizado: 09/Ene/2025

Ya hemos visto cómo Poner música en tu web con HTML5 de una forma sencilla manejando el elemento AUDIO. Ahora vamos a dar un pequeño paso más y es que vamos a poner música infinita en tu web con HTML5. Es decir, la canción que pongamos de fondo sonará una y otra vez de forma infinita.

Lo primero poner el audio en HTML5:

<audio src="micancion.mp3"></audio>

Lo bueno de la etiqueta AUDIO es que, por defecto, no nos muestra un panel con controles de reproducción. Lo cual hará que sea perfecto para poner nuestra música de fondo. Pero claro, deberemos de iniciar la canción. Para ello vamos a utilizar el primer atributo que es autoplay. Al atributo autoplay del AUDIO le daremos un valor true.

<audio src="micancion.mp3" autoplay="autoplay"></audio>

Ahora que ya tenemos la canción sonando de fondo vamos a conseguir que la música suene de forma infinita. En este caso usaremos el atributo loop. Al cual volveremos a dar nuevamente un valor de true.

<audio src="micancion.mp3" autoplay="autoplay" loop="loop"></audio>

Esta simple línea de código en HTML5 nos permite poner música infinita en tu web con HTML5.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
jQuery Mobile

Listas con botones de acción en jQuery Mobile

Creado: 19/May/2012 Actualizado: 18/May/2012

Cuando creamos una lista con jQuery Mobile, normalmente su uso será el de tener un conjunto de enlaces sobre los que podremos ejecutar la acción de navegar. Pero puede darse el caso que necesitemos que cada uno de los items de la lista tenga más de un comportamiento. Es decir que, además de poder navegar mediante los items, podamos añadir botones para ejecutar una segunda acción sobre el elemento.

ListasConBotones

Lo primero que haremos será crear una lista básica tal y como vimos en Listas de Elementos con jQuery Mobile.

Ahora, para insertar el botón de acción en cada uno de los items lo que tenemos que hacer es insertar un nuevo enlace anexo al contenido de cada uno de los elementos LI.

  • La Naranja MecánicaFavorita
  • En este enlace podremos elegir el tipo de botón mediante el atributo data-icon. Los valores que podemos poner al botón son:

    • Flecha a izquierda, arrow-l
    • Flecha a derecha, arrow-r
    • Flecha hacia arriba, arrow-u
    • Flecha hacía abajo, arrow-d
    • Borrar, delete
    • Más, plus
    • Menos, minus
    • Check, check
    • Motor (o engine), gear
    • Actualizar, refresh
    • Reenviar, forward
    • Volver, back
    • Grid, grid
    • Estrella, star
    • Alerta, alert
    • Info, info
    • Home, home
    • Buscar, search

    De esta manera, para poner una estrella como botón de acción escribiremos:

  • La Naranja MecánicaFavorita
  • Otra cosa que podemos personalizar del botón es el tema del botón. Es decir, el juego de colores con los que se representará. Cada botón puede tener su propio tema. Para poner un tema u otro utilizamos el atributo data-theme. Y los valores a asignar son ‘a’, ‘b’ o ‘c’.

  • El PadrinoFavorita
  • El código final de jQuery Mobile para crear listas con botones de acción quedaría de la siguiente forma:

    jQuery Mobile

    Divisores automáticos de listas con jQuery Mobile

    Creado: 17/May/2012

    En el artículo Divisores de listas con jQuery Mobile veíamos como organizar una lista de elementos para que saliese organizada por divisores.

    Así utilizando el atributo data-role=»listdivider» podíamos añadir elementos divisores en la lista.

    Uno de los inconvenientes que tiene la utilización de data-role=»listdivider» es que nos tenemos que asegurarnos de generar los elementos divisores.

    Pero tenemos otra opción en jQuery Mobile que es la de generar divisores automáticos en las listas. Para generar divisiores automáticos en jQuery Mobiledeberemos de utilizar el atributo data-autodividers=»true» asignado a una lista. Es decir, asignado a una lista data-role=»listview».

    Si bien hay que tener cuidado con el orden en el que generamos los items, ya que la organización de los divisores es en función del primera carácter. De esta manera ante un cambio de carácter genera automáticamente un divisor. Aunque en siguientes items vuelva a repetirse dicho carácter.

    El atributo data-autodividers=»true» solo está disponible a partir de jQuery Mobile 2.0. Es decir, que de momento solo podemos utilizarlo con las versiones en desarrollo. Así que puedes descargarte la última versión de jQuery Mobile generada por Github.

    Para cambiar la ordenación por defecto de las listas en jQuery Mobile con divisores automáticos se puede utilizar el método .listview().

    $(document).ready(function(){
    	$("#milista").listview({
      	autodividers: true,
      	autodividersSelector: function ( li ) {  		
    	  /*  Generar una cadena basada en el contenido de li
    	  		Tiene que retornar el divisor asociado a ese li */
      	}
    	});
    });

    Yo no lo he conseguido hacer funciona. Si alguien lo consigue. Qué avise. :-D