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

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.

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

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.