Line Chart in Trinidad

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&ccedil;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.