Two methods for embedding a Report or Dashboard Chart in Visualforce or Standard Pagelayout

February 3, 2013

Over the weekend Aldo Fernandez (@aldoforce) asked the question “is there a way to get from apex code a PNG/JPG snapshot of a Salesforce Dashboard”.  Aldo was looking to use the dashboard chart in a dynamic visualforce page.

This week I have been playing with a very similar requirement of displaying a report or dashboard chart on a standard page layout.  My solution involves aligning an iframe within a DIV to display only the chart component of the report.  Aldo identified the UX issues of using an iframe “the ‘right click’ issue and any click will launch a request from within the iframe. Bad UX”.  At this point Daniel Hoechst (@dhoechst) shared that it is possible to “Grab the url of the dashboard component image to use. When you refresh dashboard, image gets updated.”.

This has lead me to identify the two known methods for showing a report or dashboard chart on a visualforce page.  Both of these methods are non-supported by Salesforce so are vulnerable to changes of the UI.

1. iFrame the report result page

Method one is to use a Visualforce component to help embed a standard report chart using an iFrame.  The iFrame is loaded within a DIV window.  The iFrame element is then positioned within the DIV window so only the chart can be seen.

Advantages: Criteria parameters can be passed to the component to make the chart output dynamic for the current page, e.g. Show all Opportunities or Cases for current Account.

Disadvantages: Requires an iFrame. Any changes to source chart will impact the layout.  As Aldo mentioned there are UX issues surrounding the use of an iFrame.

Find the component and example code on Bitbucket:

Chart in Standard Page Layout

2. Dashboard Image URL

Method two is from Daniel Hoechst (@dhoechst).  This method involves creating a dashboard chart and then referencing the image.  This method allows the developer to control the eventual output of the dashboard chart with the following table of URL parameters.  I haven’t figured out what every parameter does yet so if you know or can figure it out please leave a comment and I can update this table.

Advantages: Actual image in embedded into the page which will give the developer more control of where and how the chart image can be used.  The additional URL parameters provide further control to the developer.

Disadvantages: The chart component needs tone created on a dashboard.  Doesn’t offer the same flexibility in terms of report criteria as method one.

URL Param Purpose
rsid=0FL200000009AOw Dashboard Chart ID
ruid=005200000017TsH Run As User ID
did=01Z20000000XlMf Dashboard ID
s=7 Size of Chart 1,2,3,4,5,6,7
fs=10 Aixis FontSize
tfg=12 Title FintSize
c=bar chart type (e.g. bar, line, etc)
cs=0 chart sub type (stacked, split, stacked to 100%) 0,1,2,3
title=  chart title
fg=-16777216 axis font colour
bg1=-1 colour of bg from left side of chart
bg2=-1 colour of bg from right side of chart
bgdir=2  direction of fade from bg1 to bg2
dl1=Case+Owner Axis Label
sax=yes show axis labels (default no)
nc=0 rows to filter, integer is how many 0 is all
sd=1 sort direction 0,1,2,3,4
scv=no show values
vl0=Record+Count Axis Label

7 Responses to “Two methods for embedding a Report or Dashboard Chart in Visualforce or Standard Pagelayout”

  1. Emily said

    Thank you so much for posting! This was a major save for us!

    • Thanks for the feedback. Nice to know its useful to people. I have some improvements which mean that you don’t need to pass the ID of a report allowing you to use the name, this is helpful when deploying into different environments as the IDs can change. Will update the code soon(ish).

      Sent from my iPad

  2. Where are you getting the Chart ID from? The chart IDs in the DashboardComponent table in Salesforce begin with 0FL. I was trying to write something programmatically to fetch these. Can you perhaps give me some idea as to how to grab these

  3. Do you have a link to Daniel’s code for option #2? Thanks.

  4. pengthom said

    I was able to download the code, but when I added the chartAccounOpps VF to the Account page layout, the page just redirects to the report. Got any ideas why I might be having this problem?

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

<span>%d</span> bloggers like this: