I have created a combinational VF line chart. The values on the chart is plotted from a custom object "Profile__c" which has a lookup on Contact. I have created a select list on my page which is displaying some data along with the chart. All the data/queries have the WHERE clause on selected Contact's name. I have following 2 requirements.

  1. I need to create a select list just above my VF chart which displays the list of one of Profile__c object's text field (Profile_Name__c) which should be filtered depending upon the Contact selected (Done). Once this Profile_Name__c is selected, data related with this combination should be plotted on the line chart. After selecting Contact and Profile Name, no chart is being displayed.

  2. I have to display a custom Date field (Date__c) on X axis. Everything is working fine, however the Date in the X axis is not displaying in the proper format. Its displaying as an irrelevant Number. Please suggest as I need to display Date in MM/DD/YYYY format.

Thanks in advance.


 Public List<SelectOption> getContactList(){
List<SelectOption>ContactList = new List<SelectOption>();
    ContactList.add(new SelectOption('','------------select-----------'));
    List<Contact>conList = [select Id,Name from Contact];
    for(Contact a:conList){
        ContactList.add(new SelectOption(a.id,a.name));
        System.debug('=====ContactList=====' +ContactList);
    return ContactList;

  public PageReference masterMethod() {   
 return null;

//Filter for Profile Name
 Public List<SelectOption> getProfileList(){
List<SelectOption>ProfileList = new List<SelectOption>();
    ProfileList.add(new SelectOption('','------------Select-----------'));
    List<Profile__c>profileList = [select Id,Name, Profile_Name__c from Profile__c];
    for(Profile__c p:profileList){
        ProfileList.add(new SelectOption(p.id,p.Profile_Name__c));
        System.debug('=====ProfileList=====' +ProfileList);
    return ProfileList;

 //Line chart
 public List<LineChartData> getLineData() 
    List<LineChartData> ldata = new List<LineChartData>();
    List<Profile__c> cpb = new List<Profile__c>();            
    String sql = 'SELECT Name, Profile_Value__c, Date__c, Profile_Name__c, Portfolio_Performance__c, Contact__c FROM Profile__c WHERE Contact__c = :selectedName order by Date__c asc';
    cpb = Database.Query(sql);           
    for(Profile__c temp: cpb)
    if(temp.Profile_Value__c !=null && temp.Portfolio_Performance__c !=null && temp.Date__c !=null)
        ldata.add(new LineChartData(temp.Date__c, temp.Profile_Value__c,temp.Portfolio_Performance__c));

   /* if(Date1 != null) {
            List<String> lstCompDate = Date1.split('/');
            if(lstCompDate != null && lstCompDate.size() == 3) {
                temp.Date__c = Date.newinstance(Integer.valueOf(lstCompDate[2]), Integer.valueOf(lstCompDate[1]), Integer.valueOf(lstCompDate[0]));
    return ldata;  

// Wrapper class  
public class LineChartData
    public Date Date1 { get; set; }  
    public Decimal Profile { get; set; }
    public Decimal Portfolio { get; set; }  

    public LineChartData(Date Date1, Decimal Profile, Decimal Portfolio ) 
        this.Date1 = Date1;  
        this.Profile = Profile;
        this.Portfolio  = Portfolio ;  


<apex:pageBlock >
        <apex:pageblockSection title="Contact">                
            <apex:selectList value="{!selectedName}" size="1">
            <apex:selectOptions value="{!ContactList}"/>                 
             <apex:actionSupport event="onchange" action="{!masterMethod}" rerender="PositionPie,LineData"/>

       <apex:outputPanel id="LineData"  style="width:100%; ">   
        <apex:pageblock id="Graph" title="Performance" >
        <apex:selectList id= "List" value="{!selectedprofile}" size="1">
        <apex:selectOptions value="{!ProfileList}"/>
        <apex:chart height="300" width="500" data="{!LineData}">       
        <apex:axis type="Numeric" position="left" fields="Profile,Portfolio"
        <apex:axis type="Category" position="bottom" fields="Date1">            
        <apex:lineSeries axis="left" fill="true" xField="Date1" yField="Profile"
        markerType="cross" markerSize="4" markerFill="#FF0000"/>
        <apex:lineSeries axis="left" xField="Date1" yField="Portfolio"
        markerType="circle" markerSize="4" markerFill="#8E35EF"/>
        <apex:legend position="right"/>           

2 Answers 2


I know this is pretty late, but I figured it out. You need to change the type of Date1 to String, then in the constructor, declare it to be this.Date1 = Date1.format() and you should be good to go.


On 2), add this property to your LineChartData class:

public String FormattedDate {
    get {
        return Date1.format();

and reference that property FormattedDate instead of Date1 in your chart.

I don't see what is causing your problem 1).

  • Thanks alot Keith. But this code isnt working. It gives an error "Compile Error: expecting a semi-colon, found '{' at line public String FormattedDate {" Dec 17, 2014 at 10:25
  • @SalesforceLearner It compiles for me. You are adding this inside the LineChartData class say immediately after the Date1 declaration aren't you?
    – Keith C
    Dec 17, 2014 at 10:41
  • I was adding it earlier to the method, but now added it in the wrapper class just after 'public Date Date1 { get; set; } ' which saved the code. I also replaced Date1 to FormattedDate at all 3 places in VF Page, but now the chart is not getting displayed. Dec 17, 2014 at 10:51
  • Try changing to apex:axis type="Category" for that axis.
    – Keith C
    Dec 17, 2014 at 11:25
  • Tried this, but didn't displayed the chart. Tried all possible combination with Date1 and FormattedDate at x fields & apex:axis type="Category". This is what I've added as per your suggestion: '<apex:axis type="Category" position="bottom" fields="FormattedDate"> </apex:axis> <apex:lineSeries axis="left" fill="true" xField="Date1" yField="Profile" markerType="cross" markerSize="4" markerFill="#FF0000"/> <apex:lineSeries axis="left" xField="Date1" yField="Portfolio" markerType="circle" markerSize="4" markerFill="#8E35EF"/>' Dec 17, 2014 at 11:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .