Now we will create a new screen to display a chart.
-
Select Generic UI in the project tree and click New → Screen in the context menu. After that, the template browser page will appear.
-
Select Blank screen in the list of available templates and click Next.
-
Enter the value
column3d-chart
in the Descriptor name field and click Next. -
Open the Text tab and replace its content with the following code:
link:../../../../../source/chart/column3d-chart.xml[role=include]
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 countryGrowthDc
data container defined in the dataContainer
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 data container.
The chart:serialChart
component contains the following attributes:
-
angle
– defines the chart angle. May has 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 data container. 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, ohlc 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.