Visualforce Charting – Another Way to Visualize Data

Over a year ago, I posted about how to display charts using Google charts. It is about time I revisited this topic using the new feature made generally available in the Winter ’13 release. The cool thing about using Visualforce charting is that it is all native to the platform and hopefully you won’t have to deal with JavaScript troubleshooting.

Let’s set up the scenario again: we want to display a chart on the account page layout to visualize some of the data in a chart. Let’s say we have some custom fields showing annual revenue. There is a field for 2008, 2009, 2010, etc.

What we need to do first is use a little Javascript to build a data array that will be used by the chart. In our case, the array will have three elements: the data value, the label and the name. After we create the data array, we can us it in a Visualforce chart. There are lots of options and parameters for charts, check out the documentation for details there.

Here’s the Visualforce page:


<apex:page standardController="Account">
<script>
//use this function to format the hover text
formatCurrencyLabel = function ( value )
{
return "$" + String(value);
}

// Build the chart data array in JavaScript
var dataArray = new Array();
dataArray.push({'data':{!Account.Revenue_2008__c},'label':formatCurrencyLabel({!Account.Revenue_2008__c}),'name':'2008'});
dataArray.push({'data':{!Account.Revenue_2009__c},'label':formatCurrencyLabel({!Account.Revenue_2009__c}),'name':'2009'});
dataArray.push({'data':{!Account.Revenue_2010__c},'label':formatCurrencyLabel({!Account.Revenue_2010__c}),'name':'2010'});
dataArray.push({'data':{!Account.Revenue_2011__c},'label':formatCurrencyLabel({!Account.Revenue_2011__c}),'name':'2011'});
</script>

<apex:chart data="dataArray" height="200" width="300">
<apex:axis type="Numeric" position="left" fields="data" title="Revenue" grid="true" minimum="0"/>
<apex:axis type="Category" position="bottom" fields="name" title="Year"/>
<apex:barSeries title="Annual Sales" orientation="vertical" axis="left" xField="name" yField="data">
<apex:chartTips height="20" width="100" valueField="label"/>
</apex:barSeries>
</apex:chart>
</apex:page>

We can then add this to our page layout and it should look like so:

Advertisements

One thought on “Visualforce Charting – Another Way to Visualize Data

  1. Thanks, Daniel. I re-created my google chart using Visualforce charting. My visualforce chart needs to be prettied-up, but it shows in Firefox with no issue (which wasn’t the case for my google chart).

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s