Displaying Salesforce Data with Google Chart Tools

Sometimes the standard text only detail pages in Salesforce get a bit dull and you need to spice things up with a chart. One trick I use is to add custom VisualForce pages to my page layouts to display inline charts. I’ll be using the Google Chart Tools library to make this happen. This is an all Javascript approach and none of your data goes to another server to render the chart – it also avoids the use of Flash so you can view these charts on an iPad or other iOS device.

To get started, I created some custom fields on the account to show revenue from previous years. I’ll call these fields Revenue 2008, 2009, 2010, etc. They will be the revenue for the account for each year. What I want is a column chart showing the revenue for each year so I can visualize whether sales for this account are trending up or down. To do this, I need to create a new VisualForce page. The page uses the Account standard controller and just accesses the fields it needs to display on the chart, puts the data in a Google data table and then draws the chart.

<apex:page standardController="Account">

<head>

<script type='text/javascript' src='https://www.google.com/jsapi' />

<script type="text/javascript">

    //use this function to format the hover text
    formatCurrencyLabel = function ( value )
    {
        return "$" + String(value);
    }

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        // we need a table to act as the datasource for the chart
        var data = new google.visualization.DataTable();

        // the table needs two columns
        data.addColumn('string', 'Period');
        data.addColumn('number', 'Annual Revenue');

        // add the rows of data which consist of a value and a formatted label
        data.addRow(['2008', {v:{!Account.Revenue_2008__c}, f: formatCurrencyLabel({!Account.Revenue_2008__c})}]);
        data.addRow(['2009', {v:{!Account.Revenue_2009__c}, f: formatCurrencyLabel({!Account.Revenue_2009__c})}]);
        data.addRow(['2010', {v:{!Account.Revenue_2010__c}, f: formatCurrencyLabel({!Account.Revenue_2010__c})}]);
        data.addRow(['2011', {v:{!Account.Revenue_2011__c}, f: formatCurrencyLabel({!Account.Revenue_2011__c})}]);

        //assign the chart to the appropriate div and draw the chart
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 300, height: 200, title:'Annual Revenue Trend', legend:'none',
                            vAxis: {minValue:0}, hAxis: {slantedTextAngle:45}});
    };

</script>

</head>

<body>
<div id="chart_div" />
</body>
</apex:page>

With the page created, I can now edit the Account page layout and add the new page to it. Remember to set the width of it to 100% and the height to be the same as what you set in the javascript (in this case 200px). You should get something that looks kind of like this. Note the hover text.

Google Chart Example

I’ve created an unmanaged package with the custom fields and the VisualForce page. You can install it here: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t80000000xviP. Once you install it, add the page to a page layout, populate the custom fields and you should be good to go.

My next post will show how to use this technique with the AJAX toolkit to query data and display it in a chart – really useful for summarizing related objects or creating your own dashboards.

Advertisements

18 thoughts on “Displaying Salesforce Data with Google Chart Tools

    • Thanks Cory! I’ll have to take a look at your code. I have definitely run into limitations with the built in Salesforce dashboards and have seriously considered trying to roll my own. I hope to get a new post up soon about how I use the AJAX toolkit to query data from within the JavaScript and then build reports. It might also be fun to do something with JavaScript Remoting too.

  1. Pingback: Displaying Salesforce Data with Google Charts and AJAX Toolkit « Vertical Code

  2. Just wanted to say Daniel, this is superb. I know I struggled with your other solution (the AJAX Toolkit one), but this one comes in just fine! Love it. Thanks so much for sharing this!

  3. Daniel, I’m trying to populate the chart with data from a related object Sales_History__c (lookup relationship). Replaced your {!Account.Revenue_2008__c} with my {!Sales_History__r.SC01__c} field but getting error Error: Unknown property ‘AccountStandardController.Sales_History__r’ when I try to save the VF page. What am I missing?

    • You can’t access related objects using this technique. You’ll need to use SOQL to grab the data. Have you looked at my other post on using SOQL to display data?

  4. I did redo it using the SOQL approach and left a script sample over there. I cannot get anything to show on the page. Please check over there. Thanks.

  5. This is a great example, thank you for sharing and putting it in on the AppExchange. I know it’s possible to display a Google Chart using a custom formula field and the IMAGE function. Could you provide a brief explanation for why/when it would be better to use one method vs the other? Does it relate to your sentence, “This is an all Javascript approach and none of your data goes to another server to render the chart.”?

    • Thanks! I prefer this approach over the Google image charts for a couple of reasons. First, your data doesn’t get sent to another server for rendering. Second, it is much more flexible and allows things like mouse over, on-click and other events to allow you to interact with the chart and data.

  6. Hi..

    The result looks great but is it restricted to just standard object? I want to use is on a custom object.

    Pls guide me.

    Thanks!

    • Sure, this can be used for any object. In fact, you could probably generalize the code to have only one class that does it for you. Contacts is just the most common one, since it is a master/ detail relationship with Accounts.

      • My comment above probably seems odd. I replied via my phone and thought the comment was on a different post. That said, this technique can be used for custom objects easily. You’d change the standard controller to reference the custom object and then update what fields are used as well.

  7. HI Thanks for ur response, appreciate it.

    it is possible to send me the code as i m new to visualforce.

    Thanks!

    • I’m not really sure what code you want. You can use the code in the post with some slight modifications. If you want more, we can discuss me doing some contract work for you. I’ll send an email to you.

  8. Thanks for sharing this! I’ve been able to create a pie chart for my custom objects using your example and Google’s Visualization Playground. The one problem I’ve run into is that it displays fine in Chrome, but not in Firefox. I installed Firebug based on your previous comments and the error I’m seeing is this “ReferenceError: google is not defined” and it appears to be directed at the following line:

    google.load(“visualization”, “1”, {packages:[“corechart”]});

    I’m a novice at using Firebug, but wondering if this gives you any idea as to what is going on that causes the problem in Firefox but not Chrome.

  9. Pingback: Visualforce Charting – Another Way to Visualize Data « Vertical Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s