Wednesday, January 18, 2012

Experimenting with Visualforce Charting(Pilot) for the first time


I recently got Visualforce Charting enabled for my dev org. So, started worked on it. Its a nice feature for visualforce pages for displaying charts and navigating to data by clicking on those chart values.    

Visualforce charts are rendered client-side using JavaScript. This allows charts to be animated and visually exciting, and chart data can load and reload asynchronously, which can make the page feel more responsive. Visualforce charting is designed to be flexible, but also easy to use. It offers variations on bar, line, and pie charts. If you would like to use different chart types, or want to add advanced user or page interactions.

So, how can the data be passed to the <apex:chart> component??
You can pass the chart data via either of the 3 methods listed below:
    1. As an expression that represents a controller method reference
    2. As a string representing a JavaScript function, retrieving the values using JavaScript Remoting.
    3. As a string representing a JavaScript array, but remember, it has to be an array of arrays.

Below is the simple method that returns a list of opportunities to the VF page and displays a chart with vertical bars/lines showing opportunity amounts against their names.  

Controller:
    public List<Opportunity> getChartData() {      

        List<Opportunity> Opp = [select name, amount, stageName from opportunity where amount!=null AND stageName!=null limit 10];         

        return Opp;

    }


Visualforce Page:
<apex:page controller="CharVF1Controller" sidebar="false" >

<apex:chart height="400" width="700" data="{!ChartData}" rendered="true" id="chart1" name="mychart">

    <apex:axis type="Category" position="bottom" fields="Name"
        title="Opportunities" grid="true"/>
    <apex:axis type="Numeric" position="right" fields="Amount"
        title="Opportunity Amounts"/>
    <apex:axis type="Category" position="left" fields="StageName"
        title="Opportunity Stage"/>

    <apex:barSeries title="Monthly Sales" orientation="vertical" axis="right"
        xField="Name" yField="Amount" id="bar1">
        <apex:chartTips height="20" width="120"/>
    </apex:barSeries>

    <apex:lineSeries title="Closed-Won"
         axis="left" xField="Name" yField="Amount"
         markerType="circle" markerSize="4" markerFill="#00FF00"/>

</apex:chart>
</apex:page>

Here is an example of a Pie Chart rendered with VF charting feature:
<apex:chart height="350" width="450" data="{!ChartData}">
   <apex:pieSeries dataField="Amount" labelField="Amount"/>
   <apex:legend position="right"/>
</apex:chart>

Below are some known limitations for this pilot feature:
  1. Visualforce charts will only render in browsers which support scalable vector graphics (SVG). For more information, see WC3 SVG Working Group.
  2. Visualforce charting uses JavaScript to draw the charts. These charts won't display in pages rendered as PDFs.
  3. Email clients do not generally support JavaScript execution in messages. Don't use Visualforce charting in email messages or email templates.
  4. Visualforce charting sends errors and messages to the JavaScript console. You'll want to keep a JavaScript debugging tool, such as Firebug, active during development.

Link to demo page: http://testdomain5-developer-edition.na3.force.com/MySite/myp1__ChartingVF1