How to implement dynamic bar charts using Visualforce Charting ?

Visualforce charting help developers to implement customized business charts based on the data sets created directly from SOQL queries, or by building the data set in Apex code.

We can use any chart provided by Salesforce like bar, line, area, and pie charts commonly used in business graphics, as well as radar, gauge, and scatter charts for more specialized charting.

In this blog, we will discuss about the bar chart which depicts the “Growth Rate” of a company for past 4 Years.

Scenario: We need to implement a dynamic bar chart which should be rendered dynamically based on the input, which is Growth Rate for each Year entered by user on Visualforce page.

Following example shows the bar chart by creating the data set in controller.

Visualforce page:

In our Visualforce code, we use to depict the chart. We  draw X and Y axis using tag.  We are using to show vertical blue bars which are rendered dynamically based on the growth rate entered in text boxes.

Screenshot of Bar Chart:


 //all the components inside the 'chartPanel1' panel will get refreshed, 
 //and get;set; methods will be executed. constructor gets executed only 
 // on the initial page load

 // Y axis
 // X axis





In below apex code, we are returning the list of chart data by using wrapper class. It helps to pass the value of xField and yField to the on the visualforce page.

global class ChartController {
 static List myData = new List();
 public static integer dataInput1 {get;set;}
 public static integer dataInput2 {get;set;}
 public static integer dataInput3 {get;set;}
 public static integer dataInput4 {get;set;}

 public ChartController(){
 dataInput1 =0;
 dataInput2 =0;
 dataInput3 =0;
 dataInput4 =0;

 // Return a list of data points for a chart
 public List getData() {
  myData.add(new DataWrapper('2012', dataInput1));
  myData.add(new DataWrapper('2013', dataInput2));
  myData.add(new DataWrapper('2014', dataInput3));
  myData.add(new DataWrapper('2015', dataInput4));
  return myData;

 // Wrapper class
 public class DataWrapper {
   public String year{ get; set; }
   public Integer growthRate{ get; set; }
   public DataWrapper(String year, Integer growthRate) {
     this.year= year;
     this.growthRate = growthrate;

For more information about Visualforce Charting:-

Overview of VF Charting

How to implement pie Chart ?

How VF Charting Works ?

Senior Salesforce Architect
In Connect me on LinkedIn
twitter Follow me on Twitter @apexcoder
blogger Subscribe to my blog
email Email me


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s