stratoflow

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:

  1. Prepare data in controller or JavaScript
  2. Sending data from controller or JavaScript via returning it from method or properties.
  3. Define chart by using Visualforce charting components

Building a new application or extending your development team?

🚀 We're here to assist you in accelerating and scaling your business. Send us your inquiry, and we'll schedule a free estimation call.

Estimate your project

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.

Building a new application or extending your development team?

🚀 We're here to assist you in accelerating and scaling your business. Send us your inquiry, and we'll schedule a free estimation call.

Estimate your project

Testimonials

They have a very good company culture of their own, which gives them a real edge compared to other providers.

CEO

Leading UK system integrator

They're very skilled technically and are also able to see the bigger picture.

Managing Partner

Scalable SaaS for healthcare IoT built on Salesforce platform

They've been consistently able to deliver work on time and within budget.

CTO

High performance SaaS for financial insitutions

We are seriously impressed by the quality and broader picture of anything they do for us.

CEO

Gold trading platform

testowy tekst

Martyna

Senior