How to use Google Charts in Visualforce pages

How to use Google Charts in Visualforce pages

Usually you might come across requirements to show charts in visualforce page.image Salesforce’s built in analytics solutions is good. You can even embed those charts in your regular visualforce pages without much difficulty. But the only limitations is that some types of charts are not available in visualforce page. Another one common use case is community pages. Salesforce charts can be used in community, only if users have partner community or community user plus licenses, which are bit more costly. In such cases, you will have to go for third party charting solutions like Google Charts, Fusion charts etc. Here is an example of how to embed a Google chart in visualforce page.

Steps to Use

1. Understand the data requirements of the chart you need You can find the list of all Google charts at charts gallery. Once you have found the right chart for your requirement, you need to check the data requirements of the chart. Each chart requires data in some specific format.

2. Format data in visualforce page controller in the required format Once you have found the right format for data, next step is to format data in that format before sending to chart.

3. Visualforce page and controller implementation of doughnut chart

Check out below code where a doughnut chart is displayed with attendance of student. In the controller different attendance values are aggregated and passed that to page level using properties.

<apex:page showheader="false" sidebar="false" controller="myAttendanceController">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<apex:include pageName="header"/>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Status', 'Count'],
        ['Attended',  {!attendedCount}],
        ['Partially Attended', {!partialCount}],
        ['Absent',  {!absentCount}],
      ]);

      var options = {
        title: 'My Attendance',
        pieHole: 0.4,
      };

      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
    }
  </script>
  <div class="container">
      <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </div>
</apex:page>

public class myAttendanceController {
    public Id contactId;
    public Integer attendedCount{get;set;}
    public Integer partialCount{get;set;}
    public Integer absentCount{get;set;}        
    public myAttendanceController(){
        attendedCount = 0;
        partialCount = 0;
        absentCount = 0;
        User loggedInUser = [Select Id,contactId FROM User WHERE ID=:userinfo.getUserId()];
        contactId = loggedInUser.contactId;
        List<AggregateResult> aggList =[Select Attendence_Status__c,Count(Id) FROM Attendance__c WHERE Enrollment__r.Student__c=:contactId GROUP BY Attendence_Status__c];
        for(AggregateResult aggResult:aggList){
            if(aggResult.get('Attendence_Status__c')=='Partially Attended'){
                partialCount= (Integer)aggResult.get('expr0');
            }else if(aggResult.get('Attendence_Status__c')=='Attended'){
                attendedCount = (Integer)aggResult.get('expr0');
            }else if(aggResult.get('Attendence_Status__c')=='Absent'){
                absentCount= (Integer)aggResult.get('expr0');
            }
        }
    }
}

Use Cases

• Whenever charts need to be shown in visualforce pages.
• Wherever standard Salesforce charts are not fitting your requirements.
• If you have regular community licenses and want to show charts to users, Google charts is a good alternative.

[Top]