Line Chart in Trinidad - jsf

Question

I want plot a line chart using Trinidad 1.2. I have a class called AcidenteTO which consists in int indicating the year and a array of int indicating the values for each month. In ChartModel used to populate my chart, I passed a List of AcidenteTO's.
public class AcidenteTO implements Serializable {
// -------------[ Atributos ]----------------------
private int ano; // year
private int[] quantidades = new int[12]; // quantities for month
// Getters & Setters as usual
}
public class AcidentesChartModel extends ChartModel {
private final List<AcidenteTO> acidentes;
// Indicate the labels for each year
private final List<String> anosLabel;
private List<List<Double>> yValues;
private final Double maxYValue;
// Month labels
private final List<String> mesesLabels =
Arrays.asList("Janeiro", "Fevereiro", "Março", "Abril", "Maio",
"Junho", "Julho", "Agosto", "Setembro", "Outubro",
"Novembro", "Dezembro");
AcidentesChartModel(List<AcidenteTO> acidentes) {
this.acidentes = acidentes;
yValues = new ArrayList<List<Double>>(this.acidentes.size());
List<String> anosLabel = new ArrayList<String>(this.acidentes.size());
this.anosLabel = new ArrayList<String>(this.acidentes.size());
double maxY = 0D;
for (AcidenteTO a : this.acidentes) {
maxY = preencherDados(a, maxY);
}
this.maxYValue = maxY;
}
private double preencherDados(AcidenteTO a, double maxY) {
List<Double> mesesValues = new ArrayList<Double>(12); // Monthly values for each year
for (int i = 0; i < 12; i++) {
mesesValues.add((double)a.getQuantidades()[i]);
if (a.getQuantidades()[i] > maxY) {
maxY = a.getQuantidades()[i];
}
}
this.anosLabel.add(String.valueOf(a.getAno()));
this.yValues.add(mesesValues);
return maxY;
}
public List<String> getSeriesLabels() {
return this.anosLabel;
}
public List<String> getGroupLabels() {
return this.mesesLabels;
}
public List<List<Double>> getYValues() {
return this.yValues;
}
public Double getMaxYValue() {
return this.maxYValue;
}
}
What I was expecting is that as for each Year I have 12 data to plot, it would be plot all 12 values for each year. However what actually happened was the following: If I pass a List of 3 AcidenteTO's, the generated plot shows data until 3rd month. If I pass 4 AcidenteTO's List, the plot shows data until 4th month. 7 AcidenteTO's List, until 7th month (see picture below), and so on.
I could not found no example in the net showing how to use a ChartModel to create a Trinidad line chart. Just this one for pie charts. Therefore I was not able to discover where is my mistake.
Thanks,
Rafael Afonso.

Answer 1

Ever considered using Highcharts to generate graphs in your Trinidad project? We do and it works like a charm! Highcharts has way more possibilities to generate graphs and add interactivity then <tr:chart>. See these examples for pie charts and other graphs in Highcharts.
The downside is that you don't have a JSF component to work with. Creating a static graph will be easy, but you might want to write a few lines of code to pass your data to the Highcharts Javascript to get things a bit more interesting. Trinidad's ExtendedRenderKitService comes in handy there:
ExtendedRenderKitService service =
Service.getRenderKitService(facesContext, ExtendedRenderKitService.class);
service.addScript(facesContext, "alert('foo');");
Edit
I just found this, haven't tried it yet, but I will test it: Java API for generating highchart JSON.