Bar Chart

In this section, you will:

  • Integrate a chart with multiple series

  • Add title, tooltip, legend elements

  • Bind data through a data container

Multiple Series Chart Setup

You will integrate a chart component that combines a bar series to represent employees' salaries and a line series to display their total assessment scores.

Setting Chart Series

Double-click on user-list-view.xml in the Jmix tool window. First, click on the formLayout element where your chart will be located.

To add a chart element, choose Add Component in the actions panel, select the Chart item.

adding charts

This will automatically add the charts namespace to your root tag, if you haven’t added it in this file yet.

<view xmlns="http://jmix.io/schema/flowui/view"
    xmlns:charts="http://jmix.io/schema/charts/ui" />

As well as the <charts:chart/> element in the formLayout. Configure the id, height and width attributes as follows.

<charts:chart id="bar" width="40em" height="100%" minHeight="30em" alignSelf="STRETCH">

To pick your charts type you need the series attribute. Select the chart element in the Jmix UI structure panel or in the view XML descriptor, then click on the Add button in the inspector panel. Choose Series → Bar from the drop-down list.

To include the line series to your chart, choose the series element and pick Add → Line. Add a name property for both chart types: Salary and AssesmentTotal respectively.

<charts:series>
    <charts:bar name="Salary"/>
    <charts:line name="Assessment Total"/>
</charts:series>

Adding Axes

The Bar, scatter, line charts need yAxes and xAxes elements to display the chart’s values. To add an X axis, click on the charts element and choose Add → XAxes → XAxis. Your chart X axis will display the names of the employees.

<charts:xAxes>
    <charts:xAxis/>
</charts:xAxes>

Since the chart has two different data types with varying scales, you need to configure two Y axes separately. To configure the first Y-axis for displaying employees' salaries, click on the chart element and pick Add → XAxes → XAxis.

Add the name="Salary" attribute in the XAxis element and configure its position and alignment.

The values in the database are stored as multiples of 100,000. To display these values in a format scaled down to hundreds, add the axisLabel element under YAxis and set the formatterFunction attribute as follows.

<charts:yAxis name="Salary" position="LEFT" alignTicks="true">
    <charts:axisLabel
            formatterFunction="function(value){return value / 100;}"/>
</charts:yAxis>

The formatterFunction attribute defines a JavaScript function which is called to adjust the format of the tick values on the axis. In the example above, the function divides the incoming value by 1000 to adjust the scale from hundreds of thousands to hundreds.

To add the second Y axis, choose the YAxes element and pick Add → XAxis, configure the axis' name, position and ticks alignment as follows.

<charts:yAxis name="Assessment Total" position="RIGHT" alignTicks="true"/>

Next, map each Y axis with its respective series by adding yAxisIndex attributes in the bar and line series respectively as shown below.

<charts:series>
    <charts:bar name="Salary" yAxisIndex="0"/>
    <charts:line name="Assessment Total" yAxisIndex="1"/>
</charts:series>

Adding Chart Properties

Now, you will add optional properties to your chart such as title, tooltip, and legend to provide more context.

Title

By default, the title text appears at the top of the chart. To add a title, select the chart element, then choose Add → Title from the inspector panel. Configure the text attribute to describe what the chart represents, i.e. Salary & Assessment Total.

<charts:title text="Salary &amp; Assessment Total"/>

Tooltip

The tooltip attribute provides detailed information when users hover over different parts of the chart. To add a tooltip attribute, select the chart element, then choose Add → Tooltip. Set the trigger attribute to "AXIS" to show tooltips for all items in the same category.

<charts:tooltip trigger="AXIS">
    <charts:axisPointer type="SHADOW"/>
</charts:tooltip>

Legend

The legend attribute helps users distinguish different categories on the chart. It is configured automatically based on the chart’s data. To add a legend attribute, select the chart element, then choose Add → Legend.

<charts:legend/>

Data Binding Using Data Container

First, you need to load all users except the Admin.

Create a new collectionContainer under the data element with the employeesDc name and the corresponding JPQL query as follows.

<collection id="employeesDc"
            class="com.company.onboarding.entity.User">
    <fetchPlan extends="_base">
        <property name="department" fetchPlan="_base"/>
    </fetchPlan>
    <loader id="employeesDl" readOnly="true">
        <query>
            <![CDATA[select e from User e where e.username <> 'admin']]>
        </query>
    </loader>
</collection>

To include the loaded data to the chart, select the chart element and add a dataSet attribute manually.

<charts:dataSet/>

Inside the dataSet element, choose the employeesDc container as your source and configure the categoryField as your X axis, and valueFields as your Y axes as follows.

<charts:dataSet>
    <charts:source dataContainer="employeesDc"
                   categoryField="username" valueFields="salary assessmentTotal"/>
</charts:dataSet>

By the end of this tutorial, your bar chart XML configuration will be as follows.

<charts:chart id="bar" width="40em" height="100%" minHeight="30em" alignSelf="STRETCH">
    <charts:title text="Salary &amp; Assessment Total"/>
    <charts:tooltip trigger="AXIS">
        <charts:axisPointer type="SHADOW"/>
    </charts:tooltip>
    <charts:legend/>

    <charts:dataSet>
        <charts:source dataContainer="employeesDc"
                       categoryField="username" valueFields="salary assessmentTotal"/>
    </charts:dataSet>

    <charts:xAxes>
        <charts:xAxis/>
    </charts:xAxes>
    <charts:yAxes>
        <charts:yAxis name="Salary" position="LEFT" alignTicks="true">
            <charts:axisLabel
                    formatterFunction="function(value){return value / 100;}"/>
        </charts:yAxis>
        <charts:yAxis name="Assessment Total" position="RIGHT" alignTicks="true"/>
    </charts:yAxes>

    <!-- Add yAxisIndex for each series to bind yAxis to their corresponding data -->
    <charts:series>
        <charts:bar name="Salary" yAxisIndex="0"/>
        <charts:line name="Assessment Total" yAxisIndex="1"/>
    </charts:series>
</charts:chart>

This chart provides a visualization of the employees’ salaries and total assessment score.

bar res