Image of an arrow

Our latest Liferay contribution: a Chart Portlet for enhanced Data Visualization

Avatar

shanssian

Download for free on the Liferay Marketplace!Charts are effective visual tools for presenting information, summarizing results, and revealing trends and patterns in data. The Chart Portlet is the one-stop solution for all your data visualization needs! It offers maximum flexibility through a range of configuration and customization options and an intuitive user-friendly interface that makes it easy to generate and display a variety of charts anywhere on the Liferay portal.

Developed by Savoir-faire Linux’s Liferay team, the Chart Portlet is written using Vaadin 7 to be deployed on any Liferay server. It currently supports English, French and Russian.

Highly configurable, this portlet allows you to choose from different data source types including relational databases via JDBC, Groovy scripts, REST web services with JSON or XML, and CSV files; first enter the details of the data source from which you wish to obtain a certain data set and produce a chart. You can then choose the type of chart to present the data from a variety of available charts including the pie chart, donut chart, bar chart, column chart, line chart, area chart and gauge chart.

After choosing the type of chart, you can configure the fields of the chart, e.g. the axes or labels, and you can specify a sort order for some of the fields. Furthermore, you can add a Refresh time in the configuration to ensure that the chart gets refreshed at regular intervals and thus always reflects the latest data. You can preview the chart that is generated and customize its colors before saving it. Upon saving, the finalized chart gets published on the portal but can still be configured at any time for modifications.

After deploying the Chart Portlet to your server, you will be able to add it as an application anywhere on your portal. Initially, the portlet requires some configuring before it can display any chart. In the first step of the configuration, you will be able to choose from a list of possible data source types supported by the portlet:

chart-data-source

In the second step of the configuration, you will be able to fetch the data from the data source of your choosing.

Say you wish to display the total area of each of the Great Lakes in a visually compelling manner on your portal from a simple CSV file that contains the name, length, maximum depth, and total area of the Great Lakes. First, select File as your data source type. In the second step of the configuration, paste the URL of the CSV file. You can link to any CSV file of Open Data on the web but for this example assume the CSV file has been uploaded to your server. Select the Separator and Text Delimiter values that correspond to the file and click on Run to view the resulting data:

chart-csv

The next step of the configuration contains a list of possible chart types supported by the portlet: pie, donut, bar, column, line, area and gauge. Continuing this quick example, choose the chart type as Column. Configure the fields of the column chart, specifying the total area in the Values field.

chart-column-values

The final step of the configuration allows you to preview the chart and customize its Look and Feel. Save the chart when you are satisfied with the way it looks, and it will be displayed on your portal:

chart-column

Detailed examples are described in the following tutorials:

Leave a comment

Your email address will not be published. Required fields are marked *


Similar articles

Image of an arrow
Thumbnail image

Liferay gives us the possibility to add Oauth (OpenId connect) authentication out of the box. It’s also possible to give access to third-party applications via Oauth authentication. But what if you don’t want your user to log in to your portal with Oauth but still give them the possibility to enhance their experience by connecting […]

             Since 2010, we have been training, coaching and accompanying a range of enterprises and organizations in their digital transformation based on Liferay Portal solutions. Having received a number of awards and observed the rising success of our clients, today, we have unreserved confidence in what we can offer and […]

Montreal, QC – (October 11, 2017) – Savoir-faire Linux – a Canadian leader in providing expertise on a range of open source technologies to enable digital transformation strategies – announces today its participation as a Gold Sponsor at this year’s Liferay Symposium North America, hosted by Liferay.  Liferay makes software that helps companies create digital experiences on […]

The Thumbnail Generator aims to improve and facilitate the generation of thumbnails provided by Liferay. This plugin was created during a project requiring a large number of thumbnails with precise dimensions in order to minimize the loading time of the web pages. Currently, Liferay is only capable of generating two different sizes of thumbnails, when […]