Charts

Web

-using IceFaces 1.8.2 (JSF 1.2)

<ice:form id="chartPopUp">
<ice:panelPopup draggable="true" modal="true" rendered="#{activeBackingBean.chartPopUpVisible}">
  <f:facet name="header">
  <table width="100%">
  <tr>
  <td>
  <ice:outputText value="Grafički prikaz" />
  </td>
  <td align="right">
     <ice:commandButton id="closeOdabirButton" styleClass="xButton" actionListener="#{activeBackingBean.closeChartPopUpVisibleAction}" />
  </td>
  </tr>
  </table>
   </f:facet>

  <f:facet name="body">
  <ice:outputChart id="chart" type="pie2D" 
        chartTitle="#{activeBackingBean.title}" 
        colors="green, red" 
        data="#{activeBackingBean.chartData}" 
        labels="#{activeBackingBean.chartLabels}"/>
  </f:facet>
</ice:panelPopup>
</ice:form>


BackingBean

private int totalOkDPTs;
private int totalNotOkDPTs;

public String getChartData()
{
return totalOkDPTs + ", " + totalNotOkDPTs;
}
public String getTitle()

public String getChartLabels()



Result

Jasper report

- using iReport 3.6.2

Select colors:
Pie Chart - Properties - Series Colors ...

Data to display:
Right click Chart and select Chart Data - Details - Pie series
In this example I have 2 series

Parameters:
totalOkDPTsPercentage - String
totalNotOkDPTsPercentage - String
totalOkDPTsPercentageNumber - Double
totalNotOkDPTsPercentageNumber - Double

pieSeries definition:
keyExpression - what displays in bottom (bottom label)
valueExpression - used for calculating and displaying (Number)
labelExpression - label with arrow (String)

jrxml code:

<pieChart>
<chart isShowLegend="true">
<reportElement x="98" y="28" width="375" height="205"/>
<chartTitle>
<titleExpression><![CDATA["Grafički prikaz"]]></titleExpression>
</chartTitle>
<chartSubtitle/>
<chartLegend/>
</chart>
<pieDataset>
<pieSeries>
<keyExpression><![CDATA["Ispravnih DPK - " + $P{totalOkDPTsPercentageNumber} +"%"]]></keyExpression>
<valueExpression><![CDATA[$P{totalOkDPTsPercentageNumber}]]></valueExpression>
<labelExpression><![CDATA["Ispravnih DPK"]]></labelExpression>
</pieSeries>
<pieSeries>
<keyExpression><![CDATA["Pogrešnih DPK - " + $P{totalNotOkDPTsPercentageNumber} +"%"]]></keyExpression>
<valueExpression><![CDATA[$P{totalNotOkDPTsPercentageNumber}]]></valueExpression>
<labelExpression><![CDATA["Pogrešnih DPK"]]></labelExpression>
</pieSeries>
</pieDataset>
<piePlot>
<plot>
<seriesColor seriesOrder="0" color="#00FF33"/>
<seriesColor seriesOrder="1" color="#FF0033"/>
</plot>
<itemLabel color="#000000" backgroundColor="#FFFFFF"/>
</piePlot>
</pieChart>

Result

Stackedbar Chart

I have people and 2 values for them, OK and NOK

Result:

Add stackedbar chart:

- define series colors, Legend position

Define chart details:
- I have added 2 series since I have 2 values (OK and NOK)

The Series expression field is the name of the series. Its value can be any object that implements java.lang.Comparable. In most cases, the value of this field is a string.   --OK

The Category expression field is the label of each value in the chart. The value of this field is typically a string. In our example, each state is a different category, so we will use the state field ($F{state}) as our category expression.   --People's name

The Value expression field is a numeric value representing the value to be charted for a particular category. In our example, the number of aircraft in a particular state is the value we want to chart. Therefore, we use the implicit stateGroup_COUNT variable ($V{stateGroup_COUNT}) as our value expression. --OK in 1 serie and NOK in 2nd

The optional Label Expression field allows us to customize item labels in the chart.

Clearing JSF Form

On page you have form with input fields and button that can clear that fields.
Button is set to immediate since there is no need to do PROCESS_VALIDATIONS and UPDATE_MODEL_VALUES phases,
instead method is invoked in APPLY_REQUEST_VALUES phase.
First method can be used in JSF 1.x or 2.x, but second is based on AJAX event and is usable only in JSF 2.x
Better approach is with AJAX since there is no need to refresh whole page.

<h:commandButton value="Clear" id="clearButton">
<f:ajax event="click" render="@form" listener="#{myController.clearForm}" immediate="true" />
</h:commandButton>

public void clearForm(ActionEvent ae)
{
System.out.println("clearForm - via ActionEvent");
// clear bean values ...

// clear component values
UIComponent form = getContainingForm(ae.getComponent());
clearEditableValueHolders(form);
}

public void clearForm(AjaxBehaviorEvent ae)
{
System.out.println("clearForm - via AjaxBehaviorEvent");
// clear bean values ...

// clear component values
UIComponent form = getContainingForm(ae.getComponent());
clearEditableValueHolders(form);
}

private UIComponent getContainingForm(UIComponent component)
{
if (!(component.getParent() instanceof UIForm))
{
return getContainingForm(component.getParent());
}
else
{
System.out.println("getContainingForm: UIForm found");
return component.getParent();
}
}

private void clearEditableValueHolders(UIComponent form)
{
Iterator<UIComponent> iterator = form.getFacetsAndChildren();
while (iterator.hasNext())
{
UIComponent c = iterator.next();
if (c instanceof EditableValueHolder)
{
// Convenience method to reset this component's value to the un-initialized state.
((EditableValueHolder) c).resetValue();
}
clearEditableValueHolders(c);
}
}


Export to pdf

There is datatable and when user click on particular row it needs to be printed.

data table in xhtml:
 <ice:dataTable value="#{activeBackingBean.selectedEntity.subjectableList}" var="bill" ...

inside column put link component instead outputTex, which will pass bill number:
<ice:commandLink value="#{bill.GUINumber}" actionListener="#{activeBackingBean.billToPdf}" style="color:black;" title="Print bill">
   <f:param name="billNumber" value="#{bill.GUINumber}" />
</ice:commandLink>

In backing beanu there is (actionListener) method:
public void billToPdf(ActionEvent ae)
{
read request parametar and save object in class field for later use, call hidden button
String parameter = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("billNumber");
log.debug("billToPdf: " + parameter);
//find appropriate object (bill)
JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(), "document.getElementById('PrintForm:PrintButton').click();");
}

hidden button in xhtml:
<ice:form id="PrintForm">
<ice:commandButton id="PrintButton" visible="false" actionListener="#"
onclick="{location.href='#{downloadServlet}?fileCreator=null&amp;fileType=pdf&amp;fileAction=activeBackingBean.billToPdf'}" />
</ice:form>

Click will call servlet which will call appropriate method in bean via reflection (fileAction -our method which needs to be called):
ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(getServletContext());
ctx.getBean("activeBackingBean");
Object result = MethodUtils.invokeMethod(bean, methodName, iS); //iS is InputStream
ServletOutputStream stream = response.getOutputStream();  ...

in backing beanu method that exports to PDF:
public FileObject billToPdf() throws JRException, IOException
{
if (log.isDebugEnabled()) log.debug("monthBillToPdf: " + bill);
return billManager.billToPdf(bill);
}


Second approach:
call servlet with submitted oid. Via refection call bean method, fetch appropriate object and print it.