Easy Visualforce charts with Javascript Remoting & Google Charts API.

We all know native visualforce charting is coming soon to the platform. Still, we have to cater customer requirements and can’t wait for this PILOT feature to become GA. So here is a quick and simplistic example to render charts at blazing fast speeds using Javascript remoting and Google Charts API.

Code for both Apex and Visualforce is kept minimal and simplistic to be self explanatory.

Apex Global Controller

Apex controller is a global class with @RemoteAction. It loads most recent 10 opps in the remote method.

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 page

Added decent comments in code itself to make it easier to relate and explain.

 
    
    
    
    

    
    

    
    
        // 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
          // [.].([params...,] (result, event) {...}
          // namespace : abhinav
          // controller : GoogleChartsController
          // method : loadOpps
          abhinav.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});
          } 
    

Output

Here is how it comes out in visualforce page. Try this demo by directly copy pasting the above code snippets above, you will for sure enjoy the fast rendering speed of page and charts.

Using Native Visualforce charting with Javascript remoting

I really liked the way native Visualforce charting is designed, its having variety of ways to accept data source both server and client side i.e. here are the few ways (clicking on hyperlinks below will take you to relevant Visualforce developer guide sections)

• With pure Apex data source in form of custom apex classes like PieWedgeData
• With Sobjects and an expression that represents a controller method reference
• With a string representing a JavaScript function, that can optionally use Javascript Remoting also.
• With a string representing a JavaScript array

Though its important to understand the native visualforce charting limitations also, please check this link for details.