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 <apex:chart> to depict the chart. We  draw X and Y axis using <apex:axis> tag.  We are using <apex:barSeries> to show vertical blue bars which are rendered dynamically based on the growth rate entered in text boxes.

Screenshot of Bar Chart:

barchart

 

<apex:page controller="ChartController">
 
 <apex:form>
 <apex:sectionHeader description="Enter Growth Rate For Each Year"/>
 
 <apex:pageBlock>
 
 <apex:pageBlockSection columns="4">
 <apex:inputText onchange="RefereshChart();" value="{!dataInput1}" label="2013"/>
 <apex:inputText onchange="RefereshChart();" value="{!dataInput2}" label="2014"/>
 <apex:inputText onchange="RefereshChart();" value="{!dataInput3}" label="2015"/>
 <apex:inputText onchange="RefereshChart();" value="{!dataInput4}" label="2016"/>
 </apex:pageBlockSection>
 
 </apex:pageBlock>
 
 <apex:actionFunction name="RefereshChart" reRender="chartPanel1"/>
 //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
 </apex:form>
 
 <br/>
 <apex:outputPanel id="chartPanel1">
 <apex:chart data="{!data}" height="400" width="500" >

 // Y axis
 <apex:axis type="Numeric" position="left" title="Growth Rate" grid="true" fields="growthRate" dashSize="2">
   <apex:chartLabel />
 </apex:axis>
 
 // X axis
 <apex:axis type="Category" position="bottom" fields="year" title="Year"> 
 <apex:chartLabel rotate="315"/> 
 </apex:axis> 

 <apex:barSeries orientation="vertical" axis="left" stacked="true" xField="year" yField="growthRate" /> 

 </apex:chart> 

</apex:outputPanel> 
</apex:page>


Controller:

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 <apex:barSeries > on the visualforce page.

global class ChartController {
 
 static List<DataWrapper> myData = new List<DataWrapper>();
 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<DataWrapper> 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 ?
Author:

Ajomon Joseph AJOMON JOSEPH
Senior Salesforce Architect
In Connect me on LinkedIn
twitter Follow me on Twitter @apexcoder
blogger Subscribe to my blog https://apexcoder.com
email Email me ajomon@apexcoder.com

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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