Nice Charts with Trinidad

Apache MyFaces Trinidad provides a lot of cool JSF components; a really nice one it the chart component. It offers several possibilities to visualize your structured data. Like this pie chart:

To actual provide such a nice looking chart graphic, you just need to implement an abstract class, provided by Trinidad’s API. This may sound a bit complicated… but actually it is straightforward:

public class CustomerDevelopment extends ChartModel
  public List<String> getGroupLabels()
    List<String> years = new ArrayList<String>();
    return years;
  public List<String> getSeriesLabels()
    List<String> products = new ArrayList<String>();
    products.add("Product A");
    products.add("Product B");
    return products;
  public List<List<Double>> getYValues()
    List<List<Double>> chartValues = new ArrayList<List<Double>>();
    // iterate over the groups (years...)
    for(int i = 0; i < getGroupLabels().size(); i++)
      List<Double> numbers = new ArrayList<Double>();

      // now, just read the series, per group (product/year)
      for(int j = 0; j < getSeriesLabels().size(); j++)
        // yes... some random stuff here, in the demo ...
        numbers.add(10000 * Math.random());
    return chartValues;

Actually, the only "tricky" part is the getYValues() method. Here you do two loops to get the correct data. When you are already in the business of providing chart data... this is somewhat familiar.

The JSPX (or Facelet) is also very simple:

&#91;sourcecode language="html"&#93;
<tr:chart value="#{bean.chartModel}" type="pie" />

There are actually more than 10 different types of rendering the chart, take a look at the tagdoc.

Have fun!



Posted in ajax, apache, java, jsf, myfaces, trinidad, web²
4 comments on “Nice Charts with Trinidad
  1. Lars Vogel says:

    Thank you for the tip. Very useful.

  2. Sandra lancheros says:


    I find the charts very nice, however….the resulting SVG doesn’t fit graphically anywhere:
    It is displaying below the tags I need it to be.

    Does anyone know how to fix this problem?

    Thanks a lot!!!

  3. Hi Matthias!

    Perharps you could help me with an issue related to Trinidad Charts Component. I can’t make the drillDown listener work. I’ve posted the full description of my problem on forum (–Chart-drilldown-listener-problem-ts27062029.html).

    Rafael Ribeiro

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: