You are viewing an old version (v. 5) of this page.
<< View previous version | view page history | view next version >>
Overview
Chart wraps jqPlot technologies for easy creation and display of data in graphical form.
Getting Started
Xhtml:
<ace:chart id="name" value="#{backing.dataForChart}" xAxis="#{backing.XAxis}" yAxes="#{backing.YAxes}"/>
Backing Bean:
private List<SeriesType> dataForChart = new ArrayList<SeriesType>() { { add(new SeriesType() { { setType(SeriesType.GraphType); add(xValue,yValue); *** add(finalXValue,finalYValue); } }); } }; private Axis xAxis = new Axis() { { } }; private Axis[] YAxes = new Axis[] { new Axis() { { } }};
Legal values for Series and Graph Types
- BubbleSeries
- BUBBLE
- CartesianSeries
- BAR
- LINE
- OHLCSeries
- CANDLESTICK
- OHLC
- SectorSeries
- DONUT
- PIE
Attributes
 |
TagLib Documentation This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here. |
Value: Define the variable on the backing bean that will be displayed using this chart. Must be a collection of ChartSeries type objects.
xAxis: Define the axis that will be used for the primary X-axis. Must be an element of chart.Axis.
yAxes: Define the collection of axes that will be used for the y-axis. Must be an array of chart.Axis. (For single y-axis charts, define a single entry array.)
Methods
| |
Java Documentation This section covers attributes involved in the typical use-cases for this component. For a complete reference, please consult the javadocs. |
ChartSeries:
setType(ChartSeries.ChartType type): The style of graph that the data is to appear as, in the form of SeriesType.GraphType. For information on valid combinations, please check above.
add(java.lang.Object x, java.lang.Object y): Add a point of data to the graph to be created. Must be called once for each desired datapoint.
Axis:
setType(AxisType type): Define the type of axis that this axis will be. Valid types are:
- LINEAR: Straightforward plotting
- LOGARITHMIC: Plotting on a logarithmic scale
- CATEGORY: Treats each individual entry as it's own separate category, rather than an actual value. Use if you wish to have strings in the axis.
- DATE: Tracks a series of dates over time.
Advanced usage examples:
Combined Charts:
This example will detail how to combine multiple sets of data onto a single displayed chart, using two different graph types. This example will use bar and line graphs. (Please note that you cannot combine two graph types from different series types.)
Xhtml:
<ace:chart id="name" value="#{backing.dataForChart}" xAxis="#{backing.XAxis}" x2Axis="#{backing.X2Axis}" highlighter="true" highlighterBringSeriesToFront="true" yAxes="#{backing.YAxes}"/> <!--As a note: highlighter and highlighterBringSeriesToFront are not strictly nessecary, but they serve to make it much easier to view the dataset in the back.-->
Backing Bean:
private List<SeriesType> dataForChart = new ArrayList<SeriesType>() { { add(new SeriesType() { { setType(CartesianType.BAR); add(xValue,yValue); *** add(finalXValue,finalYValue); setLabel("First Value"); } }); add(new SeriesType() { { setType(CartesianType.LINE); add(xValue,yValue); *** add(finalXValue,finalYValue); setLabel("Second Value"); setYAxis(2); setXAxis(2); } }); } }; private Axis xAxis = new Axis() { { setType(AxisType.CATEGORY); } }; private Axis x2Axis = new Axis() { { setType(AxisType.CATEGORY); } }; private Axis[] YAxes = new Axis[] { new Axis() {{setAutoscale(true); setLabel("Y1");}}, new Axis() {{setAutoscale(true); setLabel("Y2");}} //All of these axes have method calls within them to modify the way they display, but none are truly required. These are here to show the way to get an easy to view chart. };