aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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.

<script type="text/javascript" src="mootoolsCore.js"></script>
<script type="text/javascript" src="MilkChart.js"></script>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var chart = new MilkChart.Pie(table[, options]);
    })
</script>

<!-- Table structure -->
<table id="chart">
    <thead>
        <tr>
            <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>8.3</td><td>70</td><td>10.3</td><td>100</td></tr>
        <tr><td>8.6</td><td>65</td><td>10.3</td><td>125</td></tr>
        <tr><td>8.8</td><td>63</td><td>10.2</td><td>106</td></tr>
        <tr><td>10.5</td><td>72</td><td>16.4</td><td>162</td></tr>
        <tr><td>11.1</td><td>80</td><td>22.6</td><td>89</td></tr>

    </tbody>
    <tfoot>
        <tr>
            <td>Row 1</td><td>Row 2</td><td>Row 3</td><td>Row 4</td><td>Row 5</td>
        </tr>
    </tfoot>
</table>

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