The <apex: chart> component is another important component used to define the chart's general characteristics (size, data binding, etc.).
The <apex: chart> component has the following attributes:
1. animate
The animate is a Boolean-type attribute used for specifying whether to animate the chart when it is first rendered. The Boolean-value true is set as a default value.
Syntax:
<apex: chart animate="false"></apex: chart>
2. background
The background is a string-type attribute used to specify the chart's background color. The value of this attribute is specified as an HTML-style color. By default, the chart's background color is set as white.
Syntax:
<apex: chart background="#00FF00"></apex: chart>
3. colorSet
The colorSet is a string-type attribute used for specifying a set of the color values used by each child's series. The value for this attribute is specified as a comma-separated HTML-style colors string.
Syntax:
<apex: chart colorSet= "#00F,#0F0,#F00"></apex: chart>
4. data
The data is an Object-type attribute used for specifying the data binding for the chart. The controller method, JavaScript method, or JavaScript object is specified as a value. In all cases, the result must be an array of records, and every record must contain all fields referenced in child data series components.
Syntax:
<apex: chart data="{!getRecords}"></apex: chart>
5. floating
The floating is a Boolean-type attribute used for specifying whether to float the chart outside the regular HTML document flow using CSS absolute positioning.
Syntax:
AD
<apex: chart floating="false"></apex: chart>
6. height
The height is a string-type attribute used to specify the chart rectangle's height.
Syntax:
<apex: chart height="400"></apex: chart>
7. hidden
The hidden is a Boolean-type attribute used for specifying whether to show or hide the chart initially. When it is set to true, the chart renders but hides it when the page is first displayed.
AD
Syntax:
<apex: chart hidden="false"></apex: chart>
8. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex: chart id="chartId"></apex: chart>
9. legend
The legend is a Boolean-type attribute used for specifying whether to display the default chart legend. The Boolean value true is set as a default value.
Syntax:
<apex: chart legend="false"></apex: chart>
10. name
The name is a string-type attribute used for specifying the name of the generated JavaScript object used to provide additional configuration or perform dynamic operations.
Syntax:
<apex: chart name="chartName"></apex: chart>
11. rendered
The rendered is a Boolean-type attribute used to specify whether the component is rendered on the page. The Boolean value true is set as a default value to this attribute.
Syntax:
<apex: chart rendered="false"></apex: chart>
12. renderTo
The renderTo is a string-type attribute used to specify the Id of the DOM element to render the chart.
Syntax:
<apex: chart renderTo="DOMElementId"></apex: chart>
13. resizable
The resizable is a Boolean-type attribute used for specifying whether the chart is resizable after rendering
Syntax:
<apex: chart resizable="false"></apex: chart>
14. theme
The theme is a string-type attribute used to specify the chart theme's name. These are the possible values for this attribute:
Salesforce
Green
Purple
Sky
Blue
Red
Yellow
Category1
Category2
Category3
Category4
Category5
Category6
Syntax:
<apex: chart theme="Purple"></apex: chart>
15. width
The width is a string-type attribute used for specifying the width of the chart rectangle in pixels.
Syntax:
<apex: chart width="300"></apex: chart>
Let's take an example to understand how we can use this component on the Visualforce page.
ApexChartExample.vfp
<!-- apex page to represent the use of apex: chart component -->
<apex:page controller="ApexChartController" title="Pie Chart">
<!-- page block to create pie chart using <apex: chart> component-->
<apex: pageblock title="Org Information">
<apex:chart height="250" width="350" data="{!orgInformation}">
<apex:pieSeries tips="true" dataField="apiRequestLimit" labelField="attribute"/>
<apex:legend position="bottom"/>
</apex: chart>
</apex:pageblock>
</apex: page>
ApexChartController.apxc
//create class ApexChartController to construct data for the chart
public class ApexChartController {
//create
public List<ChartInfo> getOrgInformation() {
// create a list of ChartInfo
List<ChartInfo> records = new List<ChartInfo>();
// create a map that stores org information
Map<String,System.OrgLimit> limitsMap = OrgLimits.getMap();
if(limitsMap.containsKey('DailyApiRequests')){
System.OrgLimit apiRequestsLimit = limitsMap.get('DailyApiRequests');
Integer value1 = apiRequestsLimit.getValue();
Integer value2 = apiRequestsLimit.getLimit();
records.add(new ChartInfo('Max/Remaining', value2));
records.add(new ChartInfo('Remaining', value2-value1));
records.add(new ChartInfo('Used', value1));
return records;
}
return null;
}
// create wrapper class for chart
public class ChartInfo {
public String attribute {get;set;}
public Integer apiRequestLimit {get;set;}
// constructor
public ChartInfo(String attribute, Integer requestLimit) {
this.attribute = attribute ;
this.apiRequestLimit = requestLimit ;
}
}
}
