progrmmatically created column chart is not working

Components, Ajax Framework, Utilities and More.
Post Reply
anas1234
Posts: 9
Joined: 19 Jun 2010, 08:04

19 Jun 2010, 08:13

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;
}

anas1234
Posts: 9
Joined: 19 Jun 2010, 08:04

24 Jun 2010, 10:51

hey people .... at least a hint would help
Thanks

callahan
Posts: 768
Joined: 27 May 2010, 22:52

24 Jun 2010, 17:04

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:

Code: Select all

<!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:

Code: Select all

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:

Code: Select all

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;
    }
}

mouse
Posts: 24
Joined: 23 Jun 2010, 23:38

24 Jun 2010, 20:02

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):

Code: Select all

<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.68, JSF Mojarra 2.2.8-11, Primefaces: 6.0.0
Previous: 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

anas1234
Posts: 9
Joined: 19 Jun 2010, 08:04

27 Jun 2010, 19:15

hi

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

thanks again

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Bing [Bot], Google [Bot] and 4 guests