Creating Charts in Visualforce PDFs using Apex
This post describes how to use Apex components to display chart images in SalesForce. These chart images can be embedded in SalesForce or exported to other formats such as PDF.
Visualforce supports some charting, but these charts depend on client-side rendering using Javascript. If you're building PDFs or other reports in Visualforce, you'll have to use a static method for rendering chart images.
This means that you'll have to define the chart and its data in a controller and then render it as an Apex image on a page.
Code example
To get started, we'll define the controller on our Visualforce page:
<apex:page controller="ChartController" renderAs="pdf">
<apex:image url="{!dynamicUrl}"/>
</apex:page>
Then, we'll create a custom controller in Apex:
public class ChartController {
public String dynamicUrl {get;set;}
public ChartController() {
// Insert your chart config here. You can replace the data with dynamic values.
String config = "{"
+ " type: 'bar',"
+ " data: {"
+ " labels: ['Q1', 'Q2', 'Q3', 'Q4'],"
+ " datasets: [{"
+ " label: 'Users',"
+ " data: [50, 60, 70, 180]"
+ " }]"
+ " }"
+ "}";
// Construct the URL
String encodedConfig = EncodingUtil.urlEncode(config);
dynamicUrl = "https://quickchart.io/chart?c=" + encodedConfig;
}
}
The dynamic URL in the example above will display the following chart:
Dynamic data
Chances are you'll want to use a variable to fill the chart data. The config variable is just a string, so you can concatenate values from a variable as you would any other string.
For example, below we run a query and create a list of integers representing the data we wish to graph. Then, we use String.join() to convert the list into a comma-separated string:
public class ChartController {
public String dynamicUrl {get;set;}
public ChartController() {
// Query the Account data
List<Account> accounts = [SELECT Name, Spend__c FROM Account LIMIT 4];
// Create lists to store the account names and spend data
List<String> accountNames = new List<String>();
List<String> accountSpends = new List<String>();
for (Account acc : accounts) {
accountNames.add(acc.Name);
accountSpends.add(String.valueOf(acc.Spend__c));
}
// Set up chart config and replace the data with dynamic values.
String config = "{"
+ " type: 'bar',"
+ " data: {"
+ " labels: [" + String.join(accountNames, "','") + "],"
+ " datasets: [{"
+ " label: 'Spend',"
+ " data: [" + String.join(accountSpends, ',') + "]"
+ " }]"
+ " },"
+ " options: {"
+ " scales: {"
+ " yAxes: [{"
+ " ticks: {"
+ " beginAtZero: true"
+ " }"
+ " }]"
+ " }"
+ " }"
+ "}";
// Construct the URL
String encodedConfig = EncodingUtil.urlEncode(config);
dynamicUrl = "https://quickchart.io/chart?c=" + encodedConfig;
}
}
This example creates a chart with Account Names on the X-axis and Account Spend on the Y-axis.
Customization
Note that you can further customize your chart by setting other API parameters.
The chart itself is very customizable - you can render any Chart.js configuration. Have a look at our chart gallery to get ideas, or get started with the developer documentation.
Embedding elsewhere
The QuickChart API returns PNG images by default. The <apex:image> tag will allow you to embed the image in your VisualForce page. You can then render the Visualforce page as a PDF file (see example).
