Axis:
Defines an axis for a chart.Use this to sets the units,scale,labeling,and other visual actions for the axis.You can define upto 4 axes for a single chart,one for each edge.
public class crChartController {
// Return a list of data points for a chart
public List<Data> getData() {
return crChartController.getChartData();
}
// Make the chart data available via JavaScript remoting
@RemoteAction
public static List<Data> getRemoteData() {
return crChartController.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="crChartController">
<apex:chart height="400" width="700" data="{!data}">
<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:lineSeries title="Closed-Won" axis="left" xField="name" yField="data1"/>
</apex:chart>
</apex:page>
No comments:
Post a Comment