ООО "Бэрхил Софт". 119311, Россия, г.Москва, Ломоносовский просп., д.19.

+7 (495) 664-9347 info@bearhill.ru

TopChart portlet — Chart/Dashboard Tool (Liferay 6.2)


TopChart Portlet properties

These properties are used to configure TopChart Portlet running in the Liferay-6.2  portal.

The TopChart Portlet belongs to the free form chart/dashboard tools.

The component is provided from Liferay marketplace in accordance with EULA.

TopChart portlet contains different text blocks in addition to graph and uses various display options. You can make additional display settings by applying css-styles to the page on which the portlets are placed. In addition, you can use special commands to add dynamic values to text blocks and graph.  TopChart portlet uses open source components for flexible and responsive HTML5 JavaScript charting.

Basic settings

JNDI Data Source Use this field to define external data source for dynamic data.  JNDI Data Source should be defined in context configuration file of your Liferay application server. Use $CATALINA_HOME/conf/context.xml for Tomcat or  $JBOSS_HOME/server/default/deploy/datasource-ds.xml for Wildfly server.
Title Title text block placed on the top of TopChart portlet. HTML tag has class=»bh-tch-main-title» attribute. Define additional display settings using page level css-style sheet.
Description  Chart description text block. HTML tag has class=»bh-tch-descr» attribute.
Top value  Value text block in the middle of the portlet. HTML tag has class=»bh-info-value» attribute.
 Image  Custom image displayed on the right of top value. You may use predefined fontawesome icons (for example: «fas fa-bolt» or simpler in v3.2.1  «icon-bolt» for bolt icon) or url of existent web image (for example: «https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png»). Details about using fontawesome icons see here —  https://fontawesome.com/icons?d=gallery and about fontawesome  v3.2.1  — https://fontawesome.com/v3.2.1/icons/ . Define image size on page level css-style sheet using  class=»bh-top-chart-icon», for sizing fontawesome icons use classbh-info-image«. Color for icon may be changed by picker.
Middle value 1/2 Two additional text blocks to display static text or dynamic values. HTML tag for text blocks has classbh-top-value-1″ and class=»bh-top-value-2″. If value in block starts with ‘+’ or ‘-‘ sign then green up arrow and red down arrow respectively will be placed after the text. Colors of text blocks and arrows defined in bootstrap class=»text-success» and class=»text-error» for positive and negative values respectively.
 Chart type  Select appropriate chart type from predefined values:

  • none
  • bar
  • horizontalBar
  • line
  • radar
  •  doughnut
  • pie

If «none» selected, no chart section will be displayed. See chartjs.org for more information about chart types and options.

 Chart options  Use different chart options.
 Chart data  Define data sets for your chart. Use dynamic values from defined JNDI data source.

Advanced settings

In addition for static values in portlet settings you may define dynamic text block data or chart data set and options in form like @import-sql(«SELECT dt FROM test.datasrc;»). This sql query will be requested from selected JNDI Data Source and result values will be displayed in text blocks or used for representing chart.