Bluff: gráficas mediante Javascript

ByLuis

Bluff es un script que nos permite realizar gráficas de forma sencilla en Javascript. Es necesario incluir la librería JS.Class para que simule canvas en IE.

canvas.png

Crear gráficas es muy sencillo y solo deberemos incluir un script parecido a este:

<canvas id="example"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('example', 400);
g.theme_37signals();
g.title = 'My Graph';
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
g.draw();
</script>

Bluff

Similar Posts

Datejs: librería de fechas para Javascript

ByLuis

La verdad es que trabajar con fechas en Javascript suele ser un poco pesado. Con Datejs podremos trabajar con fechas de una forma increíblemente fácil y potente.

No se trata únicamente de un parseador, sino que ofrece muchas más funcionalidades.

Algunos ejemplos que nos pueden hacer ver la potencia de esta librería son:

// ¿Qué fecha es el próximo jueves?
Date.today().next().thursday();
// Añadir 3 días a la fecha de hoy
Date.today().add(3).days();
// ¿Es hoy viernes?
Date.today().is().friday();
// Hace tres días
(3).days().ago();
// Dentro de 6 meses
var n = 6;
n.months().fromNow();
// Ponerlo a las 8:30 AM del día 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });
// Convertir un texto a una fecha
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // hoy + 5 días
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973′);
Date.parse(‘Thu, 1 July 2004 22:30:00′);

Datejs

Vía / Ajaxline

Paginación mediante Javascript

ByLuis

Sencillo pero efectivo método para paginar contenidos mediante Javascript. Puede ser muy útil cuando el diseño no permite grandes espacios para contenidos.
El funcionamiento es muy sencillo, se ocultan los contenidos y mediante los botones de paginación se van mostrando. La verdad es que no sería necesaria esta librería, porque como ya he dicho el método es muy sencillo y nosotros mismos lo podríamos implementar, incluso mejorar, porque usa la librería cssQuery unicamente para obtener los elementos, mientras que podríamos hacerlo nosotros mismos con un getElementsByTagName, si es que nuestras necesidades no son obtener elementos mediante sus estilos, rel u otras cosas.
Javascript pagination in yer face

|

IE7 y Javascript

ByLuis

IEAunque Microsoft dijo que se iba a centrar en corregir los errores en CSS y no en Javascript, no está mal decir que cosas se ha corregido y cuales estarían bien para futuras versiones.

Los errores que se han corregido son: los memory leaks cuando se hacían referencias circulares entre elementos, un fallo que cerraba la aplicación cuando se usaba la función normalize() y soporte para XMLHttpRequest de forma nativa en vez de mediante ActiveX.

Los errores que no estaría mal que corrigieran en futuras versiones son: getElementById debería ignorar el atributo name, debería cambiar el window.location cuando se navega entre referencias en el mismo documento mediante el historial, cuando se mueven checkbox mediante métodos del DOM recuperan el estado original y no conservan el que tenían, setAttribute no funciona con el atributo style o con eventos, varios atributos necesitan ser escritos usando las máyusculas en las iniciales de las plabras (camelCase), radio buttons clonados no crean su propio grupo.

Vía / QuirksBlog

|

HTML 5 Web SQL Database

ByLuis

Está claro que el HTML5 nos ofrece muchas posibilidades, pero una de las opciones que más me ha gustado es la de tener bases de datos locales.

Para abrir una conexión deberíamos ejecutar lo siguiente:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);

Y para la ejecución de sentencias hay que echar mano de transacciones:

db.transaction(
  function(tx) {
     tx.executeSql("SELECT * FROM ToDo", [],
        function(tx, result) {
           for(var i = 0; i < result.rows.length; i++) {
             document.write('' + result.rows.item(i)['label'] + '
');
           }
         }, null);
       }
   );

Bastante sencillo y ofrece muchas posibilidades en nuestras aplicaciones

HTML 5 Web SQL Database

Vía / DZone

Documentación oficial de prototype: por fin!

ByLuis

prototype_logo.pngPrototype ya dispone de documentación oficial. Aprovechando el lanzamiento de la versión 1.5 de la famosa librería han publicado la documentación de la API, un blog y una sección de tutoriales.
La documentación está realmente bien. Bien organizada y bajo un diseño limpio y claro. Pero se echan de menos dos cosas: la posibilidad de que la gente envíe comentarios y ejemplos como ocurre con la documentación de PHP y un buscador. Respecto al buscador, proporcionan un bookmarklet que cumple esa función pero parece una solución forzada.
La sección de tutoriales y consejos está todavía muy vacía pero es una buena idea el que la hayan implementado. Actualmente ofrecen dos documentos: Introducción a AJAX y Cómo Prototype extiende DOM.
Y el blog, genial. Todavía esta vacío pero es lógico… lo acaban de publicar! Desde luego yo ya me he suscrito a las RSS
Vía / Anieto2k