Home

theiviaxx edited this page Oct 31, 2011 · 9 revisions
Clone this wiki locally

The base class used for all Milk Charts. It is meant to be an abstract class, but will default to Column if used by itself. Please see below for all chart types available.

##Classes

##Syntax <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(table[, options]);
        // Load JSON data from url
        chart.load({
            method: 'get',
            url: 'data.json'
        });
    });
</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>
  • Note: This script will default to the [Column] type graph
  • Note: The 'tfoot' is not required but MilkChart uses this to gather row names. If the '' does not have a '' then no row names are shown

    ##Arguments

    1. element - (mixed) a table Element that should be transformed or container element to place the chart in
    2. options - (object, optional) a key/value set of options

    ##Options

    • width - (int: Defaults to 400) Width of chart in px
    • height - (int: Defaults to 280) Height of chart in px
    • padding - (int: Defaults to 12) Outer padding of chart in px
    • font - (string: Defaults to "Verdana") Font to be used for labels
    • fontColor - (string: Defaults to #000000) Color used for labels
    • fontSize - (int: Defaults to 10) Font size in pt
    • background - (string: Defaults to #ffffff) Background color of chart
    • chartLineColor - (string: Defaults to #333333) Color of value lines
    • chartLineWeight - (int: Defaults to 1) Line Wieght of value lines in px
    • border - (bool: Defaults to true) Draws a border around edge chart (ignores padding)
    • borderWeight - (int: Defaults to 1) Border width in px
    • borderColor - (string: Defaults to #333333) Border color
    • titleSize - (int: Defaults to 18) Size of title font in pt
    • titleFont - (string: Defaults to "Verdana") Font used for title
    • titleColor - (string: Defaults to #000000) Font color for title
    • showRowNames - (bool: Defaults to true) Show the row labels on one of the axes
    • showValues - (bool: Defaults to true) Show values on one of the axes
    • showKey - (bool: Defaults to true) Shows the column labels
    • useZero - (bool: Defaults to true) Always use 0 as the lowest value
    • useFooter - (bool: Defaults to true) Get row labels from table footer

    Load data

    Each chart has a .load() method that takes the same options as a normal Request.JSON object. Except for the onSuccess method which is used by MilkChart to process the incoming data. Data needs to be in the form of:

    {
        "title": "My Chart",
        "colNames": ["Internet Explorer", "FireFox"],
        "rowNames": ["Q1", "Q2", "Q3", "Q4"],
        "rows": [
            [1,2],
            [3,4],
            [5,6],
            [7,8]
        ]
    }
    

    title is optional.

    Switch Axes

    Each chart types also has a .switchAxes() method which swaps the column and row data.