Bar Charts in Salesforce | Visualforce Developer Guide

The bar chart is a linear data series chart accessible in Visualforce. The linear series chart is a chart plotted against a standard rectangular system.

Bar charts permit a simple comparison of groups of information. In Salesforce,  it is used to see the performance on a monthly basis.

A bar chart shows regard as horizontal lengths, so this configuration can be useful for differentiating division or time. We can use the bar chart when we have a summary report with a solitary gathering or you just need to show one gathering. For example, If you want to see the amount in every sales stage in a report. First, select the total amount as the x-axis and stage as the y-axis. The diagram gives one bar for each stage, with the length corresponding to the total opportunity amount.

Don't forget to check out: Salesforce Customer Portals Vs. Communities: What to Choose?

Let’s discuss the types of Bar charts: These are the type of bar charts

1. Horizontal Bar Chart: It is used to analyze the values across at least one category. By using the auto fit features, we can fit a chart into a packed dashboard without the need for long material bars or loss of data.
2. Stacked Bar Chart: This chart is used to think about pieces of an entire and show regards across at any rate one groupings. For example, Create a Stacked bar chart that examines the total opportunity amount by opportunity owner and separates all total opportunity amounts by opportunity type within every bar.
3. Grouped Bar Chart: This type of chart is used when we have different groupings and we need to think about characteristics inside an auxiliary gathering, yet not the totals. 

Let’s take an example, to better understand the bar chart:

• Create a VisualForce page and it is named BarChart.page.

<apex:page controller="BarChartController">
    <p style="font-size:18px; font-weight: bold;">
        Opportunity Value - Last 12 Months - executed on&nbsp;
        <apex:outputText value="{0,date,dd/MM/yyyy}">
            <apex:param value="{!TODAY()}"/>
        </apex:outputText>
    </p>
    <div style="margin-left: auto; margin-right: auto">
      <apex:chart height="300" width="550" data="{!chartData}">
       <apex:axis type="Category" position="bottom" fields="name"
            title="Month" />
       <apex:axis type="Numeric" position="left" fields="oppTotal"
            title="Value" grid="true"/>
       <apex:barSeries orientation="vertical" axis="bottom" xField="name" yField="oppTotal" />
     </apex:chart>
   </div>
</apex:page>

• Now, create an apex controller for the VF page. Apex Controller named BarChartController.

public with sharing class BarChartController{
    // List of month names
    private static List<String> months=new List<String>{'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'};      	  
        // Getter to retrieve the list to draw the chart. 
        public List<Data> getChartData() {
            Map<Integer, Data> dataByMonth = new Map<Integer, Data>();
            List<Data> chartData=new List<Data>();
            DateTime startDT=DateTime.newInstance(Date.today().addYears(-1).toStartOfMonth(), Time.newInstance(0, 0, 0, 0));
            DateTime endDT=DateTime.newInstance(Date.today(), Time.newInstance(23, 59, 59, 999));
            
            Integer startMonth=startDT.date().month()-1;
            for (Integer i=0; i<12; i++){
                Integer monthNo=Math.mod(startMonth+i, 12);
                Data theData=new Data(months.get(monthNo));
                dataByMonth.put(monthNo, theData);
                chartData.add(theData);
            }            
            for (Opportunity opp : [select id, CloseDate, Amount 
                                    from Opportunity 
                                    where IsClosed = true
                                    and IsWon = true
                                    and CloseDate>=:startDT.date()
                                    and CloseDate<=:endDT.date()])
            {
                Data cand=dataByMonth.get(opp.CloseDate.month()-1);
                cand.oppTotal+= (opp.Amount != null? opp.Amount : 0);
                system.debug('@@@ oppTotal ' + opp.Amount);
            }    					
            for (Integer i=0; i<12; i++){
                Data cand=dataByMonth.get(i);
                if (0.0==cand.oppTotal){
                    cand.oppTotal=Math.random()*750000;
                }
            }
            return chartData;
        }
    // Wrapper class
    public class Data{
        public String name { get; set; }
        public Decimal oppTotal { get; set; }
        
        public Data(String name){
            this.name = name;
            this.oppTotal = 0.0;
        } 
    }
}

Check out another amazing blog by Shweta here: Custom Lookup Field in Visualforce Page | Salesforce Developer Guide

Output: