By Arvind Thakur

Data Visualization helps viewers cut through unnecessary details and present huge volumes of report data in a clear and aesthetically pleasing way.

In the Spring ‘14 release, Salesforce provided a way to visualize report data in a precise manner on a Visualforce page, with the introduction of the Analytics:ReportChart tag.  Salesforce Report Charts have been a clear frontrunner in Data Visualization, over standard dashboards and Google charts.

What’s interesting, is a peculiar behavior of Analytic ReportChart tag when put inside any repeat tag. Let’s have a look at a scenario where we:

  1. Fetch report IDs from our Salesforce Org.
  2. Store them in a list
  3. Iterate over that list in our Visualforce page to feed these IDs into the tag <Analytics:ReportChart>.

Visualforce page

Controller class

As you can see in the image below, the result was unimpressive.

A closer look shows that only the first Report ID in the list has been picked up, and rendered the number of times the list size. This would never serve a purpose in which we want to dynamically feed this tag with multiple Report IDs to have their charts on a Visualforce page.

The solution to this problem is to:

  • Leverage apex dynamic component functionality to build analytic components in controller      class, and
  • Render them on the page using a simple apex dynamic component tag.

Here’s how to do it:

Controller class


Visualforce page

We were much happier with this result!

I have used “Limit 10” in my SOQL query, as you could face some issues when trying to add more than 10 report charts on a fully customized Visualforce page.

  • Since each of the above charts are constructed as an entirely different component, each of them carries its own set of scripts.
  • Hit F12 in your VF page and have a quick glance at any one of the rendered charts. For the outermost div you would see “AuraElement-X” where X would be the position of the chart on the page.
  • Bring out the entire HTML of the chart and you’ll have a cemented thought of working with Analytic and not Apex.
  • Each chart’s HTML size would start at 500KB and can be as high as 2MB. The chart whose report has no record would end up with a size around 500KB, and as the complexity of the chart increases, it can go up to 2MB. Salesforce has limited HTML page size to 15MB, which is why we have set the SOQL query limit as 10 here.

There are ways to tackle this by incorporating the use to tabs, giving each of them a report name, then dynamically querying on reports with the selected tab name vis-à-vis report name. Just make sure not to add more than the required reports to your folder, or it could lead to snapping of your visualforce page.

Join the Conversation

Your email address will not be published. Required fields are marked *

  1. How can we decide the number of charts being shown in one row
    in the image shown above there are 5 charts in one row
    and i am getting 4 in one row
    does this get rendered randomly or we can set some value for it

    1. Look for the size of reportchart component. In the above example it is set to small.
      If this does’t work, then try to change the CSS of the OutputPanel having styleclass named “blockOutputPanel” on the VF page.

      Thanks !

    1. Clicking on report chart would redirect you to the respective report. That’s an inbuilt feature. No need of links.
      Interesting would be to see how this feature reacts if put up on a Salesforce Community or Public Site. Not sure of it, will have to try.

  2. I get an error in Apex class ” Field does not exist: reportId on ” when I do a dynamic component. Any reason ?

    1. I don’t see any reason for this, neither am I able to reproduce it. Try this –
      String reportId;
      Component.Analytics.ReportChart rptchart = new Component.Analytics.ReportChart(reportid = reportId);

  3. Hi,

    Hoping you can answer an issue I’m running into. I run into an error on the controller. Here’s the error message: Entity is not api accessible entity name: ReportChart

    Here’s my controller:
    public without sharing class Reports_Utility {
    public List spRptsFldr {get; set;}
    public list spRpts {get; set;}
    public Component.Apex.OutputPanel spRptsChrt {get;set;}
    public LIST childComponents {get;set;}

    * Constructor
    public Reports_Utility(){
    spRptsFldr = new List();
    spRpts = new List();
    for(folder f : [select id from folder where developername = ‘SC_reports’]){
    for(report r : [select id from Report where ownerid =: spRptsFldr]){

    Component.Apex.OutputPanel innerOutputPanel;
    spRptsChrt = new Component.Apex.OutputPanel();
    childComponents = new List();
    for(id reportId : spRpts){
    innerOutputPanel = new Component.Apex.OutputPanel();
    innerOutputPanel.styleClass = ‘blockOutputPanel’;
    innerOutputPanel.childComponents.add(new Component.Analytics.ReportChart(reportId=reportId,size=’large’));
    I’m running api version 40 on this class. I’m not sure what I’ve done wrong.

  4. Thanks Arvind Thakur,

    Code works so fluently, and it refresh things so easily.
    But i have one question ,is it possible to open report in next tab?
    i.e when i clicked on a report present in vf page it open respected report in same tab, i want it should open in new tab.
    Can you just help me with this requirement

Subscribe to our blogs

Subscribe to our blogs