Adding charts to page layouts

In its Winter '14 release - Salesforce has made it possible to embed charts into a page layout. These charts can display useful overview data to give you visual information about a record you are viewing.

Charts can be added to page layout in any object... but let's show an example of creating a chart to embed in the contact record:

First: Create a report that summarizes data in a useful way and create a chart in that report:

Here we've created a report called "Connections per year analytics: My goal is to get a count of how many connections per year each volunteer has made, and also track the # of confirmed hours of service in each year. We create the report to show ALL contacts. (We will filter the report results within the page layout itself!)

Report Type -= HOC Contacts with/without connections. (Because I want to embed this report on the contact page layout.)

Filters: All contacts... for All Time.

Additional Filter: Added a cross filter to only show contacts that are WITH Connections. (This way I don't get any results for contacts that have no connections). They won't have anything that would show up in the chart anyway :-)

We used the following fields in my report, and grouped as follows:

We used the following fields in my report, and grouped as follows:


Full name
Connection ID
Number of Connections: (and I summarized on this field to give me the sum of the connections)
Hours Served: (and I summarize on this field to give me the sum of the hours)

Group on the following field:

Start Date & Time (and I grouped this field by Calendar Year)

Note: If you need help creating reports, please see the documentation on customizing and managing reports.

Add a chart to the report:

We've chosen to make this chart a bit complex. but you can make the chart as simple or complex as you like - based on what you want to display.

The Y-axis displays the sum of the number of connections. The X- Axis has the Start Date & Time of the connections (grouped by year). I've also chosen to make it a combination chart so that I can display the Sum of Connections: Hours Served. in the same chart.

Formatting for this chart:

Save your finished report, and place in a folder that is accessible to the profiles you will want to be able to see this report and its chart.

(Note: If you add this to a page layout for partners or volunteer leaders, make sure they have access to the report folder, and the objects and fields used in your report)

Now we edit the page layout for Contacts to add the chart to the page layout:

Click on "Report Charts" in the page layout selector - and select the chart you wish to add to the page layout. Then drag the report onto the layout wherever you want it to appear. (You can create a new section for it, or place it right below the HandsOn Connect Shortcuts 'contact overview' component).)

Click on the wrench on the upper right to set the chart properties

Set the properties for the chart

Set the properties for the chart

You can set the size and appearance of the chart.

To get the data for just one record, choose to filter the report by the ID of the object (in this case, the contact ID). This way, we'll only see the connections for the contact record we're viewing.

It's not recommended that you check 'refresh each time a user opens the page' as this will greatly slow down the loading of the page. It will automatically refresh every 24 hours - and there will be an option to refresh it after the page loads if you want the latest data.

Save the page layout with this new component.

The chart as it appears in the contact record page layout

The chart as it appears in the contact record page layout

The chart shows us both the number of connections Valerie has made each year, as well as the number of hours served.

If you set 'hovers' as active - then hovers will show up in the page layout just as they do in the report itself or in a dashboard. Clicking on the chart in the record will take you directly to the report, filtered on that contact.



Add your comment

E-Mail me when someone replies to this comment