Chart not displaying in browser when embedding in separate web app using BVT

Hi,
 
I am able to run and display a report containing a chart in the browser using the BIRT Viewer Toolkit running on Tomcat, by running the report from the URL.
i.e.. using url <a data-ipb='nomediaparse' href='http://10.6.5.1:8100/birt-viewer-toolkit/frameset?__report=crm_management/crm_customer_sales_chart.rptdesign&accountOwner=ABCDEF''>http://10.6.5.1:8100/birt-viewer-toolkit/frameset?__report=crm_management/crm_customer_sales_chart.rptdesign&accountOwner=ABCDEF'</a>
 
The report also works fine in the Eclipse Report Designer.
 
However, when I run a custom app (simple web app) and use JSAPI code to embed reports available from the BIRT Viewer Toolkit (running separately), everything displays in the browser except the chart. Yet, I am able to export the content from the browser to PDF (using the menu options), and the chart is displayed fine in the PDF, just not in the browser.
 
I tried different outputs for the chart in the designer: SVG and JPG but neither worked to display the chart in the browser of the custom app.
I also tried different browsers: Firefox 31.0, IE 10 and Chrome 36.0 with no luck.
 
Any ideas?
 
Cheers,
Richard

Find more posts tagged with

Comments

mwilliams

Do other images show up if you use an image from your BVT resource folder in the design and then try to display that report in the other application? I'm wondering if there is an issue with image access.

richardcooper25

Hi Mike,
 
Yes, I get the same problem for embedded report images not displaying in the custom app browser, but if I export the content to PDF using the menu options, the chart and image both appear in the PDF.
 
I tried using similar JSAPI code in the landing page of the BIRT Viewer Toolkit and there was no problem in displaying the chart and image parts of the report in the browser.
 
Is this issue reproducible on your side, or are you able to display report charts and images in the browser of a customer app which accesses reports on the BIRT Viewer Toolkit app?
 
 
Cheers,
Richard

richardcooper25

Just thought I should mention that the report image and chart don't display in the browser of the custom app, but they still take up the space (dimensions) in the browser where they should go. Another developer here suggested there might be relative paths to the image and chart - in that case it would be a BIRT Viewer Toolkit issue as I'm not sure we can change that code.
 
Update: I added an image (using the URL to an image on the web) to the report. There was no problem for that image to display in the report in the custom app.
So it's looking like a relative path issue for the chart and embedded image not displaying in the custom app.
 
Is there anything I can do to fix it myself?

mwilliams

Was the image that you pointed to that worked inside the BVT files or outside? If outside, does it work to point to it within the BVT with the full path?

richardcooper25

Hi Mike, 
Yes, I am able to view images with URL's pointing to images within BVT and also external websites. 
So I don't think it's a security access issue. 
In case it helps, I have BVT running on Tomcat on a Linux server. 
I have the following configuration in web.xml of the BVT: 

<pre class="_prettyXprint">
<context-param>
<param-name>TEMP_FOLDER_LOCATION</param-name>
<param-value>/opt/clusters/tomcat04/webapps/birt-viewer-toolkit/temp</param-value>
</context-param>
</pre>
I was wondering if the temp directory has some influence on the issue when accessing BVT from a custom app using the JSAPI. 
To determine whether you can reproduce the issue, could you please try the following: 
1) Create a report template with a chart and add it to BVT running on Linux 
2) View the report on BVT, and from the menu option, 'Link To This Page' copy the HTML code 
3) Create a web page (just a .htm text file by itself is ok) and add the HTML code, and click on it to view and see if the chart displays. 
If I do the above, I also cannot view the chart in the web page (but can see the frame surrounding the blank space for the chart). If I then generate a PDF using the chart menu options, the chart appears in the PDF. 
Cheers, 
Richard

mwilliams

Hey Richard,
 
Sorry for the delay on this. Before looking at this, I just tried this in my Windows machine and there was no issue. Let me get a Linux VM set up and I'll try it there. I'll let you know.
 
What I did in Windows: I have a report with a chart in it. I set up my JSAPI code to call that report from a HTML page. I put the html file in a different web app in the same Tomcat and it ran just fine.
 
I'll get a Linux one set up, now.

mwilliams

What version of Tomcat are you using? 4? I'm using Tomcat 7.

richardcooper25

