Fusion Charts in Liferay - Not Working

[Bob McDermott，修改在11 年前。]

Hi Folks,

Does anyone have experience with Fusion charts in Liferay? I'm having some trouble getting a simple chart to work. This is a topic I posted on the Fusion forum, but I thought someone here might have some experience with the integration.

We are evaluating Fusion charts for use in our Liferay portal. We want to use the javascript charts. We are having some trouble getting charts to render. We have downloaded the FusionCharts Suite XT. We have created a portlet and created the following view.jsp portlet.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineobjects />

&lt;%String pathPrefix=renderRequest.getContextPath(); %&gt;


   
    <div id="chartContainer">FusionCharts XT will load here!</div> 
    <script type="text/javascript">
	
	FusionCharts.setCurrentRenderer('javascript');

		var myChart = new FusionCharts( "Column3D", "myChartId", "400", "300" );
      
	  myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
        "yAxisName='Sales' numberPrefix='$'>" +
          "<set label='Week 1' value='14400' />" +
          "<set label='Week 2' value='19600' />" +
          "<set label='Week 3' value='24000' />" +
          "<set label='Week 4' value='15700' />" +
        "</chart>");
      myChart.render("chartContainer"); 
    
    </script>
   
  
  

Per Liferay best practices, I am allowing Liferay to load the javascript by referencing it in the liferay-portal.xml file as such:

  <!--?xml version="1.0"?-->


<liferay-portlet-app>
	<portlet>
		<portlet-name>fusion</portlet-name>
		<icon>/icon.png</icon>
		<instanceable>false</instanceable>
		<header-portlet-css>/css/main.css</header-portlet-css>
		<footer-portlet-javascript>/js/FusionCharts.js</footer-portlet-javascript>
		<footer-portlet-javascript>/js/FusionCharts.HC.js</footer-portlet-javascript>
		<footer-portlet-javascript>/js/FusionCharts.HC.Charts.js</footer-portlet-javascript>
		<footer-portlet-javascript>/js/jquery.min.js</footer-portlet-javascript>
		<css-class-wrapper>fusion-portlet</css-class-wrapper>
	</portlet>
	<role-mapper>
		<role-name>administrator</role-name>
		<role-link>Administrator</role-link>
	</role-mapper>
	<role-mapper>
		<role-name>guest</role-name>
		<role-link>Guest</role-link>
	</role-mapper>
	<role-mapper>
		<role-name>power-user</role-name>
		<role-link>Power User</role-link>
	</role-mapper>
	<role-mapper>
		<role-name>user</role-name>
		<role-link>User</role-link>
	</role-mapper>
</liferay-portlet-app>

I am 99% sure that the javascript is being loaded for two reasons, 1) the control renders at least a little (more below) 2) I can see it in the resulting source in Firebug. So I don't think the issue I am encountering is being caused by the way Liferay loads the js.

What is happening?: When I load the portlet for the first time I get a white square with the message "Chart type not supported". If I refresh the portal page, the box disappears and I see the "FusionCharts XT will load here!" from the JSP above. The only way I can get the "Chart type not supported" message to come back is to delete the portlet and add it again. Any refresh and it returns to the "FusionCharts XT will load here!" message without the white square (which I am assuming is the javascript control partially rendering).

Any problems in the js files I'm loading? Is my jsp code OK? Any recommendations for further troubleshooting? Finally, is anyone using Fusion charts successfully in Liferay? We are using version liferay-portal-6.1.1-ee-ga2.

Thanks,
Bob

[David H Nebinger，修改在11 年前。]

Well, here's the thing...

I think if you look at your generated HTML, you won't find a div with an id of "chartContainer".

Liferay will obfuscate all element ids so there aren't any collisions when multiple copies of the same portlet are on the same page.

[Bob McDermott，修改在11 年前。]

David,

Thanks for the reply. That makes sense. I didn't realize it at first that the "chartContainer" serves as a target for the javascript, but know that you pointed it out it seems obvious. I'll double check when I get to the office tomorrow that it is in fact not there in the generated HTML.

So, assuming that is the case is there any way to work around it? I'm thinking that it would need to be a change in the javascript to accept a variable that identifies a <div>.

I believe people are using Fusion in Liferay so I'm hoping the folks at Fusion will have an idea or workaround.

As always I appreciate the assistance.
Thanks,
Bob

[David H Nebinger，修改在11 年前。]

The easiest way I know is to use a class assignment on the div. Then use AUI/jQuery/DOM to find the div by class, then use the found element in your FC as the target.

[Bob McDermott，修改在11 年前。]

Well, I checked on the existence of the chartContainer <div> and to my surprise it was in fact there. I have attached images of the html source in both cases: 1) when the white box appears with the "chart type not supported message" and 2) when the "Fusion Charts XT will load here" message.

If you look at the code when the white box loads (remember that it only appears when I first add the portlet, and a refresh makes it disappear) you can see that Fusion is in fact returning some javascript (see Showing_chartContainer.jpg) so at least Fusion is trying to work and seems to be getting what it needs from Liferay (i.e. the js is loading). Although of course it is still not loading the chart which I would think is something amiss with the way I have Fusion set up.

