+ Start a Discussion
asish1989asish1989 

Drawing chart in visualforce page.

Hi 

  I want to draw a bar an pie chart in visualforce page . I know It  can be by using GooglechartApi , But I want to draw by using 

  

  <apex:chart> .  I have treid alot . 

   here is my code . 

 

  

<apex:page controller="OppsController">
<apex:chart data="{!BarWedgeData}" width="600" height="400">
<apex:axis type="Category" position="left" fields="name" title="Opportunities"/>
<apex:axis type="Numeric" position="bottom" fields="amount" title="Amount"/>
<apex:barSeries orientation="horizontal" axis="bottom" xField="name" yField="amount"/>
<!--<apex:pieSeries dataField="amount" labelField="name"/>-->

</apex:chart>
<apex:dataTable value="{!BarWedgeData}" var="opp">
<apex:column headerValue="Opportunity" value="{!opp.name}"/>
<!--<apex:column headerValue="Amount" value="{!opp.amount}"/>-->
</apex:dataTable>
</apex:page>

 

 

My class code is 

 

 

public class OppsController {

// Get a set of Opportunities
public List<Opportunity> opptList{get;set;}

/* public ApexPages.StandardSetController setCon {
get {
if(setCon == null) {
setCon = new ApexPages.StandardSetController(Database.getQueryLocator(
[SELECT name, type, amount, closedate FROM Opportunity]));
setCon.setPageSize(5);
}
return setCon;
}
set;
}*/

List<BarWedgeData > data {get;set;}

public OppsController() {
opptList = [SELECT name, type, amount, closedate FROM Opportunity limit 10];
data = new List<BarWedgeData>();


}
public List<BarWedgeData > getBarWedgeData () {
for(Opportunity opt : opptList)
{
//data = new List<BarWedgeData>();
data.add(new BarWedgeData (opt.name));
}
//data.add(new BarWedgeData (opt.closedate));
return data;

}


public class BarWedgeData {

public String name { get; set; }
public Double data { get; set; }

public BarWedgeData (String name) {
this.name = name;
this.data = data;
}
}

}

 

here I have written code to dislaay all Opportunity name in a list and a graph.

  List is displayed but graph is not displayed. please help me as soon as possible

 

Thanks

asish

 

Abhay AroraAbhay Arora

Hi,

 

I am looking into your code also there is another way below is the link for it.

 

http://developer.force.com/cookbook/recipe/integrating-visualforce-and-google-charts

asish1989asish1989

Hi

   I have already seen that link . I think this link does not help me  because my requirement is to fetch data from database not enter manually.. Anyways thanks for reply

 

 

 

Thanks

asish

Abhay AroraAbhay Arora

For this you can just change the part where we are entring data from UI to populate it from values  in Db

cwall_sfdccwall_sfdc

Don't use Google Charts.  Use Visualforce Charts.  We'll figure this out.

 

Are there any Javascript errors?  (Firebug or similar)

cwall_sfdccwall_sfdc

Also review your Javascript console when developing/debuging Javascript-based Visualforce components / features.

 

Seeing:

"Visualforce Chart: Error loading configuration for chart 'jid0jid1': Did not find required field 'amount' in data for chart 'jid0jid1'. Make sure field was queried and/or provided and has a value."

 

You need to supply the amount value if you're charting it.  Add amount to BarWedgeData as a type Decimal.

 

And also, reverse your data binding to axias (xField and yField values):

<apex:barSeries orientation="horizontal" axis="bottom" xField="amount" yField="name"/>

asish1989asish1989

Hi

   Thanks for reply.. I did what you suggested and Its workinf nice . But ther is a small issue  . All other graph is working fine but In bar chat only x axis and y axis is visible with label . but no graph is done .I mean only bar chart schema is visible.so pleae help me as soon as possible.

 

 

 

Thanks

asish

 

 

 

 

 

asish1989asish1989

Hi Everyone

  I got solutions .Its working nice..

 

 

 

 

Thanks

asish

cwall_sfdccwall_sfdc

Great.  What solved the bar series issue?

asish1989asish1989

Hi

  simply  I deleted all the records whose Amount filed is zero .

  I gave the same name in xfield and yfiled value as in query in apex .

  And last adjust the orientation type verical or horizontal .

 

 

 

 

  Thanks

  asish

geeljiregeeljire
I ran into the same issue and wanted to document my solution here for future references:

In my case, the problem was that some of the values in the amount field were null. Make sure to check the fields and make them 0 if they're null.