RE: highcharts integration in portlet

2019-03-19T12:15:32Z

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

highcharts integration in portlet

2019-03-19T08:15:04Z

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

&lt;%@ include file="/init.jsp"%&gt;
&lt;%@ page import="com.st.emp.model.Employee"%&gt;
&lt;%@ page import="com.st.emp.service.EmployeeLocalServiceUtil"%&gt;
&lt;%@ page import="java.util.List"%&gt;
&lt;%@ page import="com.liferay.portal.kernel.util.ParamUtil"%&gt;
&lt;%@page import="javax.portlet.RenderRequest"%&gt;
&lt;%@page import="javax.portlet.RenderResponse"%&gt;
&lt;%@page import="javax.portlet.PortletURL"%&gt;
&lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %&gt;
&lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %&gt;
&lt;%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %&gt;
&lt;%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %&gt;
&lt;%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %&gt;
&lt;%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %&gt;
&lt;%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %&gt;
&lt;%@ page import="java.util.Date" %&gt;
&lt;%    Date defaultDate = new Date(); %&gt;
<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