Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
highcharts integration in portlet
Hi all,I've been struggling for days with this issue... I am trying to use Higcharts in a portlet (thing that I did in the past already...), but it seems that I cannot manage to succesfully load the needed javascript. I am using liferay-ce-portal-7.1-ga3.
this is portlet code working fine
this is working High chart code
i need highcharts integration in portlet,
can you please give me suggestion
Thank you
Ram
this is portlet code working fine
<%@ include file="/init.jsp"%>
<%@ page import="com.st.emp.model.Employee"%>
<%@ page import="com.st.emp.service.EmployeeLocalServiceUtil"%>
<%@ page import="java.util.List"%>
<%@ page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@page import="javax.portlet.RenderRequest"%>
<%@page import="javax.portlet.RenderResponse"%>
<%@page import="javax.portlet.PortletURL"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ page import="java.util.Date" %>
<% Date defaultDate = new Date(); %>
<liferay-theme:defineobjects />
<portlet:defineobjects />
<h3>Welcome to Travel Expense</h3>
<portlet:actionurl name="actionAdd" var="actionAdd"></portlet:actionurl>
<aui:form action="<%= actionAdd %>" method="post" name="actionAdd" enctype="multipart/form-data">
<aui:fieldset>
<aui:input name="firstName" label="FirstName" />
<aui:input name="lastName" label="LastName" />
<aui:input name="department" label="Department" />
<aui:select label="Location" name="location">
<aui:option label="Please Select Option"></aui:option>
<aui:option label="Kolkata"></aui:option>
<aui:option label="Bangalore"></aui:option>
<aui:option label="Hyderabad"></aui:option>
<aui:option label="Mumbai"></aui:option>
<aui:option label="Pune"></aui:option>
</aui:select>
<aui:input type="file" name="files" />
</aui:fieldset>
<aui:button-row>
<aui:button type="submit" value="Submit" />
<aui:button type="button" value="Cancel" last="true" />
</aui:button-row>
</aui:form>
this is working High chart code
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
},
title: {
text: 'Sample Bar Graph'
},
subtitle: {
text: ''
},
xAxis: {
type: 'category',
title: {
text: 'Status',
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Count'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.1f} count</b>'
},
series: [{
name: 'Data',
colorByPoint: true,
data: [
['Initiated', 11],
['Pending For Approval', 7],
['Approved', 21],
['Rejected', 1]
]
}]
});
});
</script>
i need highcharts integration in portlet,
can you please give me suggestion
Thank you
Ram
I'd suggest, you load it as an AMD module.
https://github.com/highcharts/highcharts#load-highcharts-as-an-amd-module
The other way is to disable the AMD loader
https://dev.liferay.com/en/develop/tutorials/-/knowledge_base/7-0/using-external-libraries
hth
https://github.com/highcharts/highcharts#load-highcharts-as-an-amd-module
The other way is to disable the AMD loader
https://dev.liferay.com/en/develop/tutorials/-/knowledge_base/7-0/using-external-libraries
hth
Copyright © 2025 Liferay, Inc
• Privacy Policy
Powered by Liferay™