Graphs

Ref-Salesforce docs

The Chart Controller

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;
        }
    }
}

Note

The @RemoteAction method isn’t used in the chart examples in this topic, but it illustrates how you could re-use your data generation method for both server-side and JavaScript remoting methods.

Creating a Simple Line Chart

Here is a simple line chart that graphs one of the three data series in the data set, “Opportunities Closed-Won”, over a calendar year:

<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>

Things to note about this example:

• Line and bar charts require you to define the X and Y axes for the chart.
• The vertical axis is defined on the left side of the chart, and measures the dollar amount of the Opportunities closed in that month.
• The horizontal axis is defined on the bottom of the chart, and represents the months of the calendar year.
• The actual line chart, the <apex:lineSeries> component, is bound to a specific axis.
• There are a number of marker attributes which you can use to differentiate each line in the chart.

Adding a Second Data Series

Adding a second data series with the same unit of measure is simple. Here, the “Opportunities Closed-Lost” data set is added as a second line series:

<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.

Adding a Bar Chart Series with a Second Axis

To add another data series, but charted against a different set of units, you need to add a second vertical axis. The following example shows a data series, “Revenue by Month”, added as a bar chart:

<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>

Notice the following:

• To add a data series with a new unit of measure, you need to add a second vertical axis on the right side of the chart.
• You can have up to four different axes, one for each edge of the chart.
• The bar chart is set to a vertical orientation and bound to the right axis. Bind a horizontal bar chart to the top or bottom axis.

Adding a Legend, Labels, and Chart Tips

You can improve the comprehensibility of the chart by adding a chart legend, series labels, and by making sure that chart labels are readable:

<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>

Note the following about the additions:

• The order of the data series components determines the layering of the chart elements when drawn. In the prior example, the bar chart was in the foreground. In this example, the bar chart has been placed in the background because the <apex:barSeries> component is before the two <apex:lineSeries> components.
• The <apex:legend> component can be in any of four positions: left, right, top, or bottom. The legend is placed within the boundary of the chart; in this example the legend has compressed the horizontal width of the chart itself.
• Add legend titles using the data series component title attribute.
• To rotate the labels for the bottom chart axis, the <apex:chartLabel> component is enclosed in the <apex:axis> component it affects.
• The <apex:chartTips> component enables rollover tool tips that provide additional information about each data point in the series that encloses it.