function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Harshitha BHarshitha B 

How to display chart using visualforce page

Hi,

can any one help me, How to display chart based on the selection of from date and to date using visualforce page.

Thanks,
 
Best Answer chosen by Harshitha B
BALAJI CHBALAJI CH
Hi Harshitha,

Your code is perfect apart from few changes. Please find below modified code and let me know if that works for you.

VF Page: 
<apex:page controller="AccountRec_Barchart" docType="html-5.0" title="Bar chart" >
    <apex:form >
        
        <apex:outputText value="from Date">
        </apex:outputText>
        <apex:input type="date" value="{!fromdate}"/>
        <apex:outputText value="ToDate"></apex:outputText>
        <apex:input type="date" value="{!todate}" />
        <apex:commandButton value="submit" action="{!submit}" reRender="chartid" />
        
    </apex:form>
    
    <apex:chart id="chartid" height="300" width="650" data="{!data}" colorSet="2A98DC"  resizable="true" >
        
        <apex:axis type="Numeric" position="left" fields="count" title="Recordcount" minimum="0" grid="false" />
        <apex:axis type="Category" position="bottom" fields="billingcityname" title="billingcity"  />
        <apex:barSeries orientation="vertical" axis="left" xField="billingcityname" yField="count">
            
        </apex:barSeries>
        
    </apex:chart> 
    
    <apex:chart height="300" width="650" data="{!data}" resizable="true">
        <apex:pieSeries tips="true" dataField="count" labelField="billingcityname"></apex:pieSeries>
        <apex:legend position="right"/>
    </apex:chart>
    
</apex:page>

Controller: 
public class AccountRec_Barchart
{
    public date fromDate{set;get;}
    public date todate{set;get;}
    public list<aggregateresult> listaggregate= new list<aggregateresult>();
    public list<barchartdata> lb = new list<barchartdata>();
    
    public void submit()
    {
        listaggregate = [select billingcity, COUNT(Id) n
                         from Account 
                         where createddate > : fromDate and createddate <:todate
                         group by billingcity
                         HAVING billingcity like '%'];
    }
    
    public barchartdata[] getdata()
    {	
        system.debug('getdata');
        barchartdata[] datachart = new barchartdata[]{};
            
            for(aggregateresult a :listaggregate)
        {
            datachart.add(new barchartdata(a));     
        }
        return datachart;
    }
    
    // wrapper class 
    public class barchartdata
    {
        public string city {set;get;}
        public  integer count{set;get;}
        public string billingcityname{set;get;}
        barchartdata(aggregateresult result)
        {
            this.count = (Integer) result.get('n');
            this.city = (string) result.get('billingcity');           
            this.billingcityname = city+'';
        }
    } 
}

Best Regards,
BALAJI
 

All Answers

Sujit Anil NirkheSujit Anil Nirkhe
Hi Harshitha,

To display charts, you can use apex charts(https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_charting_overview_simple_example.htm). 

And for Date range, you can get two date fields and a button to process and fetch input related data, add this to charting.
Harshitha BHarshitha B
Thanks for your reply :)

please check my code and let me know if you get it 
controller

public class AccountRec_Barchart
{
    public date fromDate{set;get;}
    public date todate{set;get;}
    public list<aggregateresult> listaggregate= new list<aggregateresult>();
    public list<barchartdata> lb = new list<barchartdata>();
    
    
    public void submit()
    {
        system.debug('submit');
      for(aggregateresult la :[ select count(acc.name) n,acc.billingcity from account acc
                                   where acc.createddate > : fromDate and acc.createddate <:todate
                                  group by acc.billingcity 
                                  HAVING count(acc.name) > 20 and acc.billingcity like '%'])
      {
		if(la <> NULL)
        {
				listaggregate.add(la);
				system.debug('if block end');            
        }
          
          
          system.debug('la' + la);
      }
    }
    
    
   public barchartdata[] getdata()
    {	
        barchartdata[] datachart = new barchartdata[] {};
            for(aggregateresult a :[select count(name) n,billingcity b
                                    from account
                                    group by billingcity 
                                    HAVING count(name) > 20 and billingcity like '%'])
        {
            datachart.add(new barchartdata(a));
          /* lb.add(new barchartdata(
           
            (integer)a.get('name'),
           (integer)a.get('billing city')));
            */
            
        }
        return datachart;
    }
   // wrapper class 
    public class barchartdata
    {
        public string city {set;get;}
        public  integer count{set;get;}
        public string billingcityname{set;get;}
        barchartdata(aggregateresult result)
        {
            this.count = (Integer) result.get('n');
            this.city = (string) result.get('billingcity');           
            this.billingcityname = city+'';
        }
    } 
 
}

visual force page

