Gráficos XVW: Barras, Linhas e em Tarte

A componente de gráficos XVW permite a criação de Gráficos de Barras (Horizontais e Verticais) com múltiplas séries, assim como gráficos de linhas (com múltiplas séries) e gráficos em tarte. Todos os componentes de gráficos precisam de um "Data Set" que representa os valores a apresentar nos respectivos gráficos, os data sets são preenchidos através de métodos da Bean utilizada no Viewer.

Todos os tipos de gráficos tem dois tipos de render diferentes, uma em Flash e outra em Imagem estática, que podem ser escolhidos na declaração XML do gráfico.

Gráfico em Tarte (Pie Chart)

O gráfico em tarte permite criar uma visualização em forma de tarte (daí o nome) para um conjunto de pares chave/valor. O total dos valores somados corresponde a 100% e cada valor correspondente à chave representa uma percentagem desse total.

Declaração XML de Pie Chart

Em baixo fica uma declaração completa com todas as opções do Pie Chart (de notar que se assume a existência de uma Bean associada ao viewer com o identificador "viewBean".

<xvw:pieChart
    label="Gráfico Exemplo"
    dataSet="#{viewBean.dataSet}"
    width="500"
    height="300"
    type="IMG"
    configOptions="#{viewBean.configOptions}"
    >    
</xvw:pieChart>

Os elementos, label, width e height podem ter os valores a partir da Bean do viewer, como tal é possível algo como:

<xvw:pieChart
    label="#{viewBean.label}"
    dataSet="#{viewBean.dataSet}"
    width="#{viewBean.width}"
    height="#{viewBean.height}"
    type="IMG"
    configOptions="#{viewBean.configOptions}"
    >    
</xvw:pieChart>

Propriedades do Pie Chart

Interface Java da Fonte de Dados (Pie Data Set)

Os dados necessários para um Pie Chart são um conjunto de pares chave-valor. O método que se colocar na configuração XML para a propriedade "dataSet" TEM de devolver uma implementação desta interface para que o gráfico possa ser construído.

/**
     * Retrieves a value, given a key
     * 
     * @param key The key corresponding to the value
     * 
     * @return A number representing the value
     */
    public Number getValue(Comparable<String> key);
    
    /**
     * 
     * Retrieve the list of categories in the pie chart
     * 
     * @return A list of categories
     */
    public List<String> getCategories();
    
    /**
     * 
     * The label for the category 
     * 
     * @return A string with the label for the key set
     */
    public String getCategoryLabel();
    
    
    /**
     * 
     * The label for the value set
     * 
     * @return A string with the label for the value set
     */
    public String getValueLabel();

Interface Java das Configurações (IPieChartConfiguration)

Os gráficos em tarte estão configurados para terem determinado aspecto por omissão. Esse aspecto pode ser customizado se se fizer a implementação da interface IPieChartConfiguration, que possui métodos para alterar o aspecto de alguns componentes do gráfico. A definição da Interface é a seguinte:

/**
     * 
     * Returns the background color of the chart
     * 
     * @return The Color to use or null if the default colour should be used
     */
    public Color getBackgroundColour();
    
    /**
     * 
     * The list of colours for the pie pieces
     * 
     * @return A mapping of the pie piece name to the colour it should have
     */
    public HashMap<String,Color> getColours();
    
    
    /**
     * 
     * Whether or not the pie chart should show the labels
     * 
     * @return True if the labels should be shown and false otherwise
     */
    public boolean showLabels();
    
    
    /**
     * 
     * Whether or not the pie chart title should be shown
     * 
     * @return True if the chart should display the title and false otherwise
     */
    public boolean showChartTitle();
    
    /**
     * 
     * Returns the string expression to use as tooltip, one can use the following
     * special variables
     * 
     * $key = The name of the pie slice 
     * $val = The value of the slice
     * $percent = the percentage from total of the slice
     * 
     * Example: "$key has value $val which is $percent % of total",
     *  which could output something like
     * "Microsoft has value 30000 which is 30% of total"
     * 
     * @return A string expression for the tooltip (or null to use the default value)
     */
    public String getTooltipString();

Gráfico de Barras (Bar Chart)

sss

Gráfico de Linhas (Line Chart)

sss