Sign in to follow this  
Followers 0
bmcdermott

Fusion Js Not Rendering Correctly In Liferay

By bmcdermott, in Javascript Problems

Recommended Posts

bmcdermott   

bmcdermott
Posted

Hi Folks,

 

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 />

 

<%String pathPrefix=renderRequest.getContextPath(); %>

 

 

<body>

<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>

</body>

 

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"?>

<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">

 

<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 realize that this isn't a Liferay forum, but I figured including this info couldn't hurt. By allowing Liferay to handle this, you don't need to worry about getting the context right. 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

Share this post

Link to post
Share on other sites

bmcdermott   

bmcdermott
Posted

Well I finally got it to work. 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'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.

 

firebug-lite.js (probably optional)

FusionCharts.HC.Charts.js

FusionCharts.HC.js

FusionCharts.jqueryplugin.js

FusionCharts.js

FusionChartsExportComponent.js

jquery.min.js

 

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).

 

 

Bob

 

 

 

 

Share this post

Link to post
Share on other sites

Guest Bindhu   

Guest Bindhu
Posted (edited)

Hi Bob,

 

We are glad to know that you have managed to resolve the issue.

 

To iterate, the required files to render a JavaScript chart would be,

 

FusionCharts.js,

FusionCharts.HC.js,

FusionCharts.HC.Charts.js and

jquery.min.js.

 

All these files must be present in the same folder as FusionCharts.js file.

 

You will only need to include FusionCharts.js in your Web page. The rest of the JavaScript files will be automatically loaded on-demand by FusionCharts.js.

 

You are right about Highcharts.js file, it is bundled into the FusionCharts.HC.Charts.js file.

 

Hope this clarifies!

Edited by Bindhu

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Javascript Problems