How To Make Pie Chart in Visualforce
Table of Content
A Visualforce chart is defined using a series of charting components, which are then linked to a data source to be graphed on the chart.
Create a chart with Visualforce by doing the following:
- Write an Apex method that queries for, calculates, and wraps your chart data to send to the browser.
- Define your chart using the Visualforce charting components.
When the page containing the chart loads, the chart data is bound to a chart component, and the JavaScript that draws the chart is generated. When the JavaScript executes, the chart is drawn in the browser.
A Visualforce chart requires that you create a chart container component, which encloses at least one data series component. You can optionally add additional series components, chart axes, as well as labeling components such as a legend, chart labels, and tooltips for data points.
<apex:page controller="PieChartController" title="Pie Chart">
<apex:chart height="250" width="350" data="{!pieData}">
<apex:pieSeries dataField="data" labelField="name"/>
<apex:legend position="right"/>
</apex:chart>
</apex:page>
The component defines the chart container, and binds the component to the data source, the getPieData() controller method. The describes the label and data fields to access in the returned data, to label and size each data point. Here’s the associated controller:
public class PieChartController {
public List getPieData() {
List data = new List();
data.add(new PieWedgeData('Cs-cart', 15));
data.add(new PieWedgeData('Salesforce', 25));
data.add(new PieWedgeData('Joomla', 20));
data.add(new PieWedgeData('X-cart', 10));
data.add(new PieWedgeData('Wordpress', 25));
data.add(new PieWedgeData('Bigcommerce', 30));
return data;
}
// Wrapper class
public class PieWedgeData {
public String name { get; set; }
public Integer data { get; set; }
public PieWedgeData(String name, Integer data) {
this.name = name;
this.data = data;
}
}
}
These are the important points illustrated by the example:
- The getPieData() method returns a List of simple objects, an inner class PieWedgeData used as a wrapper. Each element in the list is used to create a data point.
- The PieWedgeData class is just a set of properties, and is essentially used as a name=value store.
- The chart series component <apex:pieSeries> defines which properties from the PieWedgeData class to use to determine each point in the series. In this simple example there’s no mystery, but in charts with multiple series and axes this convention allows the efficient return of the entire data set in one List object.
Output
