Display dashboard in VF Page

Question

I want top display dashboard in VF page.

1. When I am trying to do it using blank window appear.

   <apex:iframe src="/01Z28000000Hdzo" >
   

2. Right now I am doing as per follows.

   Page -

   <script language='javascript'>
           {!dashboardBlob}
   </script>
   

   Controller -

   public string getdashboardBlob() 
   {
    PageReference dbPage = new PageReference('/01Z28000000Hdzo');
    Blob pageBlob = dbPage.getContent();
    return pageBlob.toString()  
   }
   

Using above Dashboard is loaded into page but when I am trying to refresh the dashboard by clicking Refresh button (Standard button present on Dashboard) it gives me Access Control Origin error.

"XMLHttpRequest cannot load https://ap2.salesforce.com/dash/dashboardRefresh.apexp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://c.ap2.visual.force.com' is therefore not allowed access."

Please suggest if you have any solution for this.

Answer 1

VF Page

<apex:outputText rendered="{!contains($CurrentPage.Url, 'vpsMenu')}">
    <div id="mainArea">
    </div>
    <script type="text/javascript">
    document.getElementById('mainArea').innerHTML = {!dashboardHtml}
    </script>
</apex:outputText>

Controller

public with sharing class DashboardSnippetController {
    public DashBoardSnippetController(){}

    public string getDashboardHtml(){
        PageReference dbPage = new PageReference('<URL HERE>/<ID TO DASHBOARD HERE>');
        Blob pageBlob = dbPage.getContent();
        return pageBlob.toString();
    }
}

Answer 2

Here you might find a workaround for your use-case How Can I Embed a Dashboard in Visualforce?

The dashboard embedding seems unfortunately not to be officially supported and you may end up in url- and js hacks.