Hi Mike, 
Yes, I'm using Tomcat 7.0 as well. 
I've done some more tests: 1) Running BVT in Tomcat on Windows. 
No problem with Windows: The chart displays OK when accessing a report on BVT using JSAPI in a separate web page not on Tomcat. Also, when running a separate web app on a second Tomcat on Windows, there is no problem accessing a report on BVT (on Tomcat on Windows) using JSAPI. 
Some detail: For the TEMP FOLDER LOCATION and TRANSIENT_STORE_PATH as defined in web.wml in BVT, I have F:\TEMP for both. I found on running the report, that the chart image is stored at: F:\TEMP\actsn1\acws3 2) Running BVT in Tomcat on LINUX 
The chart doesn't display when accessing a report on BVT using JSAPI in a separate web page (on Windows and not running in Tomcat). The same problem was also experienced for embedded images in the report. (Similarly, using a web page in a different app on a second Tomcat on the same Linux server as BVT, the chart and embedded images don't display). 
But the chart and embedded image do display in the landing page of BVT. And, the chart displays in the landing page for all chart output types: SVG, PNG, JPG and BMP. 
Some more detail: For the TEMP FOLDER LOCATION and TRANSIENT_STORE_PATH as defined in web.xml, I am now using: /opts/Temp. I found on running the report (either from the landing page of BVT or in a separate web page not on Tomcat) that the chart image and embedded images are stored at: /opt/Temp/actsn1/acws3 
So I still think the problem of the chart and embedded images not displaying in a separate web page (which is not on the Tomcat where BVT is running on the LINUX server) is somehow related to the URLs for the chart and embedded images. 
How did you go with your tests on LINUX? 
Also, how can I determine the URLs that are being used by the web page for the chart and embedded images - is there some code I can add to the JSAPI code to check them? 
Cheers, 
Richard

mwilliams

Was waiting to know what version you were using. The "tomcat04" in your file path had me wondering.

I'll let you know.

mwilliams

What Linux distro are you using?

richardcooper25

Hi Mike,
 
Here are the Linux server environment details that we're using:
Operating System: Fedora 16
Two Tomcats (version 7.0):
Tomcat1 with BIRT Viewer Toolkit
Tomcat2 with web application that uses JSAPI code to call reports in the BVT on Tomcat1
We're not using a Linux distro.
 
Also, in an earlier issue that I had with BVT (forum link below), I had to created the directory /iv/html5charts and add a blank js file at html5charts/html5charts.js so that I didn't get an exception when running a report embedded in a separate app to BVT. I'm wondering if having a blank html5charts.js file may at all be influencing this issue (although, as noted, this issue is only experienced with Linux)?
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/31372-birt-viewer-toolkit-embedding-reports-issue-in-separate-web-app/'>http://developer.actuate.com/community/forum/index.php?/topic/31372-birt-viewer-toolkit-embedding-reports-issue-in-separate-web-app/</a>
 
How did you go with your tests on LINUX? 
Also, how can I determine the URLs that are being used by the web page for the chart and embedded images - is there some code I can add to the JSAPI code to check them?
 
Cheers,
Richard

richardcooper25

Getting a bit further:
 
(1) BVT and web app in one Tomcat on Linux server
 
a. If I put the BVT and separate web app in the same Tomcat on the linux server, and use IP addresses instead of domain names for the webapp and BVT, then I can get the chart and embedded images to appear correctly in the webapp.
 
b. If I use domain names instead of IP addresses, then I need to use the same domain name for each otherwise if different, I get some Cross-Origin Request Blocked errors in the browser console.
 
(2) Two Tomcats on Linux Server - one for BVT and one for the web app
 
So far, I can't get the chart and embedded images to display in the separate web app (when it's in a separate Tomcat to the Tomcat for BVT) and I get Cross-Origin Request Blocked errors in the browser console.
 
I want to get this to work as BVT will be accessed by multiple web apps

mwilliams

Sorry. Just saw your last message. Was waiting to hear back what Linux you were using. Looking into it, now.

richardcooper25

More testing with two Tomcats on Linux
 
Logging in the browser console using Google Chrome when running a report in the web app gives the following:
<pre class="_prettyXprint">
GET http://localhost:8104/birt-viewer-toolkit/iv;jsessionid=DC64BD217BC2CF8486Aâ€¦22534%2F0.20200&connectionHandle=173&1409206385206&__mimetype=image%2Fjpeg net::ERR_CONNECTION_REFUSED
</pre>
The domain name that I have configured is being replaced by 'localhost' (but the port number stays the same) resulting in the chart image not being found and so the reason for the chart not being displayed in the browser. If I copy the link into a new browser and replace localhost with the actual domain name then I can see the chart image!
 
We're now trying to locate the code where the domain name replacement to localhost occurs but not having much luck.
 
Any ideas about that would be greatly appreciated.

mwilliams

