Board index JavaServer Faces General progrmmatically created column chart is not working

progrmmatically created column chart is not working

Components, Ajax Framework, Utilities and More.


Posts: 9
hi
i am tryieng to create a column chart programatically , throught placing the binding attribute on the chart and do the creation of the chart series dynamically which is my whole purpose but what i get Yahoo is undefiened and when i view the source on the browser i cant see any of the resources that should be generated throught <p:resources> , i have tried to place them inside the thead tag but it not working also , but when i remove the binding attribute the chart display but of cource empty( just the axes y and x) and here is my xhtml page


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<p:resources/>
</h:head>
<h:body>

<h:form id="frm">
<div style="width:1024px;height:350px">
<p:columnChart value="#{ChartingController.consumbtionPoints}" var="point" xfield="#{point.time}" binding="#{ChartingController.columnChart}"/>
</div>
</h:form>
</h:body>
</html>

and here is my method that create the chart series programmaticaly

public ColumnChart getColumnChart() {
//code before the loop
while (it.hasNext()) {
cs = new ChartSeries();
physical = (PhysicalMeter) it.next();
this.consumbtionPoints=physical.getPoints();

for(Point point:this.consumbtionPoints)
{
ValueExpression labelVE = context.getApplication().getExpressionFactory().createValueExpression(context.getELContext(),"#{entry.label}", String.class);
ValueExpression valueVE = context.getApplication().getExpressionFactory().createValueExpression(context.getELContext(),"#{entry.val}" , String.class);

cs.setValueExpression("label", labelVE);
cs.setValueExpression("value", valueVE);
}
this.columnChart.getChildren().add(cs);
}


return this.columnChart;
}


Posts: 9
hey people .... at least a hint would help
Thanks


Posts: 768
Hi,

Are you using a RequestScoped bean? Using SessionScoped will cause problems.

If it's any help, here is a slightly modified version of the showcase example for columnChart that works with PrimeFaces 2.0.2 and mojarra 2.0.2. Note that the getColumnChart method doesn't do much, everything is happening in the setColumnChart method.

The page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
</h:head>

<h:body>
  <h:form>
    <p:columnChart value="#{columnChartBean.births}" var="birth"
        xfield="#{birth.year}" binding="#{columnChartBean.columnChart}">
    </p:columnChart>
  </h:form>
</h:body>

</html>


The backing bean:

package controller;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.el.ExpressionFactory;
import javax.el.ValueExpression;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

import javax.faces.context.FacesContext;

import org.primefaces.component.chart.column.ColumnChart;
import org.primefaces.component.chart.series.ChartSeries;

@ManagedBean
@RequestScoped
public class ColumnChartBean implements Serializable {
    private List<Birth> births;
    private ColumnChart columnChart;

    public ColumnChartBean() {
        births = new ArrayList<Birth>();
        births.add(new Birth(2004, 120, 52));
        births.add(new Birth(2005, 100, 60));
        births.add(new Birth(2006, 44, 110));
        births.add(new Birth(2007, 150, 135));
        births.add(new Birth(2008, 125, 120));
    }

    public List<Birth> getBirths() {
        return births;
    }

    public ColumnChart getColumnChart() {
        return columnChart;
    }

    public void setColumnChart(ColumnChart columnChart) {
        if (this.columnChart == null) {
            FacesContext fc = FacesContext.getCurrentInstance();
            ExpressionFactory ef = fc.getApplication().getExpressionFactory();

            ValueExpression labelExpr;
            ValueExpression valueExpr;

            ChartSeries cs = new ChartSeries();
            labelExpr = ef.createValueExpression(fc.getELContext(),"Boys1", String.class);
            valueExpr = ef.createValueExpression(fc.getELContext(),"#{birth.boys}", int.class);
            cs.setValueExpression("label", labelExpr);
            cs.setValueExpression("value", valueExpr);
            columnChart.getChildren().add(cs);

            cs = new ChartSeries();
            labelExpr = ef.createValueExpression(fc.getELContext(),"Girls1", String.class);
            valueExpr = ef.createValueExpression(fc.getELContext(),"#{birth.girls}", int.class);
            cs.setValueExpression("label", labelExpr);
            cs.setValueExpression("value", valueExpr);
            columnChart.getChildren().add(cs);
        }

        this.columnChart = columnChart;
    }
}


Class birth:

package controller;

public class Birth {

    private int year;

    private int boys;

    private int girls;

    public Birth() {

    }

    public Birth(int year, int boys, int girls) {
        this.year = year;
        this.boys = boys;
        this.girls = girls;
    }

    public int getYear() {
        return year;
    }

    public void setYear(int year) {
        this.year = year;
    }

    public int getBoys() {
        return boys;
    }

    public void setBoys(int boys) {
        this.boys = boys;
    }

    public int getGirls() {
        return girls;
    }

    public void setGirls(int girls) {
        this.girls = girls;
    }
}


Posts: 23
Regarding the YAHOO error ...

You didn't specify, but did you debug it and put a breakpoint inside of getColumnChart() to verify it was being called?

Another neat thing you can do is set a break point in the ColumnChart constructor (where the resources are added for the <p:resources/> tag to print out) to make sure it is being called.

This doesn't address your specific problem, but why are you using a binding? Would it be better to use a c:forEach to define multiple chart series like this (this is lineChart but columnChart should be similar):

<p:lineChart value="#{searchBean.searchResult.rows}" var="row" xfield="#{row.xaxis}">
   <c:forEach var="field" items="#{searchBean.searchResult.fieldNames}">
      <p:chartSeries label="#{field}" value="#{row.values[field]}"/>
   </c:forEach>
</p:lineChart>


EDIT TO ADD: THERE ARE PROBLEM WITH THIS APPROACH IN PRIMEFACES 1.0.2 AND MULTIPLE CHARTSERIES.

Regards,
Chris

P.S. In the future, remember to put your code in code blocks so the formatting is preserved.
Latest: Tomcat 7.0.22, JSF Mojarra 2.1.3, Primefaces: 2.2.1
Previous: Tomcat 6.0.32, JSF Mojarra 1.2_12-b01-FCS, Facelets 1.1.14, Primefaces 1.1
Browser: latest FF, IE, Chrome and Safari


Posts: 9
hi

thank you for your replies . i will try your solutions and get back

thanks again


Return to General