Displaying Report Charts On Communities

While working on a requirement, I landed up on a scenario wherein I need to display charts to community users. We can go for some custom library like high charts that shows very bright charts but it is very difficult to create input structures like they expect.

As per my view, there is nothing like a standard functionality. You can create things in minutes so lets do it straight.

There are very straight forward steps to accomplish it:

1. Add report charts into your reports.

2. Then, there is a standard VF tag with name analytics:reportChart that can run by adding report id to its attribute.

    <analytics:reportChart reportId="{!reportId}"/>
   

Points to take care:

1. This component has limitation that only one report chart can run at a time. So for example, if you are trying to make a custom dashboard page and display lets say 5 or 6 charts at a time. You cannot achieve this as this component will always display report chart for last report loaded. There can be workarounds that can be applied to delay loading of components.

   One of workarounds, I applied is to display a select list to show all reports' names and display their report charts on selection.

   Images are shown below :

2. If this needs to be imported on communities using templates(Napili, Kokua etc.), then this can only be used with an iframe withing lightning components.
   Lightning Page builder do have a standard component for ReportChart but it is not visible on Community Builder so this is the workaround for now.

Full Code can be seen below:

Happy Coding!