We're not able to reproduce your exact issue, but a colleague of mine (kclark) mentioned this as something that you might try:
 
In your server.xml for your Tomcats, try changing the host name to the actual host vs localhost.
 
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true">

richardcooper25

Hi Mike, 
We tried your suggestion to update the server.xml files for each Tomcat, however, that didn't resolve the issue - the domain name is still being replaced by localhost.
 
You can see the change to localhost below (output from the Google Chrome web console) for an embedded html report in the web app running on our Tomcat2:
<pre class="_prettyXprint _lang-auto _linenums:0">
GET http://report.domain1.com/styles/demo.css 404 (Not Found) crm_management_reports:22

GET http://report.domain1.com/styles/font-awesome.css 404 (Not Found) crm_management_reports:22

URL: http://birt.domain1.com:8104/birt-viewer-toolkit crm_management_reports:394

Report Path: /crm_management/crm_customer_sales_chart.rptdesign crm_management_reports:425

Resource interpreted as Script but transferred with MIME type text/plain: "http://birt.domain1.com:8104/birt-viewer-toolkit/ajaxproxy?id=v5636569152â€¦NnWTJoaGNuTmxkRDExZEdZdE9BPT0mVTA5QlVFRmpkR2x2YmpvZ0lpST0mY21WeGRXVnpkQzEw". jsapi:29701

Resource interpreted as Script but transferred with MIME type text/plain: "http://birt.domain1.com:8104/birt-viewer-toolkit/ajaxproxy?id=v5684802508â€¦dWeVZtRnNkV1UrUEZCaGNtRnRaWFJsY2xaaGJIVmxQanhPWVcxbFBtRmpZMjkxYm5SRGIyUmxQ". jsapi:29701

'Attr.nodeValue' is deprecated. Please use 'value' instead. viewer.js:1

GET http://localhost:8104/birt-viewer-toolkit/iv;jsessionid=80A3AD8386A7C70C8C5â€¦22534%2F0.20200&connectionHandle=221&1409303393507&__mimetype=image%2Fjpeg net::ERR_CONNECTION_REFUSED viewer.js:1

GET http://localhost:8104/birt-viewer-toolkit/images/iv/collapsexpand.gif net::ERR_CONNECTION_REFUSED viewer.js:1

GET http://localhost:8104/birt-viewer-toolkit/iv;jsessionid=80A3AD8386A7C70C8C5â€¦_au%24%24%24%24Vivid2014s.jpg&connectionHandle=221&__mimetype=image%2Fjpeg net::ERR_CONNECTION_REFUSED viewer.js:1 </pre>
It's looking like the issue must be in the BVT code, although we're not able to find the location. 
Interestingly, as noted earlier, if I export the content to PDF, using the menu options, the chart and embedded images display in the PDF, so that's not affected by this issue. 
Can you please advise further? 
Cheers, 
Richard

ssharma

Hi Richard,
I have BVT deployed on Tomcat at my end and I am able to view the charts using the following JSAPI script.
 
<div><html></div>
<div><head></div>
<div><script type="text/javascript" language="JavaScript" src="<a data-ipb='nomediaparse' href='http://localhost:8080/BVT/jsapi'>http://localhost:8080/BVT/jsapi"></script></a></div>
<div></head></div>
<div><body onload="init();"></div>
<div><h1>Simple Viewer</h1></div>
<div><div id="myDivContainer" style="border-width: 1px; border-style: solid;"></div></div>
<div><script type="text/javascript" language="JavaScript"></div>
<div>var myViewer;</div>
<div>/*** Initialization function, called by the body's onload event. */</div>
<div>function init() {</div>
<div>// initialize the birt library, then call createViewer as a callback.</div>
<div>actuate.load("viewer");</div>
<div>actuate.initialize( "<a data-ipb='nomediaparse' href='http://localhost:8080/BVT/'>http://localhost:8080/BVT/</a>", null, "administrator", "", createViewer );</div>
<div>}</div>
<div>/** * Function which creates the viewer. * It is called as a callback to BirtLib.initialize(). */</div>
<div>function createViewer() {</div>
<div>// instantiate a viewer object, by specifying the report file to be used and the HTML container to use.</div>
<div>myViewer = new actuate.Viewer( "myDivContainer" );</div>
<div>myViewer.setReportName("/SD.rptdesign" );// execute the viewer creation</div>
<div>myViewer.setSize(1100,1100);</div>
<div>myViewer.submit();</div>
<div>}</div>
<div></script></div>
<div></body></div>
<div></html></div>
<div> </div>
 
Can you try and verify your source or email me your source so that I can check the same at my end.
 
