How to display report charts in sharepoint

[former_member190781]

My client wanted to display a live chart on customer facing SharePoint site which should display the current performance metrics. The requirement was to display only chart from a webi report and not the entire report contents. Here is the simple solution I did to get this done, does not require IOMS installation or configuration and involvement of SharePoint person. The solution is not just related to SharePoint site but can be used with any web pages. Utilized the IFrame feature of HTML to display part of the webpage.

I don't know whether this solution was already discussed but as I could not find I am posting it.

The solution comprises of following three major steps

1. BI Workspace.
2. HTML Code.
3. Deploy on SharePoint or any other webpage.

Assumption: SSO is configured.

1. Creating BI Workspace

   To get more details about BI Workspace please Click Here. We would be using BI Workspace as a container to hold only the chart area from any report.

• Logon to BI Launchpad and open BI Workspace application.

• Set the layout to "Freeform" and from Public modules drag the report on canvas which contains the desired chart. As shown below.

• Right Click on chart within report and click on "Select this report part".
• Adjust the height and width of the chart container.
• Click on Edit button.

• From "Report Content" section select "Latest Instance" and click Ok.
• Save BI Workspace in public folder.
• Create a recurring schedule (Daily/Hourly as per your requirements) of the report which we used. (Note that we are using this approach to improve the performance of chart display)
• Right click on BI workspace which you have just created, go to Document link and make a note of opendoc URL.

2. HTML Code

• Following is the HTML code (Also available in the attachment) which I used, copy it in a notepad window and just replace the opendocument URL of BI workspace captured above. Later I will show how to adjust the pixels.

<div style="overflow: hidden; max-width: 838px; boarder-top: 0px; border-right: 0px; border-bottom: 0px; margin: -14px auto; border-left: 0px; max-height:970px"><ifrmae class="myiframe" src=http://myserver/BOE/OpenDocument/opendoc/openDocument.jsp?sIDType=CUID&amp;iDocID=Abusdf9mjkllasdfk8..." scrolling="no" style="border-top: 0px; height: 970px; border-right: 0px; width: 874px; border-bottom: 0px; margin-left: 19px; border-left: 0px; margin-top: -55px"></iframe>

• Save the notepad document as .html on your local desktop.
• Double click to open the html page in Internet Explorer.
• The next step is to adjust the pixels so that only the complete chart is displayed and exclude the unnecessary portion.
• Right click on the webpage and click on "Inspect Element"
• Adjust width, margin, height etc using arrow keys of the keyboard for <div> and <iframe> sections as shown below.

• Once done note down the pixel changes and update your .html file.

3. Deploy on SharePoint or any other webpage

• Open the SharePoint site, make sure you have full control on the page where you want to show the chart.
• Edit webpage

• Add new web part or modify existing, click on HTML and Edit HTML

• Copy the HTML code from .html file created on your desktop and paste here.
• The same HTML code can be used in any other webpages.

I hope you find it useful.