Charting is the graphical representation of data.
Visualforce charting is a collection of components that provide a simple and intuitive way to create charts on Visualforce pages and custom components.
Visualforce charting gives:
- An easy way to create customized business charts, based on data sets you can create directly from SOQL queries or by building the data set in your own Apex code.
- By combining and configuring individual data series, you can compose charts that display your data in ways meaningful to your organization.
- This allows charts to be animated and visually exciting and chart data can load and reload asynchronously which can make the page feel more responsive.
- The standard Salesforce charts and dashboards are insufficient.
- Creating custom pages that combine charts and data tables in ways that are more specific to our requirement.
- Visualforce charting is designed to be flexible and also easy to use.
- It offers variations on bar, line, area, pie charts ,radar, gauge, and scatter charts
- Integrating Visualforce and Google Charts
Salesforce has already provided us with Reports and Dashboard that gives us the functionality to create charts, then why should we use Visualforce charting?
Some basic differences are listed below:
Creating a Simple Chart using Visualforce :
Here is a pie chart representing the percentage of estimated World population by continent.
<apex:pieSeries> is a data series to be rendered as wedges in a Visualforce pie chart. At a minimum we must specify the fields in the data collection to use as label and value pairs for each pie wedge.
Note: This component must be enclosed within an <apex:chart> component and also we can only have one <apex:pieSeries> in a chart.
The visualforce page alone is not sufficient to display the chart according to our requirement. It needs to be paired with a controller that can supply the pie chart data. Here we pair it with PieChartController class. Normally we perform a SOQL query to calculate the pie wedge data from our application, but to keep this simple let’s give some rough data:
This is how the simple pie chart looks like after implementing the above code.
Figure: Pie Chart representing the percentage of estimated World population by continent
Creating a Pie Chart on a Custom Object:
We can also create charts on custom objects of our app according to our business requirements.
The sample below gives an idea about creating a pie chart in Visualforce on a custom object i.e., Position (Position__c) which is a part of the Recruitment app. The ultimate aim of this sample illustration is to represent the Count of Positions in each Functional Area on a pie chart.
We know that the visualforce page itself is not sufficient to display the chart according to our requirement. So, let us pair it with a PositionCountController class that can supply the data. Here we are performing a SOQL query to retrieve the pie wedge data from the application.
This is because we have used a PickListController class and have not created it yet.
Here, I have used a PickListController class as the Functional Area field is of the data type picklist. By using this class we can retrieve all the values in the picklist as a list. This class can be re-used in any apex class to retrieve values from a picklist by just calling it in your code.
Create an apex class using the code below:
You are expected to get an output which will look somewhat similar to the one below:
Figure: Pie Chart representing the count of positions in each functional area
When you hover the mouse across each pie wedge, you can see the wedge moving outwards and simultaneously displaying the data that represents the position count, which is contained within it.
Thereby, we have created an interactive and responsive chart representing the Count of Positions in each Functional Area in the Recruitment app.
Creating a Combinational Chart on a Custom Object:
In Salesforce we could not combine different charts to meet business requirements. Visualforce charting facilitates the use of combinational charts.
The sample below gives an idea about creating a combinational chart combining a bar chart and line chart in Visualforce once again on the Position (Position__c) custom object which is the part of Recruitment app.
1. Bar chart represents the Count of Positions in each Functional Area and
2. Line chart represents the Count of Open Positions in each Functional Area
The ultimate aim of this sample illustration is to compare the Count of Positions and Count of Open Positions in each Functional Area on a single combinational chart.
<apex:axis> defines an axis for a chart. This is used to set the units, scale, labeling, and other visual options for the axis. We can define up to four axes for a single chart, one for each edge.
<apex:lineSeries> is a data series to be rendered as connected points in a linear Visualforce chart. At a minimum we must specify the fields in the data collection to use as X and Y values for each point, as well as the X and Y axes to scale against.
<apex:barSeries> is a data series to be rendered as bars in a Visualforce chart. At a minimum we must specify the fields in the data collection to use as X and Y values for each bar, as well as the X and Y axes to scale against.
Note: This components must be enclosed within an <apex:chart> component. We can have multiple <apex:barSeries> and <apex:lineSeries> components in a single chart.
We pair the visualforce page with CombinationalChartController class to retrieve the data required for the combinational chart. Here we are performing two SOQL queries to retrieve data for:
1. Bar chart – showing the Position count
2. Line chart – showing the count of Position which are New & Open-Approved
Figure: Combinational chart
The expected output will look somewhat similar to the figure above. It represents the bar chart and line chart of two different qureies on the same chart.
Figure: Highlighted Bar Chart representing the count of positions in each functional area represented on a Combinational chart
As you hover the mouse across each bar of the chart you can see the bar highlighted and simultaneously displaying the Count of Positions corresponding to each Functional Area.
Figure: Highlighted Line Chart representing the count of Open positions in each functional area represented on a Combinational chart
As you hover the mouse across each cross-point of the line chart you can see the line getting highlighted and simultaneously displaying the Count of Open Positions in each Functional Area.
Limitations and Considerations of Visualforce Charting:
- Can be rendered only on browsers which support scalable vector graphics (SVG).
- Cannot be used in email messages or email templates yet.
- Dynamic (Apex-generated) charting components are not yet supported.