1.5.3.2.1. Screen XML Descriptor
Open the GENERIC UI tab in CUBA Studio and create a screen in the web module. Enter the value column3d-chart
in the Descriptor field. The fields - Id, Controller Name and Messages Pack will be filled in with appropriate values. Save changes. Open the XML tab and replace its content with the following code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
caption="msg://caption"
class="com.company.sampler.web.screens.Column3dChart"
messagesPack="com.company.sampler.web.screens"
xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">
<dsContext>
<collectionDatasource id="countryGrowthDs"
class="com.company.sampler.entity.CountryGrowth"
refreshMode="NEVER"/>
</dsContext>
<layout>
<chart:serialChart id="chart"
angle="30"
categoryField="country"
datasource="countryGrowthDs"
depth3D="60"
height="100%"
plotAreaFillAlphas="0.1"
startDuration="1"
width="100%">
<chart:categoryAxis gridPosition="START"/>
<chart:valueAxes>
<chart:axis position="LEFT"
stackType="BOX_3D"
title="GDP growth rate"
unit="%"/>
</chart:valueAxes>
<chart:graphs>
<chart:graph id="graph2014"
balloonText="GDP grow in [[category]] (2014): <b>[[value]]</b>"
fillAlphas="0.9"
lineAlpha="0.2"
title="2014"
type="COLUMN"
valueField="year2014"/>
<chart:graph id="graph2015"
balloonText="GDP grow in [[category]] (2015): <b>[[value]]</b>"
fillAlphas="09."
lineAlpha="0.2"
title="2015"
type="COLUMN"
valueField="year2015"/>
</chart:graphs>
<chart:export/>
</chart:serialChart>
</layout>
</window>
The root element of the screen descriptor contains a new xmlns:chart
attribute:
<window xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd"
...
>
The chart retrieves data from the countryGrowthDs
datasource defined in the datasource
attribute. Names and values are displayed using the country
, year2014
and year2015
attributes of the CountryGrowth
entity; the list of instances for this entity is stored in the datasource.
The chart:serialChart
component contains the following attributes:
-
angle
- defines the chart angle. May have a value from0
to90
. -
balloonText
- defines text for the tooltip that appears when hovering over a column. You can use the following tags:[[value]]
,[[title]]
,[[persents]]
,[[description]]
, as well as keys from theDataItem
listed in aDataProvider
instance, or names of the entity attributes from the datasource. To usehtml
tags you must escape them. -
depth3D
- chart thickness. When used in combination with theangle
attribute, helps to create a 3D effect. -
plotAreaFillAlphas
- opacity of the plot area. -
startDuration
- duration of the animation, in seconds. -
categoryField
- a key from the set of pairs contained in theDataItem
objects listed in aDataProvider
instance; this key is used to determine the labels for the category axis.
The chart:serialChart
component contains the following elements:
-
chart:categoryAxis
- an element that describes the category axis.-
The
gridPosition
attribute specifies if a grid line is placed on the center of a cell or on the beginning of a cell.
-
-
chart:valueAxes
- an element that defines vertical value axes. In our case, only one vertical axis is used; the axis is described by thechart:axis
element.-
The
position
attribute defines position of the value axis relative to the chart. -
Setting
stackType
toBOX_3D
makes the chart display columns one behind the other.
-
-
chart:graphs
- an element that contains the collection ofchart:graph
elements; the graph is described by thechart:graph
element.-
The
type
attribute defines the type of the graph and can be: line, column, step line, smoothed line, olhc and candlestick. -
The
valueField
attribute defines a key from the list of pairs contained in theDataItem
objects listed in aDataProvider
instance; this key is used to determine the value. -
The
fillAlphas
attribute defines opacity of fill. -
The
lineAlpha
attribute defines opacity of the line (or column border). Value range is 0 - 1.
-
-
chart:export
– an optional element that enables chart export.