Use Visualforce charting to assemble a variety of chart components into a complex chart that represents multiple sets of related data. The end result can be quite sophisticated and attention getting.
The examples later in this topic use the following controller, which is a modest expansion of the controller in A Simple Charting Example. It includes more data, and methods that can be called by remote JavaScript invocation:
public class ChartController { // Return a list of data points for a chart public List<Data> getData() { return ChartController.getChartData(); } // Make the chart data available via JavaScript remoting @RemoteAction public static List<Data> getRemoteData() { return ChartController.getChartData(); } // The actual chart data; needs to be static to be // called by a @RemoteAction method public static List<Data> getChartData() { List<Data> data = new List<Data>(); data.add(new Data('Jan', 30, 90, 55)); data.add(new Data('Feb', 44, 15, 65)); data.add(new Data('Mar', 25, 32, 75)); data.add(new Data('Apr', 74, 28, 85)); data.add(new Data('May', 65, 51, 95)); data.add(new Data('Jun', 33, 45, 99)); data.add(new Data('Jul', 92, 82, 30)); data.add(new Data('Aug', 87, 73, 45)); data.add(new Data('Sep', 34, 65, 55)); data.add(new Data('Oct', 78, 66, 56)); data.add(new Data('Nov', 80, 67, 53)); data.add(new Data('Dec', 17, 70, 70)); return data; } // Wrapper class public class Data { public String name { get; set; } public Integer data1 { get; set; } public Integer data2 { get; set; } public Integer data3 { get; set; } public Data(String name, Integer data1, Integer data2, Integer data3) { this.name = name; this.data1 = data1; this.data2 = data2; this.data3 = data3; } } }
<apex:page controller="ChartController"> <apex:chart height="400" width="700" data="{!data}"> <apex:axis type="Numeric" position="left" fields="data1" title="Opportunities Closed" grid="true"/> <apex:axis type="Category" position="bottom" fields="name" title="Month of the Year"> </apex:axis> <apex:lineSeries axis="left" fill="true" xField="name" yField="data1" markerType="cross" markerSize="4" markerFill="#FF0000"/> </apex:chart> </apex:page>
<apex:page controller="ChartController"> <apex:chart height="400" width="700" data="{!data}"> <apex:axis type="Numeric" position="left" fields="data1,data2" title="Opportunities Closed" grid="true"/> <apex:axis type="Category" position="bottom" fields="name" title="Month of the Year"> </apex:axis> <apex:lineSeries axis="left" fill="true" xField="name" yField="data1" markerType="cross" markerSize="4" markerFill="#FF0000"/> <apex:lineSeries axis="left" xField="name" yField="data2" markerType="circle" markerSize="4" markerFill="#8E35EF"/> </apex:chart> </apex:page>
The important thing to note is how both data1 and data2 fields are bound to the vertical <apex:axis> by the fields attribute of that component. This allows the charting engine to determine appropriate scale and tick marks for the axis.
<apex:page controller="ChartController"> <apex:chart height="400" width="700" data="{!data}"> <apex:axis type="Numeric" position="left" fields="data1,data2" title="Opportunities Closed" grid="true"/> <apex:axis type="Numeric" position="right" fields="data3" title="Revenue (millions)"/> <apex:axis type="Category" position="bottom" fields="name" title="Month of the Year"/> <apex:lineSeries axis="left" fill="true" xField="name" yField="data1" markerType="cross" markerSize="4" markerFill="#FF0000"/> <apex:lineSeries axis="left" xField="name" yField="data2" markerType="circle" markerSize="4" markerFill="#8E35EF"/> <apex:barSeries orientation="vertical" axis="right" xField="name" yField="data3"/> </apex:chart> </apex:page>
<apex:page controller="ChartController"> <apex:chart height="400" width="700" data="{!data}"> <apex:legend position="right"/> <apex:axis type="Numeric" position="left" fields="data1" title="Opportunities Closed" grid="true"/> <apex:axis type="Numeric" position="right" fields="data3" title="Revenue (millions)"/> <apex:axis type="Category" position="bottom" fields="name" title="Month of the Year"> <apex:chartLabel rotate="315"/> </apex:axis> <apex:barSeries title="Monthly Sales" orientation="vertical" axis="right" xField="name" yField="data3"> <apex:chartTips height="20" width="120"/> </apex:barSeries> <apex:lineSeries title="Closed-Won" axis="left" xField="name" yField="data1" fill="true" markerType="cross" markerSize="4" markerFill="#FF0000"/> <apex:lineSeries title="Closed-Lost" axis="left" xField="name" yField="data2" markerType="circle" markerSize="4" markerFill="#8E35EF"/> </apex:chart> </apex:page>