reports embedded in visualforce not showing

With Spring '14, Salesforce has really picked up the pace when it comes to their Analytics.

The Analytics API is now available in Apex.

Salesforce has also added a new tag, <analytics:reportChart> for embedding report data into Visualforce pages. As of right now, there is only one Visualforce component available in the analytics namespace, but my guess would be that more will be coming.

If you are trying to add this report to a page layout section, Salesforce has also recently added the ability to embed report charts in page layouts directly. This completely eliminates the Visualforce requirement!

Anyway, I would highly suggest looking into the Analytics API more. This should work a bit better than an iFrame for you. Peter Knolle has written some exceptional articles on the topic as well:

• Apex Analytics API and Report Chart Component
• Using the Analytics API in Apex to Create A Google Bubble Chart
• Asynchronous Reports with the Analytics API in Apex
• Inspecting Analytics API Object Details

He also did a session at my local user group meetup that he recorded and put up on Youtube.

I just figured out a way to do this without an iFrame using jQuery.

First you need to include jQuery at the top of your VF page:

<apex:page standardController="Contact" sidebar="false" showHeader="false">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then include a target element in your page that will be the container for the report. For example:

<apex:pageBlockSection title="My Report" id="MyReport" columns="1" />

Now at the bottom of the page, use the jQuery load method to grab the HTML source of the report page, pull out just the report table, and inject it into the container:

<script language="JavaScript">
    $('[id$="MyReport"] > .pbSubsection > .detailList').load('/00Oi000000wxyz?pv0={!Contact.id}&isdtp=nv table.reportTable.matrixReportTable');
</script>

Unfortunately the styling is lost, so I had to create a simple style sheet on the page to make it more readable:

<style type="text/css">
    [id$="MyReport"] > .pbSubsection {
        margin-top:10px;
    }
    [id$="MyReport"] >.pbSubsection tr:first-of-type td, [id$="MyReport"] >.pbSubsection tr:first-of-type th {
        border-top:1px solid rgb(212, 218, 220)!important;
    }
    [id$="MyReport"] > .pbSubsection th, [id$="MyReport"] > .pbSubsection td {
        font-size: 12px;
        padding:3px 6px 3px 5px;
        background-color:#fff;            
        border-color:rgb(212, 218, 220)!important;
        border-bottom:1px solid rgb(212, 218, 220)!important;
    }   
    [id$="MyReport"] > .pbSubsection th {
        background-color:#eee;
    }
    [id$="MyReport"] > .pbSubsection .grandTotal {
        background-color:rgb(212, 218, 220);
    }
    [id$="MyReport"] > .pbSubsection .drilldown {
        display:none;
    }
</style>