<apex:page controller="AccountRec_Barchart" docType="html-5.0" title="Bar chart" >
    <apex:form >
        
        <apex:outputText value="from Date">
        </apex:outputText>
        <apex:input type="date" value="{!fromdate}"/>
        <apex:outputText value="ToDate"></apex:outputText>
        <apex:input type="date" value="{!todate}" />
        <apex:commandButton value="submit" action="{!submit}" reRender="chartid" />
        
    </apex:form>
    
    <apex:chart id="chartid" height="300" width="650" data="{!data}" colorSet="2A98DC"  resizable="true" >
        
        <apex:axis type="Numeric" position="left" fields="count" title="Recordcount" />
        <apex:axis type="Category" position="bottom" fields="billingcityname" title="billingcity"  />
        <apex:barSeries orientation="vertical" axis="left" xField="billingcityname" yField="count">
            
        </apex:barSeries>
        
    </apex:chart> 
    
    <apex:chart height="300" width="650" data="{!data}" resizable="true">
        <apex:pieSeries tips="true" dataField="count" labelField="billingcityname"></apex:pieSeries>
        <apex:legend position="right"/>
    </apex:chart>
    
</apex:page>

 
Sujit Anil NirkheSujit Anil Nirkhe
Yup, it looks right..
Harshitha BHarshitha B
But its not displaying proper output.
Harshitha BHarshitha B
But its not displaying proper output.
Sujit Anil NirkheSujit Anil Nirkhe
Check whether SOQL is returning any records(I guess it is not returning any record), When you will get records , you will see another error for which correction needs to be done in apex class: replace 'billingcity' @ line 58 by 'b'. 
BALAJI CHBALAJI CH
Hi Harshitha,

Your code is perfect apart from few changes. Please find below modified code and let me know if that works for you.

VF Page: 
<apex:page controller="AccountRec_Barchart" docType="html-5.0" title="Bar chart" >
    <apex:form >
        
        <apex:outputText value="from Date">
        </apex:outputText>
        <apex:input type="date" value="{!fromdate}"/>
        <apex:outputText value="ToDate"></apex:outputText>
        <apex:input type="date" value="{!todate}" />
        <apex:commandButton value="submit" action="{!submit}" reRender="chartid" />
        
    </apex:form>
    
    <apex:chart id="chartid" height="300" width="650" data="{!data}" colorSet="2A98DC"  resizable="true" >
        
        <apex:axis type="Numeric" position="left" fields="count" title="Recordcount" minimum="0" grid="false" />
        <apex:axis type="Category" position="bottom" fields="billingcityname" title="billingcity"  />
        <apex:barSeries orientation="vertical" axis="left" xField="billingcityname" yField="count">
            
        </apex:barSeries>
        
    </apex:chart> 
    
    <apex:chart height="300" width="650" data="{!data}" resizable="true">
        <apex:pieSeries tips="true" dataField="count" labelField="billingcityname"></apex:pieSeries>
        <apex:legend position="right"/>
    </apex:chart>
    
</apex:page>

Controller: 
public class AccountRec_Barchart
{
    public date fromDate{set;get;}
    public date todate{set;get;}
    public list<aggregateresult> listaggregate= new list<aggregateresult>();
    public list<barchartdata> lb = new list<barchartdata>();
    
    public void submit()
    {
        listaggregate = [select billingcity, COUNT(Id) n
                         from Account 
                         where createddate > : fromDate and createddate <:todate
                         group by billingcity
                         HAVING billingcity like '%'];
    }
    
    public barchartdata[] getdata()
    {	
        system.debug('getdata');
        barchartdata[] datachart = new barchartdata[]{};
            
            for(aggregateresult a :listaggregate)
        {
            datachart.add(new barchartdata(a));     
        }
        return datachart;
    }
    
    // wrapper class 
    public class barchartdata
    {
        public string city {set;get;}
        public  integer count{set;get;}
        public string billingcityname{set;get;}
        barchartdata(aggregateresult result)
        {
            this.count = (Integer) result.get('n');
            this.city = (string) result.get('billingcity');           
            this.billingcityname = city+'';
        }
    } 
}

Best Regards,
BALAJI
 
This was selected as the best answer
BALAJI CHBALAJI CH
Hi Suresh,

Yes, you can do the same thing using Custom Objects as well. Just query the records from the Custom Object and aggregate them by require fields . Take appropriate chart in Visualforce page and do required changes in Controller.

Best Regards,
BALAJI
BALAJI CHBALAJI CH
Hi Suresh,

I have a custom object names as Emp and API name is Emp__c which has a custom field Designation whose API name is desig__c. 
Now, I am creating a Chart for that Custom Object which displays Pie chart with different designations.

