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: http://bitbucket.org/tapply_andy/dynamic-report-chart-component
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.
|rsid=0FL200000009AOw||Dashboard Chart ID|
|ruid=005200000017TsH||Run As User ID|
|s=7||Size of Chart 1,2,3,4,5,6,7|
|c=bar||chart type (e.g. bar, line, etc)|
|cs=0||chart sub type (stacked, split, stacked to 100%) 0,1,2,3|
|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|
|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|