triunfoweb.com

MilkChart , es una librería para MooTools que nos permite generar gráficas de una forma sencilla usando los datos de una tabla de datos del propio HTML. window.addEvent(‘domready’, function() { var chart = new MilkChart.Pie(table[, options]); }) Column A Column B Column C Column D 8.3 70 10.3 100 8.6 65 10.3 125 8.8 63 10.2 106 10.5 72 16.4 162 11.1 80 22.6 89 Row 1 Row 2 Row 3 Row 4 Row 5 Para obtener una gráfica que permita hacer más visual el aspecto de los datos. (Ver Imagen) Tipos soportados La librería, nos permite usar una serie de gráficos con los que visualizar los datos: Column Bar Line Scatter Pie // Modo Columna var chart = new MilkChart.Column(table, [options]); // Modo Barras var chart = new MilkChart.Bar(table, [options]); // Modo línea var chart = new MilkChart.Line(table, [options]); // Modo puntos var chart = new MilkChart.Scatter(table, [options]); // Modo pastel var chart = new MilkChart.Pie(table, [options]); Opciones disponibles Para parametrizar la salida de datos disponemos de una serie de opciones que nos permiten configurar el aspecto de nuestras gráficas. width – (int: Default a 400) Ancho de la gráfica (en px) height – (int: Default a 280) Alto de la gráfica (en px) padding – (int: Default a 12) Padding (en px) font – (string: Default a “Verdana”) Fuente de las etiquetas fontColor – (string: Default a #000000) Color de las etiquetas fontSize – (int: Default a 10) Tamaño de las etiquetas (en pt) background – (string: Default a #ffffff) Color de fondo de la gráfica chartLineColor – (string: Default a #333333) Color de las líneas chartLineWeight – (int: Default a 1) Ancho de las líneas (en px) border – (bool: Default a true) Dibuja un borde a la gráfica borderWeight – (int: Default a 1) Tamaño del borde (en px) borderColor – (string: Default a #333333) Border color titleSize – (int: Default a 18) Tamaño del título (en pt) titleFont – (string: Default a “Verdana”) Fuente usada para el título titleColor – (string: Default a #000000) Color de la fuente del título showRowNames – (bool: Default a true) Muestra los labels de las columnas en los ejes showValues – (bool: Default a true) Muestra los valores en los ejex showKey – (bool: Default a true) Muestra los valores de las columnas useZero – (bool: Default a true) Siempre usa 0 como menos valor useFooter – (bool: Default a true) Coge los nombres de las columnas del footer Descargar Artículos relacionados Crea gráficas con Javascript Gráficas con PHP + CSS GStats, estadísticas globales de los usuarios de internet Otra librería para trabajar con Ajax Chronoscope, las gráficas de GWT

Excerpt from:
MilkChart, librería gráfica para gráficas