CODEWITHSUNDEEP
jsfjsf-2primefaces
Isma90
Isma90

Reputation: 661

not working barChart Primefaces

I'm trying to implement a bar chart with Primefaces (in the Pom.xml i have the dependency of Primefaces 4.0), but when running the application does not display anything on the screen, but selecting inspect element appears <div id="stacked"> and a script, but nothing more.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES"
        "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:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui" lang="es">
<f:view contentType="text/html">
    <h:head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta HTTP-EQUIV="refresh" content="1803"/>
        <title>Sistema de Seguimientos de Ciclos de Calidad</title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link href="/sistema.ciclos.calidad/resources/css/estilo.css" media="screen" rel="stylesheet" type="text/css" />

    </h:head>
    <h:body link="#000033">
            <div id="frame" >
                 <h:form>
                    <p:barChart id="stacked" value="#{grafico.categoryModel}" legendPosition="ne" style="height:300px"
                                title="Stacked Bar Chart" stacked="true" barMargin="50" min="0" max="300"/>
                 </h:form>
            </div>

    </h:body>
</f:view>
</html>

the bean that is called is the following:

import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;


import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import java.io.Serializable;


@ManagedBean(name = "grafico")
@ViewScoped
public class Chart implements Serializable {

    private CartesianChartModel categoryModel;

    @PostConstruct
    public void init(){
        categoryModel = new CartesianChartModel();

        ChartSeries boys = new ChartSeries();
        boys.setLabel("Boys");

        boys.set("2004", 120);
        boys.set("2005", 100);
        boys.set("2006", 44);
        boys.set("2007", 150);
        boys.set("2008", 25);

        ChartSeries girls = new ChartSeries();
        girls.setLabel("Girls");

        girls.set("2004", 52);
        girls.set("2005", 60);
        girls.set("2006", 110);
        girls.set("2007", 135);
        girls.set("2008", 120);

        categoryModel.addSeries(boys);
        categoryModel.addSeries(girls);
    }

    public CartesianChartModel getCategoryModel() {
        return categoryModel;
    }

    public void setCategoryModel(CartesianChartModel categoryModel) {
        this.categoryModel = categoryModel;
    }

}

Upvotes: 1

Views: 4938

Answers (2)

omilke
omilke

Reputation: 837

I have just run into the very same issue.

What i found out was that not necessarily the version of jquery is the source of the problem. It rather seems that the <p:barChart> itself does not include the needed jquery scripts.

After I added a <p:dataTable> to the page, the chart was displayed again, even if it was just not rendered (<p:dataTable rendered="false" />).

When comparing the rendered results with and without the dummy <p:dataTable> respectively, I noticed that the <p:dataTable> forces the following to be included in the <head>:

<link type="text/css" rel="stylesheet" href="/banking/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=4.0" />
<script type="text/javascript" src="/banking/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&amp;v=4.0"></script>

Therefore I assume it is a bug in the <p:barChart>, which just misses the include.

Upvotes: 2

user2793181
user2793181

Reputation: 16

I have faced same issue after switching from 3.5 to 4

As I remembered, The issue is a javascript error related to the jquery version used in primefaces 4 I have replaced the jquery.js file in the primefaces 4 jar with the one in primefaces 3.5 jar & that has solved the issue

The location of jquery.js file inside the primefaces jar is

META-INF\resources\primefaces\jquery

Upvotes: 0

Related Questions