Line Chart

Line chart from NV3D. Make sure you set f:view contentType="text/html" because NV3D doesn't render correctly without it.

See the Chart Serie object for data series configuration options.

Bank statement

Example
Documentation

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

Line chart from NV3D. Make sure you set f:view contentType="text/html" because NV3D doesn't render correctly without it.

Info
Tag name line-chart
Component type io.tornadofaces.component.LineChart
Renderer type io.tornadofaces.component.LineChartRenderer
Attributes
NameDescriptionRequired
xLabelLabel for the X-axisfalse
yLabelLabel for the Y-axisfalse
xTickFormatTick format function for the X-axis. Defaults to d3.format(',r').false
yTickFormatTick format for the Y-axis. Defaults to d3.format(',r').false
beforeConfigJavaScript function that will be called with (widget, chart) before the chart is rendered.false
styleClassStyles to apply to the element.false
styleCSS Styles applied to the element.false
renderedShould this component be rendered?false