Creating charts in Visualforce – tutorial
Visualforce charting is a collection of components that provide a simple and intuitive way to create charts in your Visualforce pages and custom components. It is a very useful tool in when it comes to creating customized business charts.
Introduction
You can create your own chart by following these 3 steps:
- Prepare data in controller or JavaScript
- Sending data from controller or JavaScript via returning it from method or properties.
- Define chart by using Visualforce charting components
Preaparing data
Let’s start by focusing on the first point – preparing data. First of all, we must learn that data to charts can be provided in 3 different ways:
- As an expression that represents a controller method reference – by returning List of objects from method or properites in controller you can send data to visualforce page
- As a string representing a JavaScript function – Data is created in controller but is sended to visualforce page by JavaScript that is connecting with controller
- As a string representing a JavaScript array – data for chart is created directly in JavaScript function and its returned to page.
And now i’ll present you with examples for these 3 points:
First example
Controller :
@RemoteAction
public static List<Data> getData() {
List<PieWedgeData> data = new List<PieWedgeData>();
data.add(new Data('Jan', 12));
data.add(new Data('Jan', 14));
data.add(new Data('Jan', 15));
data.add(new Data('Jan', 20));
data.add(new Data('Jan', 21));
data.add(new Data('Jan', 23);
return data;
}
Page :
<apex:page>
<script>
function getRemoteData(callback) {
PieChartController.getData(function(result, event) {
if(event.status && result && result.constructor === Array) {
callback(result);
}
});
}
</script>
<apex:chart data="getRemoteData" ...></apex:chart>
</apex:page>Data in this example is a custom class that we’ve created in different file.
Second example:
Controller :
@RemoteAction
public static List<Data> getData() {
List<PieWedgeData> data = new List<PieWedgeData>();
data.add(new Data('Jan', 12));
data.add(new Data('Jan', 14));
data.add(new Data('Jan', 15));
data.add(new Data('Jan', 20));
data.add(new Data('Jan', 21));
data.add(new Data('Jan', 23);
return data;
}
Page :
<apex:page>
<script>
function getRemoteData(callback) {
PieChartController.getData(function(result, event) {
if(event.status && result && result.constructor === Array) {
callback(result);
}
});
}
</script>
<apex:chart data="getRemoteData" ...></apex:chart>
</apex:page>RemoteAction is annotation to method which is working with JavaScript.
Third example:
Page :
<apex:page>
<script>
var dataArray = new Array();
dataArray.push({'data1':33,'data2':66,'data3':80,'name':'Jan'});
dataArray.push({'data1':33,'data2':66,'data3':80,'name':'Feb'});
// ...
</script>
<apex:chart data="dataArray" ...></apex:chart>
</apex:page>
<apex:chart>Limitations
And now let’s focus on limitations of Visualforce charting. First of all, charts can only be displayed in browsers supporting SVG. Secondly, charts tags are using Javascript code to draw chart, therefore we won’t be able to display them as PDF. Furthermore, these charts cannot be used in Email messages and templates. Dynamic charting components also aren’t supported.
Summary
Even though there are some obstacles and limitations along the way, Visualforce charts are very useful and neat tool especially when standard Salesforce charts are insufficient. They are also very useful when you wish to compose custom pages that combine charts and data tables in ways that are more useful to your personal work. I hope this quick tutorial will be helpful and resolve all the problems that you’ve had concerning this topic.
