Building charts Using Visualforce

Building charts Using Visualforce

There are so many types of charts available we can invoke these charts with your custom data and these charts can be completely created in Visualforce page. To name a few we have Apex Pie series , Apex bar series, Apex Line Series , Apex Area series, Apex Scatter Series. 

These components are lightweight and easily adaptable in a visualforce page. Also you can use these components in standard page as an Inline visualforce page.

How to Build one ??

Build a list and use the list data in the visualforce page enclosed within the  <apex:chart>

visualforce tag. Something like this

<apex:page controller="PieChartController" title="Pie Chart">
   <apex:chart height="350" width="450" data="{!pieData}">
       <apex:pieSeries dataField="data" labelField="name"/>
       <apex:legend position="right"/>
   </apex:chart>
</apex:page>

The above code will render a pie chart something like this

The above diagram gets the plot values from the list variable “{!pieData}” which is associated with the controller.

The value Piedata is extracted from the list of a wrapper class as a String for Months and Integer of Pie Wedge Values respectively.

Similarly we have several other chart components like apex line series which renders line graph, Apex bar series which renders Bar graph, Apex scatter series are like line series except the lines connecting the plots are invisible.

All the data to the chart series can be bought using a wrapper list. These components are really powerful,without using any Javascript remoting we can make use of these tailor made charts and graphs for you custom data in few lines of code and it makes the life of a developer so ease to live.

Authored by

Nirmal Christopher

SFDC certified Techical consultant

Global Tech & Resorces