But what is really puzzling me know is that upon any refresh, the white box disappears and the "will load here" message is left (see Portlet_After_refresh.jpg and Source_after_refresh.jpg). From the source you can see that the Fusion javascript does NOT get added to the source. Is there a difference between the way Liferay processes a jsp and it's components when it is first added, and upon each subsequent page load?

If I get the initial load to work, it would obviously still be an issue if it disappears upon a refresh.

So I have a bunch of stuff going on here, some of which is outside of core Liferay. Again I am also posting this thread on the Fusion forums, hoping to get some insight from both sides.

Thanks for any guidance as always,
Bob

[David H Nebinger，修改在11 年前。]

We use highcharts (which FC also uses), but we load the JS at the theme level rather than at the portlet level. You might give that a try... Personally I'm not all that keen on loading heavyweight JS libs at a portlet level; lightweight javascript binding at the portlet level, sure, but heavyweight libs at the theme level seems more appropriate.

That said, the initial placement of a portlet sometimes gives LR a headache (I know my Vaadin portlets typically do not render when I first drop them on a page, I have to refresh the page to see them).

The difference is that on a first drop, LR tries to handle the rendering just using javascript rather than a full-page refresh.

The full page refresh will invoke the server-side logic to render the portlet and aggregate it into the full page.

I'm wondering if this comes down to a matter of timing... Your main page has embedded JS in it, but the FC scripts are defined as footer includes, so when the page renders it would try to execute the embedded js (possibly) before the FC scripts are loaded...

[Bob McDermott，修改在11 年前。]

Well I finally got it to work. David, you were on to something with your thought of timing. The solution was to load both FusionCharts.HC.Charts.js and FusionCharts.js in the header; like this:

<header-portlet-javascript>/js/FusionCharts.HC.Charts.js</header-portlet-javascript>
<header-portlet-javascript>/js/FusionCharts.js</header-portlet-javascript>

I tested this several times, when these js files are loaded in the footer, the javascript doesn't load as described in my original post.

All of the other js files appear to just need to be in the portlets js folder. I find this interesting as I am not explicitly loading these js files either in liferay-portal.xml nor in the jsp code. They must be dynamically loaded by one of the js files that I am explicitly loading.

firebug-lite.js (probably optional)
FusionCharts.HC.Charts.js
FusionCharts.HC.js
FusionCharts.jqueryplugin.js
FusionCharts.js
FusionChartsExportComponent.js
jquery.min.js

I'm not 100% sure which of these are required but these are the one I have in the working solution for a 3D bar chart.

One important note, the FusionCharts.HC.Charts.js MUST be loaded before the FusionCharts.js file in Liferay-portlet.xml, or the "Chart type not supported" message is displayed.

One other note, the highcharts.js file is not needed. I had read that it was in several Fusion documents. It must have been bundled into the FusionCharts.HC.Charts.js file (with HC indicating High Charts).

David, thanks for your help and guidance towards a solution.

Bob

[Bob McDermott，修改在11 年前。]

Here is an update for anyone trying to use Fusion charts with Liferay. The method I described above, which worked great for a single chart portlet on a page, did NOT work when I tried to place multiple chart portlets on a page. The page actually became non-responsive when I tried to refresh the page with more than one fusion based portlet.

I took David's suggestion on moving my javascript to the theme level and it did work. This must have something to do with contention introduced when loading multiple copies of the Fusion javascript libraries.

I had some trouble finding good documentation on how to introduce javascript in a theme, but this is what I did:

In my theme, I modified \themes\my-theme\docroot\_diffs\templates\portal_normal.vm to include these lines:

	$theme.include($top_head_include)
	#js("$javascript_folder/jquery-1.5.min.js")
	#js("$javascript_folder/date.format.js")
	<!-- Added here RJM 11/19/2012 -->
	#js("$javascript_folder/firebug-lite.js")
	#js("$javascript_folder/FusionCharts.HC.Charts.js")
	#js("$javascript_folder/FusionCharts.HC.js")
	#js("$javascript_folder/FusionCharts.jqueryplugin.js")
	#js("$javascript_folder/FusionCharts.js")
	#js("$javascript_folder/FusionChartsExportComponent.js")
	#js("$javascript_folder/jquery.min.js")
	<!-- Added here RJM 11/19/2012 -->

I then placed all of the referenced js files in my \docroot\_diffs\js folder. I then removed the references to the javascript files from the liferay-portal.xml files in the individual portlets. So far all seems to be working. This is kind of a lot of javascript to load on every page, so I might experiment with only loading it for certain pages.

I'd appreciate any comments on the method I used to integrate the javascript in the theme. Is there a better way?

Hope this helps others.
Bob

[David H Nebinger，修改在11 年前。]

Use two different themes:

Theme 1 is your primary theme, one where you do not include the extra js.

Theme 2 should use theme 1 as a parent. This way theme 2 only has a portal_normal.vm override file and the extra javascript.

Use theme 1 on all of your pages where graphs are not displayed and theme 2 on those pages where a graph is displayed.

Most changes from theme 1 will get propagated to theme 2 at theme 2 build time.

It's just a matter of remembering to build theme 2 after you have built theme 1 and deploy them both.