Feel free to email me at sandipmsg@gmail.com or call me at +6597872688 if you need further assistance.
 
Regards
Sandip.

ssharma

Hi Richard,
I have deployed the BVT on one of my demo servers outside the firewall.
 
<a data-ipb='nomediaparse' href='http://203.125.220.56:8080/BVT/JSAPIReport.html'>http://203.125.220.56:8080/BVT/JSAPIReport.html</a>
 
You can try the following link to check if you are able to view the report with the charts. If you can then you may want to check the display buffer settings on the linux box which may be the root cause for you not being able to view the charts. 
 
You can try deploying the same on another Win2K box to test and confirm the root cause.
 
I have tested this on the following browser clients
Chrome: 36.0.1985.143
Firefox: 31.0
 
IE 11 is not supported, in order use IE 11, you will have to setup the compatibility view setting.
 
Regards
Sandip.

richardcooper25

Hi Sandip,
 
Thanks very much for your help.
 
I tried the following simple test and reproduced the issue using your BVT installation, so the issue is not specific to my environment.
 
I viewed the link that you provided (to the report on your demo server) in FF 31.0 browser. No problem seeing the chart in the browser.
From the report menu options > Link to this page, I copied the code to embed in an HTML page.
I then added the code to an HTML blank text file and added the appropriate HTML tags, and saved as .htm.
Then viewing the HTML file (on Windows 8), most of the report displayed except the chart.
 
Here is the console log when viewing the HTML file in Google Chrome (on Windows 8):
<pre class="_prettyXprint">
Failed to load resource: the server responded with a status of 404 (Not Found) http://203.125.220.56:8080/BVT/iv/html5charts/html5charts.js

Uncaught actuate.ConnectionException:
Type: err_client

Message: Failed to load the following files:
http://203.125.220.56:8080/BVT/iv/html5charts/html5charts.js
URL: http://203.125.220.56:8080/BVT/iv/html5charts/html5charts.js jsapi:29701
Blink is considering rejecting non spec-compliant cross-origin web font requests: http://203.125.220.56:8080/BVT/iportal/common/webfonts/SourceSansPro-Regular.woff. Please use Access-Control-Allow-Origin to make these requests spec-compliant. sandip.htm:1
'Attr.nodeValue' is deprecated. Please use 'value' instead.
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://sgdemo01:8080/BVT/iv;jsessionid=33ABAB81304ADE1B0C0E8772DEDB4CC4?__iâ€¦10%2F0.411&connectionHandle=120&1409650441912&__mimetype=image%2Fsvg%2Bxml
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://sgdemo01:8080/BVT/iv;jsessionid=33ABAB81304ADE1B0C0E8772DEDB4CC4?__iâ€¦12%2F0.413&connectionHandle=120&1409650442004&__mimetype=image%2Fsvg%2Bxml
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://sgdemo01:8080/BVT/iv;jsessionid=33ABAB81304ADE1B0C0E8772DEDB4CC4?__iâ€¦Asia%2FSingapore&connectionHandle=120&1409650441810&__mimetype=image%2Fpng
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://sgdemo01:8080/BVT/iv;jsessionid=33ABAB81304ADE1B0C0E8772DEDB4CC4?__iâ€¦5CBVT%5Cresources%2Fredx.png&connectionHandle=120&__mimetype=image%2Fx-png
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://sgdemo01:8080/BVT/iv;jsessionid=33ABAB81304ADE1B0C0E8772DEDB4CC4?__iâ€¦Cresources%2Fgreenchecka.png&connectionHandle=120&__mimetype=image%2Fx-png

</pre>
Can you please test as I've described above so that you can reproduce the issue?
 
 
Cheers,
 
Richard

richardcooper25

Hi Sandip,
 
For that exception, you'll probably need to create the directory /iv/html5charts and add a blank js file at html5charts/html5charts.js. on your demo installation.
 
Cheers,
Richard

richardcooper25

Hi Sandip and Mike,
 
Finally solved it!
 
This issue was a problem with the Linux server - hosts configuration.
In the default setup of Linux, the hosts include localhost. We needed to include the actual hostname in the hosts.
 
Here is some information for your reference:
 
Initial default settings in linux:
[root@progprodint ~]# hostname
progprodint
[root@proxyserver bin]# vi /etc/hosts
127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4
::1 localhost localhost.localdomain localhost6 localhost6.localdomain6
 
After adding the host name to the hosts:
 [root@progprodint ~]# vi /etc/hosts
