You need to sign in to do that
Don't have an account?
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
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
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
For this you can just change the part where we are entring data from UI to populate it from values in Db
Don't use Google Charts. Use Visualforce Charts. We'll figure this out.
Are there any Javascript errors? (Firebug or similar)
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"/>
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
Hi Everyone
I got solutions .Its working nice..
Thanks
asish
Great. What solved the bar series issue?
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
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.