4

I have a VF where I am plotting percentages in bar graphs, but in the tooltip, I want to show the revenue associated with the record. Please note that percentage and revenue are in the same wrapper class so mapping is not really an issue..

       <apex:chart height="220" width="600" data="{!revenue1}" background="#FFFFFF">
    <apex:legend position="top" font="10px Helvetica"/>
    <apex:axis type="Numeric" position="left" fields="Rev_Growth,Rev_Quota" title="Performance ( % )" />
    <apex:axis type="Category" position="bottom" fields="Series1">
        <apex:chartLabel rotate="0"/>
    </apex:axis>
    <apex:barSeries title="Growth,Quota" orientation="vertical" axis="left" xField="Series1" yField="Rev_Growth,Rev_Quota" Stacked="False" colorset="#5B9BD5,#92D050" Gutter="75" groupGutter="75">
        <apex:chartTips height="50" width="120" labelField="Series1" valueField="Revenue,Goal"/>
    </apex:barSeries>
   </apex:chart>

1 Answer 1

10

You can nest an apex:chartTips tag inside your data series tag. This lets you nominate different fields from your wrapper class as the source for the tooltip via its labelField and valueField attributes. So you can set the apex:chartTips valueField to reference your revenue while the series continues uses the percentage field.

Update

From the comment thread, it looks like where comma-separated field names are used, the basic form of apex:chartTips does not work: the valueField attribute only works with a single name. But it is possible to supply the name of a JavaScript function that renders the tooltip via the rendererFn attribute instead though documentation is hard to find. By adding such a function and inspecting its parameters in the browser's JavaScript debugger, I found that the below code code worked. (Note my test case is using different naming to your code.)

Test page and render function:

<apex:page controller="A">
<apex:chart height="300" width="300" data="{!revenue}">
    <apex:axis type="Numeric" position="left" fields="percentage1,percentage2"/>
    <apex:axis type="Category" position="bottom" fields="label"/>
    <apex:barSeries title="Growth,Quota" orientation="vertical" axis="left"
                xField="label" yField="percentage1,percentage2" Stacked="False"
                colorset="#5B9BD5,#92D050" Gutter="75" groupGutter="75">
        <apex:chartTips height="25" width="150" rendererFn="renderChartTip"/>
    </apex:barSeries>
</apex:chart>
<script>
function renderChartTip(klass, item) {
    var yField = item.yField;
    var amount = item.storeItem.get(yField === 'percentage1' ? 'amount1' : 'amount2');
    this.setTitle('Amount is ' + amount);
}
</script>
</apex:page>

Test controller:

public with sharing class A {
    public class Bean {
        public String label {get; set;}
        public Decimal percentage1 {get; set;}
        public Decimal amount1 {get; set;}
        public Decimal percentage2 {get; set;}
        public Decimal amount2 {get; set;}
        Bean(String label, Decimal percentage1, Decimal amount1,
                Decimal percentage2, Decimal amount2) {
            this.label = label;
            this.percentage1 = percentage1;
            this.amount1 = amount1;
            this.percentage2 = percentage2;
            this.amount2 = amount2;
        }
    }
    public Bean[] revenue {
        get {
            if (revenue == null) {
                revenue = new Bean[] {
                        new Bean('First', 50.00, 50000, 33.33, 33333.33),
                        new Bean('Second', 25.00, 25000, 22.22, 22222.22)
                        };
            }
            return revenue;
        }
        set;
    }
}

Sample output:

chart with tooltip

5
  • Hi Keith. Thanks for your reply. I did this. I have updated my question with the code that I am using, but the tooltip continues to show the percent value instead of revenue. Any thoughts?
    – Robin
    Apr 21, 2014 at 17:27
  • 1
    @Robin Looks like the problem is that the apex:chartTips valueField doesn't support the comma separated field names. If you just have "Revenue" or "Goal" you will see the value. But then the tooltip is only correct for one or the other. So you may have to resort to writing a custom JavaScript rendererFn (mentioned in salesforce.com/us/developer/docs/pages/Content/…); should only be a few lines but I haven't found any documentation on it describing the parameters and semantics.
    – Keith C
    Apr 21, 2014 at 18:05
  • Great! Thanks for the help. I will try to search on this line and let you know if I can fix this.
    – Robin
    Apr 21, 2014 at 18:56
  • @Robin I've updated the answer with some rendererFn-based code that works for me.
    – Keith C
    Apr 21, 2014 at 20:49
  • This was brilliant!! Thanks a lot Keith. This works exactly the way I wanted.. cheers!!
    – Robin
    Apr 22, 2014 at 21:56

You must log in to answer this question.

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