- Components
- Line Chart
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
Name | Description | Required |
---|---|---|
xLabel | Label for the X-axis | false |
yLabel | Label for the Y-axis | false |
xTickFormat | Tick format function for the X-axis. Defaults to d3.format(',r'). | false |
yTickFormat | Tick format for the Y-axis. Defaults to d3.format(',r'). | false |
beforeConfig | JavaScript function that will be called with (widget, chart) before the chart is rendered. | false |
styleClass | Styles to apply to the element. | false |
style | CSS Styles applied to the element. | false |
rendered | Should this component be rendered? | false |