[SalesForce] Visualforce chart value

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

Best Answer

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.

Related Topic