Line Chart

<t:line-chart id="chart"
                 xLabel="Date"
                 yLabel="Balance"
                 style="height: 400px"
                 xTickFormat="dateFormatter"
                 yTickFormat="moneyFormatter"
                 beforeConfig="beforeConfig">

    <t:serie name="Wife's balance"
                color="#4444ff"
                value="#{controller.bankStatement}"
                var="k"
                area="true"
                x="#{k.dateEpoch}"
                y="#{k.randomBalance}"/>

    <t:serie name="My balance"
                color="#8833bb"
                value="#{controller.bankStatement}"
                var="k"
                area="true"
                x="#{k.dateEpoch}"
                y="#{k.balance}"/>

    </t:line-chart>

<script>
    var dateformat = d3.time.format("%d.%m.%Y");

    var dateFormatter = function(d) {
        return dateformat(new Date(d));
    };

    var moneyFormatter = function(v) {
        return "$ " + v;
    };

    var beforeConfig = function(widget, chart) {
        // Modify and further configure the chart or the rendered data series via widget.conf.datum
        // You could even load data via AJAX and populate here instead of adding
        // t:serie objects to the line-chart.

        // For example
        chart.margin({left: 100});
    }
</script>