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 |
<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:
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.
<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>
The following XSQL-Script generates the examples of charts of: Lines, Vertical bars, Scattering, Equalizer, Thermometer gauge. They are showed on the next table.
<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.
<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:
c:\jas>bin\ws-dbscript -file p:\svg\gauge.xml
It is requested to enter a user's name:
Enter the user's name:
