Create Graphs and Charts using the MilkChart MooTools Library

Posted on October 6, 2009, Filled under MooTools, Bookmark it

MilkChart is a robust and simple to use MooTools library for transforming table data into a chart. The library uses the HTML5 <canvas> tag which is currently supported in browsers other than Internet Explorer. Currently the library supports the following types:

Column
Bar
Line
Scatter
Pie

All the graphs use shared options from the Base class.

Implementation

Include the necessary files

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

Use the library

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

Table structure

<!-- 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>