We have experienced some work related to Liferay Portlet and Highchart.js in our recent development.

The output in Portlet is  -

Highchart in Liferay Portlet

I am sharing the coding requirement here. It is a price comparison data for years.

In the Portlet, I have made use of java collection framework to facilitate Highchart

Data Structure.

Portlet Coding -


List lstchart = (List)
renderRequest.getAttribute("chartList");

if(lstchart==null)
{

	List lstPrice = <<Get Data from Service>>;
	HistogramDataBean hdb = new HistogramDataBean();
	List lstHDB = new ArrayList();

	double[] monthdata1  =  new double[12];
	for(int j =0;j	{
	    monthdata1[j] = 0;
	}

	String seriesNamePrev = "";
	for(int i = 0;i<lstPrice.size();i++)	{
		Price fp = lstPrice.get(i);
		if(!seriesNamePrev.equals(""))
		{
		    if(!seriesNamePrev.equals(String.valueOf(fp.getM_year())))
			{
				hdb.setYear(seriesNamePrev);
				hdb.setMonthdata(monthdata1);
				lstHDB.add(hdb);
				hdb = new HistogramDataBean();
				monthdata1  =  new double[12];
				for(int j =0;j<12;j++)
			        {
		          		monthdata1[j] = 0;
				}
			}
		}
		for(int j =0;j<12;j++){
		      if(fp.getM_month()==(j+1))
				{
				monthdata1[j] = fp.getPrice();
				}
			}
			seriesNamePrev = String.valueOf(fp.getM_year());
		}
		hdb.setYear(seriesNamePrev);
		hdb.setMonthdata(monthdata1);
		lstHDB.add(hdb);
		renderRequest.setAttribute("chartList", lstHDB);
	}

For easy understanding, I am sharing the HistogramDataBean Structure here.

 
package com.util;

public class HistogramDataBean {
	private String year;
	public String getYear() {
		return year;
	}
	public void setYear(String year) {
		this.year = year;
	}
	public double[] getMonthdata() {
		return monthdata;
	}
	public void setMonthdata(double[] monthdata) {
		this.monthdata = monthdata;
	}
	private double[] monthdata  =  new double[12];
}

And I am attaching the full jsp and highchart coding for the Highchart to work here

The solution worked Wonderfully.