DotPress

Uno de las etiquetas menos utilizadas para HTML es el elementos CANVAS. Este elementos es algo más que interesante para el uso y en simples palabras nos permite crear imagenes en tiempo real con especificaciones XML/SVG y JavaScript.

Ahora Josh Gross creador de AjaxAIM ha creado una interesante manera de visualizar información de conexiones entre diferentes objetos utilizando JSON, Mootols y por supuesto, el objeto CANVAS.

Entre los diferentes usos de esta bonita y elegante librería basada en Mootols está la creación de grafos en JavaScript o algunos otros, como hizo notar mi compañero de trabajo: crear garabatos y líneas difíciles de relacionar a simple vista.

Requerimientos:

Este script requiere tres librerías. Estás serían CanvasText (que probee el soporte de texto), ExCanvas (para soporte del elemento canvas en Internet Explorer) y la librería de MooTools con soporte para Class, Class.Extras, Element, Element.Event. Element.Dimensions y Json.Remote.

Documentación:

En la manera más simple, la creación del objeto se produce con la siguiente llamada a la función:

new MooWheel(dataArray, canvasElement);

Ahora, si tenemos que recibir los datos mediante el uso de AJAX, podemos utilizar este otro procedimiento:

new MooWheel(false, canvasElement, {
json: {
url: 'http://your.json.url/request.php',
method: 'get',
send: {
'some_variable': 'some_data'
}
}
});

Esto hace una llamada asíncrona y el formato de respuesta es JSON. La documentación completa de las demás funciones está en la página del componente.