3. Using the graphs from Trinidad

3. Using the graphs from Trinidad
Prev		Next

The following shows how to use the graphs provided by Trinidad. It is based on the previous example.

3.1. Domain Model

Create in the package de.vogella.jsf.trinidad.first the class "MyChartModel".

				
package de.vogella.jsf.trinidad.first;

import java.util.ArrayList;
import java.util.List;

import org.apache.myfaces.trinidad.model.ChartModel;

public class MyChartModel extends ChartModel {

	// How many charts are you going to have
	@Override
	public List<String> getGroupLabels() {
		List<String> groupLabels = new ArrayList<String>();
		groupLabels.add("Java");
		groupLabels.add("Linux");
		groupLabels.add(".NET");
		return groupLabels;
	}

	// How many parts (data areas) per chart
	@Override
	public List<String> getSeriesLabels() {
		List<String> seriesLabels = new ArrayList<String>();
		seriesLabels.add("Love it");
		seriesLabels.add("Hate it");
		return seriesLabels;
	}

	@Override
	public List<List<Double>> getYValues() {
		List<List<Double>> chartValues = new ArrayList<List<Double>>();
		// Fill the groups
		for (int i = 0; i < getGroupLabels().size(); i++) {
			List<Double> numbers = new ArrayList<Double>();

			// fill the series per group
			for (int j = 0; j < getSeriesLabels().size(); j++) {
				numbers.add(100* Math.random());
			}
			chartValues.add(numbers);
		}
		return chartValues;

	}

}

3.2. Managed Beans

Configure MyChartModel to be a session scope managed bean.

3.3. Create JSP

Create the following JSP "GraphicPage.jsp".

				
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr"%>
<%@ taglib uri="http://myfaces.apache.org/trinidad/html" prefix="trh"%>
<html>
<f:view>
	<body>
	<tr:document>
		<tr:form>
			<h:panelGrid columns="3">

				<tr:chart value="#{myChartModel}" type="pie" />
				<tr:chart value="#{myChartModel}" type="bar" />
				<tr:chart value="#{myChartModel}" type="radar" />
				<tr:chart value="#{myChartModel}" type="radarArea" />
				<tr:chart value="#{myChartModel}" type="funnel" />
				<tr:chart value="#{myChartModel}" type="circularGauge" />
				<tr:chart value="#{myChartModel}" type="semiCircularGauge"
					YMinorGridLineCount="1" />
			</h:panelGrid>
		</tr:form>
	</tr:document>
	</body>
</f:view>
</html>

3.4. Run your application

The result should look like the following.

Tip

Please note that this example does not always run within the standard Eclipse browser. After you deployed it, open the URL in your standard browser to see the correct result.

Prev		Next
2. Example JSF application with Apache MyFaces Trinidad	Home	4. Thank you