2

I am looking to show the value in donut and not when I hover.At present when I hover I could see it.

Chart Image

How can I do..?

thanks in advance

1
  • Could you share your code for this chart? Feb 6 '14 at 12:15
3

The easy way to get the values to display in the actual chart would be to set the value you want into the labelField values that are passed into the chart data.

Let's say I use a wrapper class for my data set. It might normally look like this:

public class ChartWrapper {

  public String label {get;set;}
  public Integer value {get;set;}

  public ChartWrapper(String lab, Integer val){
    this.label = lab;
    this.value = val;
  }
}

Instead of just that, concatenate the value into the label.

public class ChartWrapper {

  public String label {get;set;}
  public Integer value {get;set;}

  public ChartWrapper(String lab, Integer val){
    this.label = lab + ' [' + val + ']'; //<--this is the critical bit that appends your value into the label for the chart
    this.value = val;
  }
}

In your controller, you'll query and populate the list of wrapper classes and create a method or property to bind to in the page (here, your mileage may vary greatly...often VF charting is using aggregate SOQL, or even external data...but I'm keeping this simple for the example):

List<ChartWrapper> chartData = new List<ChartWrapper>();

public List<ChartWrapper> getChartData() {
  for (Some_Obj__c o : [...some query...]) {
    ChartWrapper aRow = new ChartWrapper(Name, Some_Number_Field__c);
    chartData.add(aRow);
  }
  return chartData;
}

Then in your chart, you'll bind to it and pass it in as normal:

<apex:chart height="450" width="450" data="{!chartData}" >
<apex:pieSeries dataField="value" labelField="label" /> 
</apex:chart>

There is a downside to this that the labels in the legend will also have the values on them...which just makes for a less pretty presentation. But I suppose worst case you could remove the legend.

There is another more difficult option that would require you to use the rendererFn attribute in the apex:pieSeries and execute some client-side JS. This might give you more fine grained control, and depending on your skills with JS might be more comfortable, but looking at the rendered HTML, there aren't any easy element Ids to pick out in the chart to guide you in manipulating the HTML of the labels but not the pie segments themselves, and then you'd have to pass the formed labels to the page for access by Javascript so you could perform the manipulation. That seems clunky and inelegant to me.

2
  • Perfect Answer. I was trying whether we have any attribute for this. But your way solved my answer.and you said that we can also use 'rerenderFn'. Any addition info that you can provide.Thanks once again
    – Arun SFDC
    Feb 6 '14 at 14:58
  • I don't have any examples of renderFn usage at all, I'm afraid. I already had several VF charting examples I could draw on for my answer. But if you come up with anything clever, either post back here, or blog it!
    – pchittum
    Feb 6 '14 at 22:16
0

Without seeing your code, I can only guess that you need to adjust the tips parameter for the <apex:pieSeries> component.

From the documentation

tips
Boolean
A Boolean value that specifies whether to display a tooltip for each pie wedge when the mouse pointer passes over it. The format of the tip is <labelField>: <dataField>. If not specified, this value defaults to true.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_pieSeries.htm

If you set tips to false, the data will no longer show when you hover over the chart.

2
  • Thanks, I used tips="false" but i need to getvalues without hovering.
    – Arun SFDC
    Feb 6 '14 at 14:43
  • Ahh sorry. Just reread the question. I misunderstood. I thought you were just trying to get rid of the hover. Feb 6 '14 at 14:49

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.