0

I have a Visualforce Dashboard chart (I am using barSeries) which I would define the color of bars depending of the value. As it is hardcoded I am trying to get the data value and verify if it's i.e <100 the color must be changed to green.

pseudo code

<apex:chart data="{!myMethod}" animate="true" width="1000" height="400" rendered="true" 
                                colorSet="#156F9E,#FF9123,#6BAE4A,#848484" id="out3" name="test" legend="true">
                        <apex:axis type="Numeric" position="left" fields="resultFormula" title="Title2"/>
                        <apex:axis type="Category" position="bottom" fields="category" title="Title1"/>

                        <apex:barSeries title="Test" orientation="vertical" axis="bottom" 
                                        xField="category" yField="resultFormula" colorsProgressWithinSeries="true">
                            <apex:chartLabel rotate="300" field="resultFormula" display="outside"/>
                        </apex:barSeries>
                    </apex:chart>

1 Answer 1

1

You can do that using "colorSet" attribute on tag. In above code the colorSet is attribute is hard coded, you can pull the values associated with it from your controller.

I just created sample VF Page and controller to test it, hope this will help you.

    <apex:page controller="exampleCon">

    <apex:chart data="{!myMethod}" animate="true" width="1000" height="400" rendered="true" 
                                colorSet="{!colors}" id="out3" name="test" legend="true">
                        <apex:axis type="Numeric" position="left" fields="resultFormula" title="Title2"/>
                        <apex:axis type="Category" position="bottom" fields="category" title="Title1"/>

                        <apex:barSeries title="Test" orientation="vertical" axis="bottom" 
                                        xField="category" yField="resultFormula" colorsProgressWithinSeries="true">
                            <apex:chartLabel rotate="300" field="resultFormula" display="outside"/>
                        </apex:barSeries>
                    </apex:chart>
</apex:page>

Controller associated with it.

public class exampleCon {

    public List<data> lstData{get;set;}
    public List<data> getMyMethod() {
        lstData.add(new data('A', 50));
        lstData.add(new data('B', 150));
        lstData.add(new data('C', 90));
        lstData.add(new data('D', 110));
        return lstData;
    }

    public string getColors(){
        string colorCodes = '';
        for(Data recData : lstData){
            colorCodes += recData.colorCode + ',';
        }

        return colorCodes;
    }

    public exampleCon(){
        lstData = new List<data>();
    }

    public class data{
       public data(string inCategory, Integer inFormula){
           this.category = inCategory;
           this.resultFormula = inFormula;
           this.colorCode = '#ffcc00'; //Some default color
           if(this.resultFormula > 100){
               this.colorCode = '#00cc00'; //Green color
           }
       }

       public string category{get;set;}
       public Integer resultFormula{get;set;}
       public string colorCode{get;set;}
   }
}

As mentioned above this is just a POC and you can build upon it to meet your specific needs.

2
  • Hi Mandy, it worked out! Although in my code the first column is appearing as black. Either way thank you!
    – Carlos
    Apr 29, 2018 at 14:59
  • Just fixed my code and now is working properly!
    – Carlos
    Apr 30, 2018 at 12:52

You must log in to answer this question.

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