Recipes by Category

App Distribution (2) Bundle logic, interface and services for distribution. App Logic (37) The Apex programming language, workflow and formulas for logic. Collaboration (6) The Salesforce Chatter collaboration platform. Database (29) Data persistence, reporting and analytics. Integration (33) Web Service APIs and toolkits for integration. Security (9) Platform, application and data security. Tools (4) Force.com tooling User Interface (36) Visualforce MVC and metadata-drive user interfaces. Web Sites (12) Public web sites and apps with optional user registration and login.
Beta Feedback
Cookbook Home » Easy Visualforce Charts with JavaScript Remoting & Google Charts API.

Easy Visualforce Charts with JavaScript Remoting & Google Charts API.

Post by Abhinav Gupta  (2012-01-23)

Status: Unverified
Level: intermediate

Problem

This recipe explains how your app's Visualforce pages can draw charts using Javascript Remoting and Google Charts API. Force.com veterans must be thinking, native Visualforce charting is coming soon to the platform, so why use Google Charts API? A couple of motivations are:

  • Visualforce charting is PILOT as of now, and customer requirements can't wait for it to be GA
  • When you can't build the desired chart using Visualforce, you can use the vast Google Charts API.
  • To bypass any of these Visualforce Charting Limitations

Solution

The following code snippets leverage a global Apex controller class and dependent Visualforce page, so as to keep the code snippets of this solution minimalistic and focused on the core problem.

Apex Code

global with sharing class GoogleChartsController {
     
    /**
      Loads most recent 10 Opportunities
    */
    @RemoteAction   
    global static Opportunity[] loadOpps() {
        return [select Id, Name, ExpectedRevenue, Amount from Opportunity order by CreatedDate DESC limit 10];
    }   
 
}

Visualforce Code

<apex:page controller="GoogleChartsController" sidebar="false"> 
    <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
     
    <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue"/>
 
    <!-- Google Charts will be drawn in this DIV -->
    <div id="chartBlock" />
     
    <script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
       
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initCharts);
   
        function initCharts() {         
          // Following the usual Remoting syntax
          // [<namespace>.]<controller>.<method>([params...,] <callbackFunction>(result, event) {...}
          // controller : GoogleChartsController
          // method : loadOpps
          GoogleChartsController.loadOpps( 
                 function(result, event){  
                     // load Column chart
                     var visualization = new google.visualization.ColumnChart(document.getElementById('chartBlock'));
                     // Prepare table model for chart with columns
                     var data = new google.visualization.DataTable();
                     data.addColumn('string', 'Opportunity');
                     data.addColumn('number', 'Expected Revenue');
                     data.addColumn('number', 'Amount');    
                     // add rows from the remoting results
                     for(var i =0; i<result.length;i++){
                        var r = result[i];
                        data.addRow([r.Name, r.ExpectedRevenue, r.Amount]); 
                      }
                    // all done, lets draw the chart with some options to make it look nice.
                    visualization.draw(data, {legend : {position: 'top', textStyle: {color: 'blue', fontSize: 10}}, width:window.innerWidth,vAxis:{textStyle:{fontSize: 10}},hAxis:{textStyle:{fontSize: 10},showTextEvery:1,slantedText:false}});
              }, {escape:true});
          } 
    </script>
</apex:page>
 

Output - How the page with chart looks ?

Here is a screen shot of the page

References

Here are few pointers for more background:

Share

Recipe Activity - Please Log in to write a comment

It works

voted as verified by a093000000XaK2s  (2013-09-13)

It is verified

voted as verified by Iti Agrawal  (2013-08-05)

This recipe is legit -- code works exactly as posted.

voted as verified by Marco Casalaina  (2012-10-04)

Is there any API usage limit? Also I assume there is no charge for using it in production org.

by Harpreet Singh  (2012-09-13)

Very quick and simple to test.

voted as verified by jeremy.walsh06012010  (2012-02-15)

X

Vote to Verify a Recipe

Verifying a recipe is a way to give feedback to others and broaden your own understanding of the capabilities on Force.com. When you verify a recipe, please make sure the code runs, and the functionality solves the articulated problem as expected.

Please make sure:
  • All the necessary pieces are mentioned
  • You have tested the recipe in practice
  • Have sent any suggestions for improvements to the author

Please Log in to verify a recipe

You have voted to verify this recipe.