3ENGINE

Programación y otros cachivaches

Etiqueta: jquery

Página 1/2

Tecnologia

Chart.js: grafica de tipo donut con múltiples anillos


En un artículo anterior expliqué cómo añadir texto dentro de una grafica de tipo donut. Hoy te voy a mostrar cómo crear una gráfica tipo donut con múltiples anillos.

Extra! tambien veremos cómo modificar la información que aparece al pasar el ratón por encima de cada uno de los datos de la gŕafica.

Básicamente tenemos que declarar varios conjuntos de datos, donde cada conjunto de datos es un anillo. Hasta aqui todo bien. Si queremos mostrar una etiqueta «personalizada» para cada uno de los datos, tenemos que añadir las etiquetas en cada conjunto de datos y sobreescribir la función encargada de mostrar la información que aparece al pasar el ratón por encima. Ademas, ya de paso, hemos aprovechado para calcular el porcentage.

Código HTML

Código Javascript

Aqui dejo el jsfiddle




Tecnologia

Chart.js: cómo añadir texto dentro de una grafica de tipo donut


A continuación te muestro cómo añadir texto dentro de una grafica de tipo donut en Chart.js

Chart.js es una libreria open source para crear gráficos en javascript basados en HTML5. Entre la amplia lista de gráficos disponibles de esta fantástica librería tenemos el donut (doughnut). Que básicamente es un gráfico de torta pero con un agujero en el centro … sorprendidos ¿verdad? 😉

Yo lo que quiero es aprovechar ese agujero del centro para añadir información, ya sea un simple texto o el total. Algo asi como los pop dots 😉

cómo añadir texto dentro de una grafica de tipo donut

Básicamente esto se consigue añadiendo un plugin e implementando el evento beforedraw. En mi ejemplo muestro el total pero podeis modificar el código para mostrar otra información.

Código HTML

Código Javascript

Aquí el código en jsfiddle

Si lo que queremos es utilizar el plugin en varias gráficas, entonces podemos registrar el plugin

Código Javascript (2)

Aquí el código en jsfiddle




Tecnologia

Bootstrap: cómo agregar estado checked a los elementos de un menu dropdown


A continuación te muestro cómo agregar estado checked a los elementos de un menu dropdown de Bootstrap

Bootstrap es un framework Open Source creado por Twitter que facilita el diseño web. En la lista de componentes facilitados por este genial framework tenemos el dropdown. Un dropdown permite mostrar una lista de opciones en un desplegable. El problema es que bootstrap no permite indicar si una opcion de la lista está checked (activada) o unchecked (desactivada). Para conseguir esto por nuestra cuenta vamos a necesitar un poco de css y javascript:

  • La clase dropdown-item-checked añade un símbolo ‘✓’ a la izquierda de la opción, esto se consigue con CSS.
  • Con HTML asociamos cada una de las opciones del dropdown a la clase option que nos servirá para capturar el evento click y añadimos la clase dropdown-item-checked a las opciones que queremos a checked por defecto.
  • Javascript captura el evento click sobre las opciones y conmuta la clase dropdown-item-checked de la opcion sobre la que hemos hecho click. Cuando la opción no tiene la clase dropdown-item-checked el símbolo ‘✓’ desaparece y viceversa, cuando la opción tiene la clase dropdown-item-checked el símbolo ‘✓’ aparece de nuevo.

Código HTML

Código CSS

Código Javascript

Aqui el código en jsfiddle




Tecnologia

Cómo mostrar una imagen de progreso con jquery ajax (ajax loader)


Para mostrar una imagen de progreso con jquery ajax antes de nada tenemos que conseguir un gif animado. Por ejemplo podemos obtener de ajaxload.info un gif como este:

loading

Lo que yo quiero conseguir es que aparezca el gif animado sea cual sea la llamada jquery ajax. Esto se consigue con el siguiente código en jquery. Básicamente lo que hace es mostrar un div con id=ajaxBusy que contiene el gif, al iniciar una llamada jquery ajax y esconder el div al finalizar la misma:

El código HTML con el gif es el siguiente:

Que necesita su correspondiente css:

Para probar que todo esto funciona he escrito una demo. En la demo he adaptado un servidor HTTP muy simple escrito en Python que explique en la entrada Método rápido para servir archivos a través de HTTP (Servidor HTTP) con SimpleHTTPServer. La adaptación ha consistido en añadir en el método do_POST() un «echo» de modo que el servidor retorne un HTML con el mensaje enviado, en un tiempo opcionalmente parametrizable. En mi caso, esto es util para testear que el gif animado aparece:

Al final tienes esto:

demo

Enlace para descargar la demo: demo.zip