How to Display a Bar Chart using Visualforce and Apex of Daily API Request in Salesforce Org?


Visualforce is a web development framework that enables developers to build sophisticated, custom user interfaces for mobile and desktop apps that can be hosted on the Lightning Platform. You can use Visualforce to build apps that align with the styling of Lightning Experience, as well as your own completely custom interface. Visualforce enables developers to extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps. Use powerful built-in standard controller features, or write your own custom business logic in Apex. You can build functionality for your own organization, or create apps for sale in the AppExchange.

Visualforce App Development is familiar to anyone who has built web apps. Developers create Visualforce Pages by composing components, HTML, and optional styling elements. Visualforce can integrate with any standard web technology or JavaScript Framework to allow for a more animated and rich user interface. Each page is accessible by a unique URL. When someone accesses a page the server performs any data processing required by the page, renders the page into HTML, and returns the results to the browser for display.

Visualforce Pages are basic building blocks for application developers. A Visualforce page is similar to a standard Web page but includes powerful features to access, display, and update your organization’s data. Pages can be referenced and invoked via a unique URL, just as they would be on a traditional web server. Visualforce uses a tag-based markup language that’s similar to HTML. Each Visualforce tag corresponds to a coarse or fine-grained user interface component, such as a section of a page, a list view, or an individual field. Visualforce boasts nearly 150 built-in components and provides a way for developers to create their own components. Visualforce markup can be freely mixed with HTML markup, CSS styles, and JavaScript libraries, giving you considerable flexibility in how you implement your app’s user interface.

Salesforce provides a range of ways that you can use Visualforce within your organization. You can extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps.

Before going to the Developer console for Visualforce Page. Create a custom object “MultiselectPicklist” and a field and relationship type picklist “Interests” and insert a value that you want to show.

Don’t forget to check out: Salesforce Predictions 2020: What does the Future Hold for Salesforce?

Step 1:- Create a Visualforce Page

Firstly we have to create a Visualforce Page and for that Go to setup->Developer console, At Developer console Click on New to create a Visualforce page and use the code mentioned below:

DailyApiRequest.vfp (VisualForce)

<apex:page controller="ChartController" title="Bar Chart">
    <apex:chart data="{!MyData}" height="400" width="500">
        <apex:legend position="top"/>
        <apex:axis type="Numeric" position="left" fields="ApiRequestLimit"
                   title="Limit" />
        <apex:axis type="Category" position="bottom" fields="Attribute"
        <apex:barSeries orientation="vertical" axis="left"
 xField="Attribute" yField="ApiRequestLimit" />

Step 2:- Create an Apex class that fetch the record from the Visualforce Page

Apex is a strongly typed, object-oriented programming language that you use to execute code in your Salesforce instance. The Apex syntax is similar to Java and also includes built-in support for database operations.

ChartController.aspx (Apex Class)

public class ChartController {
    public List<ChartData> getMyData() {
        List<ChartData> Sampledata = new List<ChartData>();
        Map<String,System.OrgLimit> limitsMap = OrgLimits.getMap();
        System.OrgLimit apiRequestsLimit = limitsMap.get('DailyApiRequests');
        System.debug('Limit Name: ' + apiRequestsLimit.getName());
        integer val=apiRequestsLimit.getValue();
        integer val2=apiRequestsLimit.getLimit();
        Sampledata.add(new ChartData('Max/Remaining',val2));
         Sampledata.add(new ChartData('Remaining',val2-val));
        Sampledata.add(new ChartData('Used',val));
        return Sampledata;
    public class ChartData {
        public String Attribute {get;set;}
        public integer ApiRequestLimit {get;set;}        
        public ChartData(string att, integer amt) {
            this.Attribute = att ;
            this.ApiRequestLimit = amt ;

Step 3: Test the Application

Blog Resource: Salesforce Trailhead

Popular Salesforce Blogs