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"/>           

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 '14 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 '14 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 '14 at 10:51
  • Try changing to apex:axis type="Category" for that axis.
    – Keith C
    Dec 17 '14 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 '14 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.