Chart View

The chart view shows data as 2D graphs.

<chart name="chart.sales.per.month" title="Sales per month"> (1)
  <search-fields> (2)
     <field type="datetime" name="fromDateTime" title="From Date"/>
     <field type="datetime" name="toDateTime" title="To Date"/>
  </search-fields>
  <dataset type="jpql"> (3)
  <![CDATA[
  SELECT
      SUM(self.totalAmount) AS amount,
      MONTH(self.orderDate) AS month,
      _customer.fullName AS customer
  FROM
      Order self
  LEFT JOIN
      self.customer AS _customer
  WHERE
      YEAR(self.orderDate) = YEAR(current_date)
      AND self.orderDate > :fromDateTime
      AND self.orderDate < :toDateTime
  GROUP BY
      _customer,
      MONTH(self.orderDate)
  ORDER BY
      month
  ]]>
  </dataset>
  <category key="month" type="month"/> (4)
  <series key="amount" groupBy="customer" type="bar"/> (5)
</chart>
1 define a chart view
2 define search fields (the input values can be used as query params)
3 define the data source for the chart (jpql, sql or rpc)
4 define the category axis
5 define the series for the chart

The chart view is not bound to any object but depends on dataset retrieved with JPQL/SQL queries or the given rpc (method call).

The optional <search-fields> can be used to define input fields to provide query parameter values or context for the rpc calls.

Chart types

Following chart types are supported:

  • pie

  • bar

  • hbar

  • line

  • area

  • donut

  • radar

  • gauge

  • scatter

A chart view requires following information:

  • name - unique name for the chart

  • title - chart title

  • stacked - whether to create stacked chart

  • onInit - an action to be called during chart init

  • <dataset> - JPQL/SQL select query with select name aliases

  • <category> - defines the X-Axis of the chart with

    • key - the dataset field to be used to categories the data (used as X-Axis data points)

    • type - category type can be, numeric, date, time, month, year or text

    • title - category title displayed on X-Axis

  • <series> - list of data series defines the Y-Axis (for the moment only one series is allowed)

    • key - the dataset field to be used as Y-Axis data points

    • groupBy - the dataset field use to group the related data

    • title - the title for the Y-Axis

    • type - graph type, (pie, bar, hbar, line, area)

    • side - Y-Axis side (left or right)

  • <config> - custom configuration data

    • name - name of the configuration item

    • value - configuration value

Config

Charts can be configured with specific config values, these configuration may not be applicable to all chart types.

Most important config values are:

  • width - width of the chart

  • height - height of the chart

  • xFormat - custom x-axis format

  • percent - used with pie chart, show labels in percent

  • colors - specify base colors for charts, each color is used to provide 5 gradient shades

Colors

Colors can be specified with colors config value (comma separated). Each color is used to provide 5 gradient shades + 20 shades from d3’s category20b preset.

<chart ...>
  ...
  ...
  <!-- html named colors -->
  <config name="colors" value="red,green" />

  <!-- or html hex colors -->
  <config name="colors" value="#31a354,#e6550d" />

</chart>