Markerfill error in VF Line Series

Question

<apex:lineSeries axis="left" xField="Month" yField="Score" markerType="circle" markerSize="4" markerFill="MarkerColour" />

I am using a formula field to store colour code in a formula field and passing as a parameter in constructor . And trying to use it in the VF Line Series.

It's not coming out correctly however . Any help?

VF :

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

 <apex:lineSeries axis="left" xField="InteractionClosedYearMonth" yField="Turnover" markerType="circle" markerSize="4" markerFill="MarkerColour" />

         </apex:chart>
 </apex:outputPanel>

Controller Method :

public class ABCD 
{
    public String MarkerColour {get; private set;}

    public ABCD(String MarkerColour)
    {
        this.MarkerColour = MarkerColour;
                        }

}

public List<ABCD> getABCD()
{
    List<CustomObject__c> List1= [select MarkerColour__c  from CustomObject__c where Account__c ='id' ];

    List<ABCD> List2 = new List<ABCD>();
            Map<Id,Decimal> Map1 = new Map<Id,Decimal>();

    if(List1.size()> 0)
    {
        for(CustomObject__c cc: List1)
        {
            //Some code            }

        for(CustomObject__c : List1)
        {
            for(Id Id1: Map1.keySet())
            {
                if(Id1 == cc.Id1){
                    List2.add(new ABCD(String.ValueOf(cc.MarkerColour__c)));
                                       }
            }
        }
    }
            return List2; 


}

Answer 1

To display multiple colours markers within apex:chart, JavaScript could be utilized.

If we inspect marker element, we could find that its id starts with vfext4-ext-sprite-1078 and nodeName is circle. Using this knowledge, we can parse page for markers and replace colour.

Let's assume that we have custom field colour__c on Opportunity:

Controller:

public class ChartController {
public static list<Data> data {get; private set;}
public static String jColour {get; private set;}
public ChartController() {
    data = new List<Data>();
    List<string> colours = new List<string>();
    for (opportunity opp :[ select closedate, amount, colour__c
                            from opportunity order by closedate desc limit 10]) {
        data.add(new Data(opp.closedate.format(), opp.amount));
        colours.add(opp.colour__c);
    } 
    jColour = json.serialize (colours);
}
public class Data {
    public String name { get; set; }
    public decimal data1 { get; set; }
    public Data(String name, decimal data1) {
        this.name = name;
        this.data1 = data1;
}   }   }

VisualForce:

<apex:page controller="ChartController">
<script type='text/javascript'>
window.setTimeout(function() {
    var Colours = {!jColour}; //Bind controller property
    nodes = document.querySelectorAll('[id^="vfext4-ext-sprite-"]');
    var markers = [];
    for(i in nodes) {   //collect markers
        if (nodes[i].nodeName == "circle") {
            markers.push(nodes[i]);
    }   }
    for(i in markers) {
        if (Colours[i]) {   //leave default if colour not specified
            markers[i].outerHTML = markers[i].outerHTML.replace
                ('fill="red"','fill="'+Colours[i]+'"');
    }   }
},1500);  //apex:lineSeries requires some time to place markers
</script>
<apex:chart height="400" width="700" data="{!data}">
    <apex:axis type="Numeric" position="left" fields="data1" title="Amount" grid="true"/>
    <apex:axis type="Category" position="bottom" fields="name" title="Date">
      <apex:chartLabel rotate="315"/> </apex:axis>
    <apex:lineSeries axis="left" xField="name" yField="data1"
                     markerType="circle" markerSize="5" markerFill="red" id="mychart"/>
</apex:chart>
</apex:page>

Demo:

I've added setTimeout, page needs some time to render markers correctly, if you want to use it in production, I would recommend to use external JS library.

Answer 2

If you want to merge in the value of a custom field, it should look like:

<apex:page standardController="MyObject__c">
    ...
    <apex:lineSeries ... markerFill="{!MyObject__c.MarkerColour__c}" />
    ...
</apex:page>

You can also merge it in from a property on a controller extension or custom controller.

public String markerColour { get; private set; }

<apex:lineSeries markerFill="{!markerColour}" />