Axional Studio XSQL-Script offers the possibility of generating graphics throughSVG.
Scalable Vector Graphics ia a language to describe two-dimensional vector graphics, both statics and animateds, in XML.
SVG is a W3C recommendation. Current web browsers require the Adobe SVG Viewer plug-in to visualize this type of graphics.1 chart
The result of executing this code is a SVG page. A option to visualize its content would be write it in a file with SVG extension, to later be able to open it from a browser.
<chart
axis='axis'
type='type'
title='title'
xlabel='xlabel'
ylabel='ylabel'
legends='legends'
fop='true|false'
>
<legends> *
<legend /> +
</legends>
<series> +
<serie /> +
</series>
<properties> *
<property
name='name'
value='value'
/> +
</properties>
</chart>
| Attributes | |||||
|---|---|---|---|---|---|
| Name | Type | Required | Default | Description | |
| Aaxis | string | Normally this attribute will always have the value x. If you choose to invert the axes of the graph, the value has to be indicated. This means doing a different representation and not only rotate the axes. The values of the X axis are represented on the Y axis and vice versa. | |||
| Atype | string | Tipo de gráfico a utilizar. El tipo puede ser:
|
|||
| Atitle | string | Title of the graphic. | |||
| Axlabel | string | Title of the X axis. | |||
| Aylabel | string | Title of the Y axis. | |||
| Alegends | string | Title of the legends. | |||
| Afop | boolean | false | Indicates if in the SVG is issued to a XML header. The value true must be indicated when the graphic has been used in a FOP file (to generate a PDF). | ||
| Arguments | |||||
|---|---|---|---|---|---|
| Name | Type | Required | Unique | Nullable | Description |
| Elegends | String | The legends of the graphic are represented in a square on the right side of the graphic. It contains as many strings as there are legends. | |||
| Elegend | String | ||||
| Eseries | Number | Contain the series to represent. Each series contains a value of the Y axis to represent it along the X axis according to the position it occupies. | |||
| Eserie | Number | ||||
| Eproperties | The graphics have a default properties (cell width for example) which are used for representation, but these properties can be explicitly indicated. | ||||
| Eproperty | The specific property to the graphic. | ||||
| Aname | string | Name of the property. It is optional, if it is not specified, the default values are given. | |||
| Avalue | string | Value of the property. | |||
| Property | Description | Example |
|---|---|---|
| fontFamily | Type of letter. | Arial |
| fontSize | Size of letter. | 6 |
| axisMinY | Minimum value of the scale. | 0.0 |
| axisMaxY | Maximum value of the scale. | 0.0 |
| gridLineDashed | Discontinuous lines of the grid. | false |
| gridFilterShadow | Shadow filter. | false |
| gridLineIcon | Icon in the value in line graphic. | false |
| gridCellHeight | Heigth of the grid cell. | 15 |
| gridCellWidth | Width of the grid cell. | 15 |
| gridDispersionMinValue | Minimum scattering indicator value. | 0.0 |
| gridDispersionMaxValue | Maximum scattering indicator value. | 0.0 |
| gridDispersionColor | Background colour of the scattering area. | #E8E8E8 |
| gridBarWidth | Width of the bar. | 5 |
| gridBarOffset | Space between bars. | 2 |
| gridBarMargin | Margin between the bars and the edge of the grill. | false |
| marginLegendIcon | Space between the graphic and the legends. | 10 |
| marginLegendText | Space between the icon and the text of the legend. | 5 |
| pieHemicycle | Hemicycle indicator in pie chart. | false |
| radius | Circle radius in pie chart. | 75 |
| radarAreas | Indicator to mark areas on radar chart. | true |
| equalizerBoxWidth | Width of the equalizer chart box. | 32 |
| equalizerBoxHeight | Heigth of the equalizer chart box. | 80 |
| equalizerBoxOffset | Separation between the equalizer chart boxes. | 2 |
| equalizerModeAuto | Representation mode indicator. | true |
| equalizerMinYellow | Minimum value to represent traffic light (yellow). | 30 |
| equalizerMinRed | Maximum value to represent traffic light (red). | 70 |
| gaugeCircularTheme | Theme (style) of the circular gauge. | 2 |
| gaugeCircularColor | Colour of the circular gauge. | 0 |
| gaugeCircularContour | Contour of the circular gauge. | 0 |
| thermometerWidth | Thermometer width. | 75 |
| layoutSimpleObjCols | In the graphics with one element on each serie (circular, circular gauge and thermometer) it is necessary to indicate the number of series (boxes) by row. | 2 |
| layoutComplexGfxCols | In the graphics with individualized elements for each represented value (equalizer, pitch) it is necessary to indicate the number of elements by row (equalizer numbers and pitch by rows). | 2 |
| layoutComplexGrpCols | In the graphics with individualized elements for each represented value (equalizer, pitch) it is necessary to indicate the number ofseries / boxes (a whole set of equalizers and pitch that represent a series) by row. | 5 |
Example
Copy
<chart axis='x' type='pie' title='purchasses-sales' xlabel='months' ylabel='euros'>
<legends>
<string>January</string>
<string>February</string>
<string>March</string>
<string>April</string>
</legends>
<series>
<serie name='PURCHASSES'>
<number>10</number>
<number>20</number>
<number>30</number>
</serie>
<serie name='SALES'>
<number>15</number>
<number>25</number>
<number>35</number>
</serie>
</series>
<properties>
<property name='fontSize' value='8' />
</properties>
</chart>
1.1 Types of graphics
The package chart allows to generate the following types of graphics:
| Lines: The graphic is based n a two-dimensional grid with the abscissa and ordinate axis. Each value is represented with the corresponding coordinate in the grid as a point and and they are distributed horizontally along the abscissa axis for each of the values. The points representing the different values are joined by a straight line. If there is more than a serie, they are differently in the graphic using differents colours to each one. |
|
| Vertical bars: The graphic is based on a two-dimensional grid with the abscissa and ordinate axis. Each value is represented with the corresponding coordinate in the grid as a vertical bar and and they are distributed horizontally along the abscissa axis for each of the values. The points representing the different values are joined by a straight line. If there is more than a serie, they are differently in the graphic using differents colours to each one. |
|
| Horizontal bars: This type of graphic is technically the same as the vertical bar graphic but rotated in the two-dimensional space 90 degrees to the right. |
|
| Scattering: The graphic is based on a two-dimensional grid with the abscissa and ordinate axis. Each value is represented with the corresponding coordinate in the grid as a point and and they are distributed horizontally along the abscissa axis for each of the values. If there is more than a serie, they are differently in the graphic using differents colours to each one. This type of graphic allows to indicate a range within which the values would be considered normal and outside this range the values would be considered too low or too high. |
|
| Circular: A pie chart is divided into sectors, which represent relative magnitudes or frequencies, or percentages. In this type of graphic, the arc length of each sector (and therefore also its central angle and its area) is proportional to the amount it represents. All together, the sections forms a circle or a semicircle. |
|
| Radar: A radar chart is a two-dimensional graphic of three or more quantitative variables represented in the same number of axes starting at the same point, and with the relative positions and uniform angles. It is normally used to compare the effectiveness of different items in the same set of axes. |
|
| Equalizer: It is a chart of vertical bars with equalizer aspect. Each data series is represented on a different graphic. |
|
| Circular gauge: A circular gauge graphic presents values graphically as points of a graduated crown. It is usually used to represent a single group of data. |
|
| Pitch gauge: Analogous to the previous chart type, but showing all the data series in different circles. |
|
| Thermometer Gauge: A gauge graph of a thermometer presents values graphically as points of a vertical graduated ruler in the form of a thermometer. Each data is represented as the area between the immediately lower value data and its own value. |
|
| Cono: A cone graph (funnel) presents a set of values in progressively decreasing proportions. The measurement of the areas is determined by the series of data as a percentage of the total value, the greater of them in the upper part. |
|
Example
The following XSQL-Script generates the examples of the charts: Horizontal bars, Radar, Circular gauge and Pitch gauge. They are showed on the next table.
Copy
<xsql-script name='test_svg_gfx'>
<!--
Property Description Dedecto
======================= =================================================== =======
fontFamily Type of letter. Arial
fontSize Size of letter. 6
axisMinY Minimum value of the scale. 0.0
axisMaxY Maximum value of the scale. 0.0
gridLineDashed Discontinuous grid lines. false
gridFilterShadow Shadow filter. false
gridLineIcon Icon in value in line graph. false
gridCellHeight Heigth of the grid cell. 15
gridCellWidth Width of the grid cell. 15
gridDispersionMinValue Minimum value indicator of scattering. 0.0
gridDispersionMaxValue Maximum value indicator of scattering. 0.0
gridDispersionColor Blackground colour of scattering area. #E8E8E8
gridBarWidth Width of the bar. 5
gridBarOffset Space between bars. 2
gridBarMargin Margin between the bars and the edge of the grid. 2
marginLegendIcon Space between the chart and the legends. 10
marginLegendText Space between the icon and the text of the legend. 5
pieHemicycle Hemicycle indicator in pie chart. false
radius Cyrcle radium in circular chart. 75
radarAreas Indicator to mark areas in radar chart true
equalizerCols Number of charts by row. 2
equalizerBoxCols Number of boxes by row. 5
equalizerBoxWidth Width of the box of the equalizer chart. 32
equalizerBoxHeight Heigth of the box of the equalizer chart. 80
equalizerBoxOffset Separación entre las cajas del gráfico ecualizador. 2
equalizerModeAuto Representation mode indicator. true
equalizerMinYellow Minimum value to traffic light representation (yellow) 30
equalizerMinRed Maximum value to traffic light representation (red) 70
gaugeCircularTheme Theme (style) of the circular gauge. 2
gaugeCircularColor Colour of the circular gauge. 0
gaugeCircularContour Contour of the circular gauge. 0
thermometerWidth Width of the thermometer. 75
layoutSimpleObjCols In the charts with one element for each serie 2
(circular, circular gauge and thermometer) indicates
the number of series (boxes) by row.
layoutComplexGfxCols In the charts with individualized elements for each 2
represented value (equializer, pitch) indicates the
number of elements by row (number of equalizer and
pitch by row).
layoutComplexGrpCols In the charts with individualized elements for each 5
represented value (equalizer, pitch) indicates the
number of series / boxes (a whole set of equalizers
and pitch that represents a serie) by row.
-->
<body>
<array name='m_types'>
<string>hbars</string>
<string>radar</string>
<string>pie</string>
<string>gauge.circular</string>
<string>gauge.pitch</string>
</array>
<iterator name='type' type='key' index='idx'>
<in>
<m_types />
</in>
<do>
<set name='radius'>75</set>
<if>
<expr>
<eq><type/><string>gauge.pitch</string></eq>
</expr>
<then>
<set name='radius'>25</set>
</then>
</if>
<set name='m_filename'>
<string>c:<file.separator />jas<file.separator />chart_<type/>.svg</string>
</set>
<file.out.open id='out1' append='true'>
<file name='#m_filename' type='absolute' />
</file.out.open>
<file.out.println id='out1'><!--
--><chart axis='x' type='#type' title='purchasses-sales' xlabel='Months' ylabel='M euros'>
<legends>
<string>January</string>
<string>February</string>
<string>March</string>
</legends>
<series>
<serie name='PURCHASSES'>
<number>47</number>
<number>2</number>
<number>10</number>
</serie>
<serie name='SALES'>
<number>5</number>
<number>55</number>
<number>30</number>
</serie>
</series>
<properties>
<property name='radius' value='#radius' />
<property name='gridCellWidth' value='80' />
<property name='gridCellHeight' value='20' />
<property name='gridBarWidth' value='7' />
<property name='gridBarOffset' value='3' />
<property name='gridBarMargin' value='3' />
</properties>
</chart>
</file.out.println>
<file.out.close id='out1' />
</do>
</iterator>
</body>
</xsql-script>
Example
The following XSQL-Script generates the examples of charts of: Lines, Vertical bars, Scattering, Equalizer, Thermometer gauge. They are showed on the next table.
Copy
<xsql-script name='test_svg_gfx'>
<!--
Property Description Dedecto
======================= =================================================== =======
fontFamily Type of letter. Arial
fontSize Size of letter. 6
axisMinY Minimum value of the scale. 0.0
axisMaxY Maximum value of the scale. 0.0
gridLineDashed Discontinuous grid lines. false
gridFilterShadow Shadow filter. false
gridLineIcon Icon in value in line graph. false
gridCellHeight Heigth of the grid cell. 15
gridCellWidth Width of the grid cell. 15
gridDispersionMinValue Minimum value indicator of scattering. 0.0
gridDispersionMaxValue Maximum value indicator of scattering. 0.0
gridDispersionColor Blackground colour of scattering area. #E8E8E8
gridBarWidth Width of the bar. 5
gridBarOffset Space between bars. 2
gridBarMargin Margin between the bars and the edge of the grid. 2
marginLegendIcon Space between the chart and the legends. 10
marginLegendText Space between the icon and the text of the legend. 5
pieHemicycle Hemicycle indicator in pie chart. false
radius Cyrcle radium in circular chart. 75
radarAreas Indicator to mark areas in radar chart true
equalizerCols Number of charts by row. 2
equalizerBoxCols Number of boxes by row. 5
equalizerBoxWidth Width of the box of the equalizer chart. 32
equalizerBoxHeight Heigth of the box of the equalizer chart. 80
equalizerBoxOffset Separación entre las cajas del gráfico ecualizador. 2
equalizerModeAuto Representation mode indicator. true
equalizerMinYellow Minimum value to traffic light representation (yellow) 30
equalizerMinRed Maximum value to traffic light representation (red) 70
gaugeCircularTheme Theme (style) of the circular gauge. 2
gaugeCircularColor Colour of the circular gauge. 0
gaugeCircularContour Contour of the circular gauge. 0
thermometerWidth Width of the thermometer. 75
layoutSimpleObjCols In the charts with one element for each serie 2
(circular, circular gauge and thermometer) indicates
the number of series (boxes) by row.
layoutComplexGfxCols In the charts with individualized elements for each 2
represented value (equializer, pitch) indicates the
number of elements by row (number of equalizer and
pitch by row).
layoutComplexGrpCols In the charts with individualized elements for each 5
represented value (equalizer, pitch) indicates the
number of series / boxes (a whole set of equalizers
and pitch that represents a serie) by row.
-->
<body>
<array name='m_types'>
<string>lines</string>
<string>vbars</string>
<string>scattering</string>
<string>equalizer</string>
<string>gauge.thermometer</string>
</array>
<iterator name='type' type='key' index='idx'>
<in>
<m_types />
</in>
<do>
<set name='m_filename'>
<string>c:<file.separator />jas<file.separator />chart_<type/>.svg</string>
</set>
<file.out.open id='out1' append='true'>
<file name='#m_filename' type='absolute' />
</file.out.open>
<file.out.println id='out1'><!--
--><chart axis='x' type='#type' title='purchasses-sales' xlabel='Months' ylabel='M euros'>
<legends>
<string>January</string>
<string>February</string>
<string>March</string>
<string>April</string>
<string>May</string>
</legends>
<series>
<serie name='PURCHASSES'>
<number>47</number>
<number>2</number>
<number>10</number>
<number>32</number>
<number>25</number>
</serie>
<serie name='SALES'>
<number>5</number>
<number>55</number>
<number>30</number>
<number>22</number>
<number>36</number>
</serie>
</series>
<properties>
<property name='gridCellWidth' value='40' />
<property name='gridCellHeight' value='20' />
<property name='gridBarWidth' value='7' />
<property name='gridBarOffset' value='3' />
<property name='gridBarMargin' value='3' />
</properties>
</chart>
</file.out.println>
<file.out.close id='out1' />
</do>
</iterator>
</body>
</xsql-script>
2 Example of a Axional Studio XSQL-Script which generates a SVG file
The puropose of the following Axional Studio XSQL-Script is, from a username informed by the user,
get (from the wic_conf databse) data relative to the disk space that is assigned and the one that is occupying in emails,
generating a SVG file which contains the code which represents graphically this information. The example can be
divised in 4 phases:
- Obtain the disk space data: using 2 SQL queries, obtain the total disk space which the user has assigned, and the disk space destined to the email tool, storing both values in the variables m_user_disk_size and m_mail_size respectively.
- Represent graphically the information: adding in a function the SVG code which will represent in the form of a gauge (marker) the percentage of disk space occupation in emails (m_mail_size), with respect to the user's total disk size. The marker will be semicircular and the needle will have a slope in degrees that will be determined by the percentage of disk occupancy.
- Calculate the number of degrees which the potentiometer needle should rotate, it will be stores in the variable named p_degrees.
- Generate the SVG file.
Copy
<xsql-script name='gauge_sample'>
<body>
<function name='local_draw_gauge'>
<args>
<arg name='p_user_code' />
<arg name='p_mail_size' />
<arg name='p_user_disk_size' />
<arg name='p_degrees' />
</args>
<body>
<set name='m_pct'>
<math.round>
<mul>
<div>
<p_mail_size/>
<p_user_disk_size/>
</div>
100
</mul>
2
</math.round>
</set>
<return>
<string>
<svg.svg width='300' height='240'>
<svg.title>samples of gauge and thermometer</svg.title>
<svg.desc>visual representation of key performance indicators</svg.desc>
<svg.defs>
<svg.linearGradient id='gradient'>
<svg.stop offset='0%' stop-color='\#00C800' />
<svg.stop offset='50%' stop-color='\#FFFF00' />
<svg.stop offset='100%' stop-color='\#D20000' />
</svg.linearGradient>
</svg.defs>
<!-- Main semicircular arch -->
<svg.path d='M 20, 150 A 50, 50 0 1, 1 280, 150'
style='stroke-width:3; stroke:url(\#gradient); fill:none' />
<!-- Exterior semicircular arch -->
<svg.path d='M 50, 150 A 50, 50 0 1, 1 250, 150'
style='stroke-width:15; stroke:url(\#gradient); fill:\#AAAAAA; fill-opacity:0.5' />
<!-- Digital marker -->
<svg.rect x='129' y='110' width='50' height='15'
style='stroke-width:1; stroke:black; fill:white' />
<!-- Email occupation percentage -->
<svg.text x='154' y='122' style='font-family:arial; font-size: 9pt; text-anchor: middle;'>
<m_pct /><string.space/>%
</svg.text>
<!-- Central cyrcle -->
<svg.circle cx='150' cy='150' r='5' style='fill:black' />
<!-- Needle -->
<svg.line x1='50' y1='150' x2='150' y2='150'
style='stroke: red' transform='rotate(#p_degrees, 150, 150)' />
<!-- End of the needle -->
<svg.rect x='15' y='150' width='10' height='2'
style='fill: black' transform='rotate(#p_degrees, 150, 150)' />
<svg.text x='35' y='150' style='font-family: arial; font-size: 8pt;'>0</svg.text>
<svg.text x='58' y='77' style='font-family: arial; font-size: 8pt;'>25</svg.text>
<svg.text x='145' y='40' style='font-family: arial; font-size: 8pt;'>50</svg.text>
<svg.text x='229' y='77' style='font-family: arial; font-size: 8pt;'>75</svg.text>
<svg.text x='258' y='150' style='font-family: arial; font-size: 8pt;'>100</svg.text>
<svg.text x='65' y='170' style='font-family: arial; font-size: 10pt;'>
% ocupation e-mail tool:<string.space/><m_pct/>
</svg.text>
<svg.text x='80' y='190' style='font-family:arial; font-size: 9pt;'>
User:<string.space/><p_user_code/>
</svg.text>
<svg.text x='80' y='205' style='font-family:arial; font-size: 9pt;'>
Total e-mail:<string.space/><p_mail_size/><string.space/>MB
</svg.text>
<svg.text x='80' y='220' style='font-family:arial; font-size: 9pt;'>
Total quote:<string.space/><p_user_disk_size/><string.space/>MB
</svg.text>
</svg.svg>
</string>
</return>
</body>
</function>
<println/>
<println>- Occupation indicator of the application "My mail" of webOS to the user.</println>
<println>- The result is stored in the "gauge.svg" file in the same execution path.</println>
<set name='m_user_code'><system.prompt>- User code: </system.prompt></set>
<println />
<system.setManager />
<connection name='wic_conf'>
<select prefix='m_'>
<columns>ROUND(((NVL(SUM(mail_size),0)/1024)/1024),2) mail_size</columns>
<from table='wic_user_maildata' />
<where>user_code = <m_user_code /></where>
</select>
<select prefix='m_'>
<columns>user_disksize user_disk_size</columns>
<from table='wic_user' />
<where>user_code = <m_user_code /></where>
</select>
</connection>
<set name='m_degrees'>
<div>
<mul>
<math.round>
<mul>
<div>
<m_mail_size/>
<m_user_disk_size/>
</div>
100
</mul>
0
</math.round>
180
</mul>
100
</div>
</set>
<file.out.open id='out1'>
<file name='gauge.svg' type='absolute' />
</file.out.open>
<file.out.println id='out1'>
<local_draw_gauge>
<m_user_code/>
<m_mail_size/>
<m_user_disk_size/>
<m_degrees/>
</local_draw_gauge>
</file.out.println>
<file.out.close id='out1' />
</body>
</xsql-script>
Execution of the scripth through the corresponding command:
Copy
c:\jas>bin\ws-dbscript -file p:\svg\gauge.xml
It is requested to enter a user's name:
Copy
Enter the user's name:
