You can use ROW types to generate SVG graphics.

1 SQL ROW type

An unnamed ROW type is a ROW type that contains fields but has no user-defined name. You can use unnamed ROW (you don't need to declare a ROW data type with unnamed rows) to define SVG graphics for an SQL column. The format to declare a ROW svg graphcic is:

Copy
SELECT ROW('type', arg1, arg2, ...)
  FROM table
 WHERE ...

The response will be a column where each row contains a java.sql.struct with type, arg1, arg2... as attributes.

If the type and arguments matches any of the supported graphics, an SGV will be redered for the column.

ROW types can be used to generate

  • Cell (table) widgets
  • Gauge widgets

The following image show different types of cell table widgets.

2 Cell graphics

Type Row pattern Example
Line row('line', label_1, value_1, label_2, value_2, ..., label_X, value_X)
Area row('area', label_1, value_1, label_2, value_2, ..., label_X, value_X)
Vbar row('vbar', label_1, value_1, label_2, value_2, ..., label_X, value_X)
Pie row('pie', label_1, value_1, label_2, value_2, ..., label_X, value_X)
Percent row('percent', label, value, 0% Value, 100% Value)
Double percent row('percent', label, value1, value2, 0% Value, 100% Value)
Max-Min row('mm', label, value, minValue, maxValue)
Ball row('ball', label, value, absMinValue, absMaxValue)

The following sections will explain how to define each graph and the requirements of each case:

SVG Properties

Each SVG graph can make use of a different set of properties. On each section the properties that can be used fot the SVG defined will be listed. After explaining each type of SVG graph that can be used, at the end of this section, a table describing each property will be found.

2.1 Line

Used to represent a set of n values. A line will be displayed showing the different values. The way to define the struct to represent this SVG graph is:

Copy
row('line', label_1, value_1, label_2, value_2, ....) <alias/>

The values will be displayed over the line and the labels are the tooltips that will appear over each point. Some properties might be added to define how the line graph should be represented: upIsBad moveCenter noTooltip bad_XXXXXX good_XXXXXX

row(' line', ...) row(' line upIsBad', ...)

2.2 Area

Used to represent a set of n values. An area graph will be displayed showing the different values. The way to define the struct to represent this SVG graph is:

Copy
row('area', label_1, value_1, label_2, value_2, ....) <alias/>

The values will be displayed over the line and the labels are the tooltips that will appear over each fragment of the area. Some properties might be added to define how the line graph should be represented: upIsBad moveCenter noTooltip bad_XXXXXX good_XXXXXX

row(' area', ...) row(' area upIsBad', ...)

2.3 Pie

Used to represent a set of n values. A rectangular pie will be displayed. This pie will be formed by multiple pieces, each piece will be associated to a value and its dimension will depend on how big or small is this value. The way to define the struct to represent this SVG graph is:

Copy
row('pie', label_1, value_1, label_2, value_2, ....) <alias/>

The values will be represented by pieces of the pie. A property might be added to this graphs: noTooltip

row(' pie', ...)

2.4 Vbar

Used to represent a set of n values in a column bar graph. The way to define the struct to represent this SVG graph is:

Copy
row('vbar', label_1, value_1, label_2, value_2, ....) <alias/>

Each values will be displayed with a column bar, direction will be different for positive values than for negative values, and depending on the dimension of the value in absolute terms it will be bigger or smaller.

The default colors of the Vbar depend on the number of columns displayed.
Over 12 columns: a color palette will be used.
12 columns or fewer: bar color will depend on the column value, lower than 0 -> red; values over 0 -> blue

The method of choosing colors may be modified according to Properties.

Some properties might be added to define how the line graph should be represented: upIsGood upIsBad colored moveCenter noTooltip bad_XXXXXX good_XXXXXX

row(' vbar upIsGood', ...) row(' vbar upIsBad', ...) row(' vbar colored', ...)

2.5 Percentage

Used to represent a value in a percentage bar. The way to define the struct to represent this SVG graph is:

Copy
row('percent', label, value, 0% Value, 100% Value) <alias/>

The size of the percentage bar will be defined for the position of the value between the '0% absValue' and the '100% absValue'.

Note: "0% absValue" and "100% absValue" must be positives, any value over "100% absValue" will be drawn as 100% or -100%, while any value lower than '0% absValue' will be drawn as 0%.

Some properties might be added to define how the line graph should be represented: upIsBad noTooltip bad_XXXXXX good_XXXXXX

row(' percent', ...) row(' percent upIsBad', ...)

2.6 Double Percentage

Used to represent two values in a percentage bar. The way to define the struct to represent this SVG graph is:

Copy
row('percent', label, value_1, value_2, 0% absValue, 100% absValue) <alias/>

Requirement

value_1 and value_2 must be both positive or negative.

The size of the percentage bar will be defined for the position of value_1 and value_2 between the '0% absValue' and the '100% absValue'. This graph will reprecent a first bar that goes from 0% position to the correspondent position of value_2, and then a second bar that will go from value_2 position to value_1 position.

Note: "0% absValue" and "100% absValue" must be positives, any value over "100% absValue" will be drawn as 100% or -100%, while any value lower than '0% absValue' will be drawn as 0%.

Some properties might be added to define how the line graph should be represented: upIsBad noTooltip bad_XXXXXX good_XXXXXX

row(' percent', ...) row(' percent upIsBad', ...)

2.7 Max-Min

A value will be represented with a ball, this ball will be located over the X axis, and it's position will be defined by the value that it represents.

Copy
row('mm', label, value, minValue, maxValue) <alias/>

value must be defined between minValue and maxValue.

Some properties might be added to define how the line graph should be represented: upIsBad moveCenter noTooltip bad_XXXXXX good_XXXXXX

row(' mm', ...) row(' mm upIsBad', ...)

2.8 Balls

A value will be represented with a ball, the ball size will be defined by the value it is representing, and the color of the ball will indicate if the value is over 0 or below 0.

Copy
row('ball', label, value, absMinValue, absMaxValue) <alias/>

The result of abs(value) must be defined between absMinValue and absMaxValue.

Some properties might be added to define how the line graph should be represented: upIsBad moveCenter noTooltip bad_XXXXXX good_XXXXXX

row(' ball', ...) row(' ball upIsBad', ...)

2.9 Properties

Propery Description
colored Use a predefined palette of colors
upIsGood Use the positive colors for positive values.
upIsBad Use the positive colors for negative values.
good_XXXXXX Change the color that will be used as good color. XXXXXX is the HEX code of the color
bad_XXXXXX Change the color that will be used as bad color. XXXXXX is the HEX code of the color
moveCenter change the Y axis to enfatise the changes in the graph
noTooltip Do not add a tooltip

2.10 Where to use

These graphics can be used and displayed properly in the following places:

Desktop Channels. Single value
Desktop Channels. Tables
SQL Tables
Auto FormData
SingleRow FormData
MultiRow FormData
Parent-Child FormData
Reports

These graphics can also be printed in PDF form.

SVG in Forms

Note: In Forms, the graphic will only be drawn if the cell type is STRING VALUE. The graphic's cell values can not be edited in the Formdata table.

3 Gauges

Type Row pattern Example
Circle row('circle', label, value, minValue, maxValue, units)
Gauge row('gauge', label, value, minValue, maxValue, units, target)

The following sections will explain how to define each graph and the requirements of each case:

SVG Properties

Each SVG graph can make use of a different set of properties. On each section the properties that can be used fot the SVG defined will be listed. After explaining each type of SVG graph that can be used, at the end of this section, a table describing each property will be found.

3.1 Circle

A value will be represented over a radial axis showig the position of value between minValue and maxValue.

Copy
row('circle', label, value, minValue, maxValue, units) <alias/>

The result of value must be defined between minValue and maxValue. It's color will depend on how big or small this value is.

Some properties might be added to define how the line graph should be represented: upIsGood upIsBad noTooltip color_XXXXXX

row(' circle', ...) row(' circle upIsGood', ...) row(' circle upIsBad', ...)

3.2 Gauge

A value will be represented over a gauge axis showig the position of value between minValue and maxValue.

Copy
row('gauge', label, value, minValue, maxValue, units, target) <alias/>

The result of value must be defined between minValue and maxValue. It's color will depend on how big or small this value is.

Some properties might be added to define how the line graph should be represented: upIsGood upIsBad noTooltip color_XXXXXX

row(' gauge', ...) row(' gauge upIsGood', ...) row(' gauge upIsBad', ...)
A gauge with a value of 40 and a target pointing 60: row(' gauge', ..., 60)

Target info

The target is an optional field, is not required.

The target must be a numeric value between the minValue and maxValue of the gauge. If the target has a value out of range the gauge will not be displayed.

3.3 Properties

Propery Description
upIsGood The color of the graph will be defined by the value over a palette of 4 colors from red (small values) to green (big values)
upIsBad The color of the graph will be defined by the value over a palette of 4 colors from red (big values) to green (small values)
color_XXXXXX Change the color that will be used. XXXXXX is the HEX code of the color
noTooltip Do not add a tooltip

3.4 Where to use

These graphics can only be used in the Signle Value Desktop Channels:

4 Example

4.1 Data model

Copy
create table rowtype_data_example 
  (
    id serial not null ,
    title varchar(128),
    ist_1 decimal(10,2),
    ist_2 decimal(10,2),
    ist_3 decimal(10,2),
    ist_4 decimal(10,2),
    ist_5 decimal(10,2),
    ist_6 decimal(10,2),
    ist_7 decimal(10,2),
    ist_8 decimal(10,2),
    ist_9 decimal(10,2),
    ist_10 decimal(10,2),
    ist_11 decimal(10,2),
    ist_12 decimal(10,2),
    ist decimal(10,2),
    ist_per decimal(10,2),
    plan decimal(10,2),
    plan_dif decimal(10,2),
    vj decimal(10,2),
    vj_dif decimal(10,2)
  );
  
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (1,'Umsatzerlöse',100.00,110.00,90.00,110.00,100.00,80.00,90.00,100.00,70.00,70.00,80.00,70.00,274388.00,1.00,2878954.00,-5.00,313445.00,-52.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (2,'Humanmedizin',110.00,80.00,65.00,75.00,75.00,70.00,65.00,65.00,70.00,70.00,70.00,70.00,2585694.00,0.00,2787342.00,-7.00,4626086.00,-84.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (3,'KV',90.00,85.00,85.00,95.00,95.00,90.00,90.00,95.00,85.00,80.00,85.00,85.00,827394.00,0.00,1021498.00,-19.00,1015206.00,-58.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (4,'Privatpatienten',70.00,110.00,30.00,55.00,50.00,45.00,50.00,50.00,45.00,50.00,50.00,50.00,621209.00,0.00,825024.00,-25.00,725402.00,-54.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (5,'Personalaufwand operativ',-30.00,-80.00,-95.00,-95.00,-95.00,-95.00,-90.00,-90.00,-90.00,-90.00,-25.00,-40.00,-519606.00,0.00,-641138.00,19.00,-341039.00,-92.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (6,'Laufende Bezüge',-70.00,-95.00,-95.00,-95.00,-95.00,-95.00,-100.00,-95.00,-100.00,-100.00,-100.00,-90.00,537278.00,0.00,626248.00,14.00,-505568.00,-46.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (7,'Sonderzahlungen',40.00,-10.00,10.00,-30.00,-40.00,20.00,45.00,-10.00,-5.00,-10.00,-10.00,-10.00,-53404.00,0.00,0.00,0.00,-870.00,-70.00);
INSERT INTO rowtype_data_example (id,title,ist_1,ist_2,ist_3,ist_4,ist_5,ist_6,ist_7,ist_8,ist_9,ist_10,ist_11,ist_12,ist,ist_per,plan,plan_dif,vj,vj_dif) VALUES (7,'Einbehaltungen',50.00,-20.00,15.00,-35.00,-60.00,40.00,40.00,-15.00,-15.00,-5.00,-10.00,-10.00,-75404.00,100.00,0.00,100.00,-870.00,-70.00);