VF Page: 
<apex:page controller="ChartController">
    <apex:pageBlock title="Custom Object">
        <apex:chart height="400" width="1000" data="{!CandidateData6}" >
            <apex:axis type="Numeric" position="left" fields="count" steps="8" minimum="0" title="Record Count"/>
            <apex:axis type="Category" position="bottom" fields="Value" title="Experience"/>
            <apex:PieSeries tips="true" dataField="count" labelField="Value" />
        </apex:chart>
    </apex:pageBlock> 
</apex:page>

Controller: 
public class ChartController {
    public CandData6[] getCandidateData6() {
        CandData6[] cands6 = new CandData6[] {};
            for (AggregateResult ar : [select Desig__c n, COUNT(Id) 
                                       from Emp__c
                                       group by Desig__c]) 
        {            
            cands6.add(new CandData6(ar));
        }
        
        return cands6;
    }
    
    // Wrapper class 
    public class CandData6
    {
        public string Designation {get; set;}
        public Integer count {get; set;}
        public string Value {get; set; }
        CandData6(aggregateresult a) 
        {
            this.count = (Integer) a.get('expr0');
            this.Designation = (string) a.get('n');           
            this.Value = Designation+'';
        }
    }
}

Screeshot of the Chart:
User-added image

Best Regards,
BALAJI
Suresh GocharSuresh Gochar
How to display chart based on the selection of from date and to date using visualforce page.
same thing  Bar Chart  
I Have One Custom  object (Customer_C) and  Two Date Field  Start date and End Date 
can u give  Conrtoller code and vf page 
Actully i m new in salesforce

 
BALAJI CHBALAJI CH
Then your code will be same as the Solution of this post.
You have to just replace with the Account object  with your custom object Customer__c and replace billingcity with your required field in custom object.
Please find below links to understand more about Visualforce Charts:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_charting.htm
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_charting_overview_simple_example.htm
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_chart.htm

Best Regards,
BALAJI
Suresh GocharSuresh Gochar
When i click Submit Button

System.UnexpectedException: field 'Start_Date__c' can not be grouped in a query call
Error is in expression '{!submit}' in component <apex:commandButton> in page barchart: Class.AccountRec_Barchart.submit: line 11, column 1
Class.AccountRec_Barchart.submit: line 11, column 1
Generate

this my code 
Contoller


public class AccountRec_Barchart
{
    public date fromDate{set;get;}
    public date todate{set;get;}
    public list<aggregateresult> listaggregate= new list<aggregateresult>();
    public list<barchartdata> lb = new list<barchartdata>();
    
    public void submit()
    {
    
 listaggregate=[SELECT Hall__c,Name,Count(Id) n,End_Date__c FROM Booking__c
                         where Start_Date__c> : fromDate and End_Date__c<:todate
                           group BY Hall__c ,Name,Start_Date__c,End_Date__c,Customer__r.Name
                        ];
    
    
     system.debug('ffdd'+ listaggregate);
  
    }
    
    public barchartdata[] getdata()
    {   
        system.debug('getdata');
        barchartdata[] datachart = new barchartdata[]{};
            
            for(aggregateresult a :listaggregate)
        {
            datachart.add(new barchartdata(a));     
        }
        return datachart;
    }
    
    // wrapper class 
    public class barchartdata
    {
        public string city {set;get;}
        public  integer count{set;get;}
        public string billingcityname{set;get;}
        barchartdata(aggregateresult result)
        {
            this.count = (Integer) result.get('n');
            this.city = (string) result.get('billingcity');           
            this.billingcityname = city+'';
        }
    } 
}


Vf page  



<apex:page controller="AccountRec_Barchart" docType="html-5.0" title="Bar chart" >
    <apex:form >
        
        <apex:outputText value="from Date">
        </apex:outputText>
        <apex:input type="date" value="{!fromdate}"/>
        <apex:outputText value="ToDate"></apex:outputText>
        <apex:input type="date" value="{!todate}" />
        <apex:commandButton value="submit" action="{!submit}" reRender="chartid" />
        
    </apex:form>
    
    <apex:chart id="chartid" height="300" width="650" data="{!data}" colorSet="2A98DC"  resizable="true" >
        
        <apex:axis type="Numeric" position="left" fields="count" title="Recordcount" minimum="0" grid="false" />
        <apex:axis type="Category" position="bottom" fields="billingcityname" title="billingcity"  />
        <apex:barSeries orientation="vertical" axis="left" xField="billingcityname" yField="count">
            
        </apex:barSeries>
        
    </apex:chart> 
    
    <apex:chart height="300" width="650" data="{!data}" resizable="true">
        <apex:pieSeries tips="true" dataField="count" labelField="billingcityname"></apex:pieSeries>
        <apex:legend position="right"/>
    </apex:chart>
    
</apex:page>










 
Suresh GocharSuresh Gochar
can u give sloution now