Press ESC to close

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
    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}); }



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)

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

Comments (4)

Leave a Reply

%d bloggers like this: