pie chart is blank

varunagrawal · 17 Sep 2010, 18:13

Hi ,
I am trying to use pie chart.
However nothing is displayed on my page.Its blank.
Here is my code:-
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>head</title>
<p:resources/>
</h:head>
<h:body>
<h:form>
pie chart
<div>
<p:pieChart value="#{Propertiescontroller.propertiesList}" var="sale" categoryField="#{sale.name}"
dataField="#{sale.state}" style="chartStyle" />
</div>
</h:form>
</h:body>
</html>

Here is what I view in source of blank page:-

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="/ResidentPortal-v0/primefaces_resource/2.1/skins/sam/skin.css" />
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/yui/swf/swf-min.js"></script>
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/yui/charts/charts-min.js"></script>
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/jquery/jquery.js"></script>
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/primefaces/core/core.js"></script>
<script type="text/javascript" src="/ResidentPortal-v0/primefaces_resource/2.1/primefaces/charts/charts.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>head</title></head><body>
<form id="j_idt8" name="j_idt8" method="post" action="/ResidentPortal-v0/faces/pie.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt8" value="j_idt8" />

pie chart
<div><script type="text/javascript">YAHOO.widget.Chart.SWFURL = '/ResidentPortal-v0/primefaces_resource/2.1/yui/charts/assets/charts.swf'</script><div id="j_idt8:j_idt10" style="width:500px;height:350px"></div><script type="text/javascript">jQuery(document).ready(function(){var widget_j_idt8_j_idt10_data = [{name:'The Woods At Ridgeway',state:TN},
{name:'Brightwaters',state:AR},
{name:'Coach Lantern',state:ME},
{name:'Bent Oaks',state:TX},
{name:'The Falls at Duraleigh',state:NC},
{name:'Tanglewood Court',state:TX},
{name:'Howell Bridge',state:GA},
{name:'The Berkley Apartment Homes',state:AR},
{name:'Cape Cod',state:TX},
{name:'Cuestas',state:NM},
{name:'Fairfield',state:AR},
{name:'Foxcroft',state:ME},
{name:'Fox Glove Apartments',state:TX},
{name:'Heritage Lake',state:TN},
{name:'Highland Ridge',state:KS},
{name:'Magnolia Villas',state:GA},
{name:'Memorial Towers',state:TX},
{name:'Nittany Pointe',state:PA},
{name:'Oak Park Village',state:KS},
{name:'Park Hill',state:TX},
{name:'Pear Tree',state:TX},
{name:'Pleasant Pointe',state:AR},
{name:'Regency Park South',state:IN},
{name:'Regents Center',state:KS},
{name:'River Oaks Apartments',state:MI},
{name:'Sage Canyon',state:NM},
{name:'Ryans Crossing',state:TX},
{name:'Santa Fe Place',state:TX},
{name:'Gateway Townhomes',state:MI},
{name:'Shoreline Landing Apartments',state:MI},
{name:'Grove At White Oak',state:TX},
{name:'The Lodge of Overland Park',state:KS},
{name:'Valley Crossing',state:AR},
{name:'West Chase Crossing',state:TX},
{name:'West Wind Landing',state:GA},
{name:'Windtree',state:TX},
{name:'Woodhollow',state:TX},
{name:'Woodland Hills',state:GA},
{name:'Wyndham Park',state:TX},
{name:'Twyckenham Apartments',state:IN},
{name:'Villas of Henderson Pass',state:TX},
{name:'300 North Vista Apartment Homes ',state:TX},
{name:'International Village',state:IN},
{name:'Highline Club',state:MI},
{name:'The Parkway',state:TX},
{name:'Parkgreen on Bellaire Apartments',state:TX},
{name:'Chenal Lakes',state:AR},
{name:'The Enclave at North Point',state:NC},
{name:'Waterstone Landing',state:TN},
{name:'Avalon Apartments',state:CA},
{name:'West Tech Lofts',state:OH}];
var widget_j_idt8_j_idt10_dataSource = new YAHOO.util.DataSource(widget_j_idt8_j_idt10_data);
widget_j_idt8_j_idt10_dataSource.responseType=YAHOO.util.DataSource.TYPE_JSARRAY;
widget_j_idt8_j_idt10_dataSource.responseSchema = {fields:["name","state"]};
widget_j_idt8_j_idt10 = new YAHOO.widget.PieChart("j_idt8:j_idt10", widget_j_idt8_j_idt10_dataSource,{categoryField:"name",dataField:"state",expressInstall:"/ResidentPortal-v0/primefaces_resource/2.1/yui/assets/expressinstall.swf",style:chartStyle});
});</script>
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8209652956611761087:6749031789901634753" autocomplete="off" />
</form></body>
</html>

callahan · 17 Sep 2010, 18:40

Hi,

dataField is set to "#{sale.state}" which is the abbreviation for a state, i.e., a string. Its should be set to a number, probably "#{sale.amount}".

varunagrawal · 17 Sep 2010, 20:02

dosen't make a difference, tried with a number value also.

callahan · 17 Sep 2010, 20:39

Well, it should be a number.

You have style="chartStyle", so you'll need something similar the following in the <h:head>. chartStyle is a Javascript variable.

Code: Select all

    <script type="text/javascript">
      var chartStyle = {
        padding:20,
        legend: {
          display:"left",
          spacing:10
        }
      };
    </script>

- Are you able to view the showcase charts in you browser? If not it may be a flash problem.
- Are you getting any Javascript errors in the browser?
- See FAQ 6 in the user's guide if you're using Chrome or Safari.

callahan · 17 Sep 2010, 20:58

If none of the above helps, post the full source code for the managed bean.

pie chart is blank

Who is online