Date field on VF chart

Question

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.

Class-

 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() {   
 getLineData(); 
 getPieData();
 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 ;  
    }  
}

Page-

<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:selectList>               
        </apex:pageblockSection> 
       </apex:pageBlock>

       <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"
        grid="true"/>            
        <apex:axis type="Category" position="bottom" fields="Date1">            
        </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"/>
        <apex:legend position="right"/>           
    </apex:chart>
    </apex:pageblock>        
</apex:outPutPanel>

Answer 1

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.

Answer 2

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).