Apex chart - Scatter Series

Question

I have a line series with Y AXIS = Opportunity Closed Date X AXIS = Opportunity stage OpportunityFeedback has 4 picklist values. Based on that I was planning to spread the data into scatter series and give MarkerFill a different colour for each series.

<apex:chart data="{!TotalData}" height="200" width="90%" background="#FFFFFF">
    <apex:legend position="top"/>
    <apex:axis type="Numeric" position="left" grid="false" fields="OpportunityStage" dashSize="2">
        <apex:chartLabel />
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="OpportunityClosedDate" >
        <apex:chartLabel rotate="315"/>
    </apex:axis>

    <apex:lineSeries axis="left" xField="OpportunityClosedDate" yField="What should be put?" markerType="circle" markerSize="0" markerFill="#8E35EF" tips="false">
        <apex:chartTips height="80" width="120" labelField="OpportunityStage" valueField="ToolTip"/>
    </apex:lineseries>
    <apex:scatterSeries axis="left" xField="OpportunityClosedDate" yField="What should be put?" markerType="circle" markerSize="4" markerFill="#1919ff"/>
</apex:chart>

How to spread data in an apex series?

*TotalData is the name of the method which returns the data.

Answer 1

Please note that I'm displaying single opportunity for particular date. In case if you have several opp-ies for single day - markers could be overlapped.

VF:

<apex:page controller="ChartController2" showHeader="false" sidebar="false">
<apex:chart height="480" width="640" data="{!data}">
    <apex:axis type="Category" position="bottom" fields="closed" 
               title="Month of the Year" grid="true">
               <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:axis type="Numeric" position="left" fields="stage" 
               title="Stage - Closed Won"/>
    <apex:lineSeries axis="left" xField="closed" yField="stage" 
         markerType="circle" markerSize="0" markerFill="#8E35EF" />
    <apex:scatterSeries axis="left" xField="closed" yField="gold" 
         markerType="circle" markerSize="4" markerFill="#FFD700"/>
    <apex:scatterSeries axis="left" xField="closed" yField="silver"
         markerType="circle" markerSize="4" markerFill="#c0c0c0" />
</apex:chart>  
</apex:page>

Apex:

public class ChartController2 {
public List<Data> getData() {
    return ChartController2.getChartData();
}
@RemoteAction
public static List<Data> getRemoteData() {
    return ChartController2.getChartData();
}
public static List<Data> getChartData() {
    List<Data> data = new List<Data>();
    list<opportunity> oppList = [select closedate, feedback__c, value__c 
        from opportunity where stagename = 'Closed Won' 
        order by closedate desc limit 10];

    for (opportunity opp :oppList) {
        decimal gint = -20;
        decimal sint = -20;
        if (opp.feedback__c == 'Gold') gint = opp.value__c;
        else if (opp.feedback__c == 'Silver') sint = opp.value__c;

        data.add(new Data(opp.closedate.format(), opp.value__c, gint, sint));
    } system.debug (oppList);
    return data;
}
public class Data {
    public String closed { get; set; }
    public decimal stage { get; set; }
    public decimal gold { get; set; }    
    public decimal silver { get; set; }        
    public Data(String closed, decimal stage, decimal gold, decimal silver) {
        this.stage = stage;
        this.closed = closed;
        this.gold = gold;
        this.silver = silver;
}   }   }

Where opp-ies:

Opportunity:{CloseDate=2016-02-18 00:00:00, feedback__c=silver, value__c=13},
Opportunity:{CloseDate=2015-03-25 00:00:00, feedback__c=silver, value__c=30}, 
Opportunity:{CloseDate=2014-12-10 00:00:00, feedback__c=bronze, value__c=12},