Pictorial representation of data provides much easier lookup of data than presenting in a table of data. With every new release, Salesforce in each release focuses on usability and adds lot of usability related features. In Winter’12 Salesforce introduced the new feature of visualforce charting as pilot and in Summer’13 release the chart feature became available for use. The importance of this feature has been extended by making Charts available to detail pages of Custom and Standard pages in Winter’14 release.
Visualforce charting gives an easy way to create customized business charts based on data sets using SOQL queries or by building the data set in own Apex code. Visualforce charting is designed to be flexible but also easy to use.
Visualforce charting plays a vital role when the standard Salesforce charts and dashboards are insufficient to get a client side view, or when composing custom pages that combine charts and data tables in ways that are more useful to the organization.
Visualforce charts render client-side scripting using JavaScript. This allows charts to be animated and on top of that chart data can load and reload asynchronously which can make the page feel more responsive.
Types of Charting:
1. <apex:chart> This tag is used to show data graphically. We can choose from a variety of chart types. It also includes size and data binding.
Ex:
<apex:chart data="{!contacts}" width="600" height="400" theme="Red" background="#0F0">
……
</apex:chart>
2. <apex:chartLabel> This option is for affecting the display of data series label or axis label. This component must be enclosed by a <apex:axis> or <apex:…..Series>
Ex: <apex:pieSeries dataField="data" donut="50" labelField="name"> <apex:chartLabel display="middle" orientation="vertical" font="bold 18px Helvetica"/></apex:pieSeries> Or <apex:axis> <apex:chartLabel/> </apex:axis>
3. <apex:chartTips> It defines tooltips which appear on mouse over of data series elements or tips attribute of a data series component to true. This component must be enclosed by a <apex:…..Series> (bar,line,area,scatter,radar)
Ex: <apex:….Series> <apex:chartTips height=”20” width=”120”/> </apex:…Series>
4. <apex:legend> This component offers additional configuration options, default legend attribute of <apex:chart>.
Ex:
<apex:chart height="400" width="700" data="{!data}">
<apex:legend position="right"/>
</apex:chart>
5. <apex:pieSeries> At a minimum, we must specify the fields in the data collection to use a label and value pair for each pie wedge.
Ex:
<apex:chart height="350" width="450" data="{!pieData}">
<apex:pieSeries dataField="data" donut="50" labelField="name">
<apex:chartLabel display="middle" orientation="vertical" font="bold 18px Helvetica"/></apex:pieSeries>
<apex:legend position="bottom" spacing="5"/>
</apex:chart>
6. <apex:gaugeSeries> Gauge charts shows a single measurement against a defined axis or scale. Although it charts a single series, we can vary the axis and chart colors to determine the range of the numbers specified over the chart.
Ex:
<apex:chart height="350" width="450" data="{!pieData}" theme="Salesforce">
<apex:legend position="top" spacing="5"/>
<apex:axis type="Gauge" position="top" minimum="-10" maximum="50" ></apex:axis>
<apex:gaugeSeries dataField="data" donut="55" labelField="name"></apex:gaugeSeries>
</apex:chart>
7. <apex:barSeries> Bar charts are one of several linear data series charts available in Visualforce. Linear series charts are plotted against a standard rectangular grid.
Ex:
<apex:chart data="{!data}" width="600" height="400" theme="Category4">
<apex:legend position="right" spacing="5"/>
<apex:axis type="Category" position="left" fields="Name" title="Name" ></apex:axis>
<apex:axis type="Numeric" position="bottom" fields="Member,Member1" title="Total Member" minimum="5" maximum="100"></apex:axis>
<apex:barSeries orientation="horizontal" axis="bottom" xField="Member,Member1" yField="Name" tips="true"></apex:barSeries>
</apex:chart>
8. <apex:lineSeries> For this tag, we must specify the fields in the data collection to use X and Y values for each point, as well as the X and Y axis to scale against.
Ex:
<apex:chart data="{!data}" width="600" height="400" theme="Red" background="#FFFFFF" >
<apex:legend position="right"></apex:legend>
<apex:axis type="Category" position="left" fields="Name" title="Month" ></apex:axis>
<apex:axis type="Numeric" position="bottom" fields="Member" title="Total Member" minimum="5" maximum="100"></apex:axis>
<apex:lineSeries axis="left" highlight="true" markerFill="#A9A9F5" markerType="cross" xField="Member" yField="Name"></apex:lineSeries>
</apex:chart>
9. <apex:areaSeries> It is similar to a line series chart with the fill attribute set to true. Each point along the line defines the amount of area each point represents, as well as the X and Y axis to scale against. Add multiple Y values to add levels to the chart. Each level takes a new color.
Ex:
<apex:chart data="{!data}" width="600" height="300" theme="Category2">
<apex:legend position="right"></apex:legend>
<apex:axis type="Category" position="bottom" fields="Name" title="Month"></apex:axis>
<apex:axis type="Numeric" position="left" fields="Member,Member1" title="Total Member" minimum="5" maximum="100"></apex:axis>
<apex:areaSeries axis="bottom" xField="Name" yField="Member,Member1"></apex:areaSeries>
</apex:chart>
10. <apex:radarSeries> This is the area inside a series of connected points in a radial Visualforce chart. Radar charts are also sometimes called “spider web” charts. Radar charts are like line charts, but they use a circular axis instead of a linear grid.
Ex:
<apex:chart data="{!pieData}" width="600" height="400" theme="Category6" >
<apex:axis type="Radial" position="radial" ></apex:axis>
<apex:radarSeries xField="name" yField="data" markerType="cross" strokeWidth="2" strokeColor="#f33" showInLegend="false" tips="true" opacity="0.6"></apex:radarSeries>
</apex:chart>
11. <apex:scatterSeries> This is a data series to be rendered as individual (not connected) points in a linear Visualforce chart. At a minimum we must specify the fields in the data collection to use as X and Y values for each point, as well as the X and Y axis to scale against.
Ex:
<apex:chart data="{!data}" width="600" height="400" theme="Green" >
<apex:legend position="right" spacing="25"/>
<apex:axis type="Category" position="left" fields="Name" title="Month" grid="true"></apex:axis>
<apex:axis type="Numeric" position="bottom" fields="Member" title="Total Member" minimum="5" maximum="100" grid="true"></apex:axis>
<apex:scatterSeries xField="Member" yField="Name" axis="bottom" ></apex:scatterSeries>
</apex:chart>
Charts in Salesforce Page Layouts:
The Winter’14 release introduced the new feature of adding report chart in standard and custom object detail page layout without using Report Tab.
We can add two report charts per page. Mini console layout and the original page layout editor are not supported for this view; it supports only enhanced page layout editor.
Ex: Account page layout with a chart