127.0.0.1 progprodint localhost localhost.localdomain localhost4 localhost4.localdomain4 
::1 progprodint localhost localhost.localdomain localhost6 localhost6.localdomain6
 
 
After adding the hostname to the hosts, the charts and embedded images display fine in reports embedded in our separate web app.
 
 
Cheers,
 
Richard

mwilliams

Great news. That was actually our original thought, but we bypassed that for the other solution when it seemed to fix the URL we were seeing. Thanks for updating the thread.

richardcooper25

Hi Mike,
 
Still some issues (Linux related):
 
The hosts configuration described above works when the web page displaying the chart is on the same internal network as the BVT server).
 
However, the chart-not-displaying issue still is occurring when the web page displaying the chart is external (outside of the internal network for the BVT server).
 
This seems to be the flow when the web page displaying the chart is external:
 
1. JSAPI code in external web page calls report on BVT using the domain name in the URL for the BVT server. The domain name is resolved OK by the firewall to an external IP address for the BVT server. The report runs and a temporary chart image is created and is saved to the BVT server.
 
2. The callback response is completed and returns the URL for the the temporary chart image. The problem is that the URL returned for the chart image has the internal IP address of the BVT server and not the original domain name which was sent initially with the JSAPI request. The internal IP address is unreachable and so the temporary chart image cannot be downloaded. Note: The other parts of the report (text, tables etc) (that I presume are generated in-memory) are all displayed without problem.
 
Here is the console log using Google Chrome:
<pre class="_prettyXprint">
request url: http://birt.domain1.com:8104/birt-viewer-toolkit/ivresource?closex=true jsapi:29701

request url: http://birt.domain1.com:8104/birt-viewer-toolkit/wsservlet?closex=true jsapi:29701

Resource interpreted as Script but transferred with MIME type text/plain: "http://birt.domain1.com:8104/birt-viewer-toolkit/ajaxproxy?id=v6462218170â€¦NnWTJoaGNuTmxkRDExZEdZdE9BPT0mVTA5QlVFRmpkR2x2YmpvZ0lpST0mY21WeGRXVnpkQzEw". jsapi:29701

request url: http://birt.domain1.com:8104/birt-viewer-toolkit/iv?closex=true&__design=%2Fcrm_management%2Fcrm_customer_sales_chart.rptdesign&viewerId=js3 jsapi:29701

Resource interpreted as Script but transferred with MIME type text/plain: "http://birt.domain1.com:8104/birt-viewer-toolkit/ajaxproxy?id=v3127214929â€¦hKV1lXeDFaVDQ4VUdGeVlXMWxkR1Z5Vm1Gc2RXVStQRTVoYldVK1lXTmpiM1Z1ZEVOdlpHVThM". jsapi:29701

request url: http://birt.domain1.com:8104/birt-viewer-toolkit/iv?connectionHandle=7794â€¦design=%2Fcrm_management%2Fcrm_customer_sales_chart.rptdesign&viewerId=js3 jsapi:29701

// Here you can see the domain name birt.domain1.com has changed to the internal IP address 10.6.62.105!
GET http://10.6.62.105:8104/birt-viewer-toolkit/iv;jsessionid=ECE54CADAA2F157B0â€¦2544%2F0.20200&connectionHandle=7794&1412641894756&__mimetype=image%2Fjpeg net::ERR_CONNECTION_RESET viewer.js:1

</pre>
Any ideas how to fix?
 
Cheers,
Richard

ssharma

Hi Richard,
 
My team member Woo, has setup a Centos on cloud for trial 30 days that has BVT in it. Hereâ€™s some link for you to try it out. It is on a different domain being accessed from outside.
 
<a data-ipb='nomediaparse' href='http://actuateone.cloudapp.net:8080/BVT/'>http://actuateone.cloudapp.net:8080/BVT/</a>
 
<a data-ipb='nomediaparse' href='http://actuateone.cloudapp.net:8080/BVT/frameset?__report=SD.rptdesign'>http://actuateone.cloudapp.net:8080/BVT/frameset?__report=SD.rptdesign</a>
 
<a data-ipb='nomediaparse' href='http://actuateone.cloudapp.net:8080/BVT/JSAPIReport.html'>http://actuateone.cloudapp.net:8080/BVT/JSAPIReport.html</a>
 
This further proves that there is an issue with your Linux environment.
 
I recommend that you look at your host file and ensure there is an entry there which points to the hostname instead.
 
Thanks
Sandip.

richardcooper25

Hi Sandip, 
All is working now! 
We added the extra line to our hosts file <internal IP> hostname as you instructed and the chart now displays when accessing BVT from an external web page. 
Thanks for all your help. 
Please also thank your colleague Woo! 
Cheers, 
Richard