Analytic ReportChart on a Visualforce Page

January 13, 2017 Appirio

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.

Previous Article
Tips for an Effective Architecture Review Board
Tips for an Effective Architecture Review Board

Next Article
The Ultimate Salesforce Data Migration Best Practices Guide
The Ultimate Salesforce Data Migration Best Practices Guide

By Harshvardhan Rathore “If you don’t have time to do it right, when will you have time to do it over?” – J...