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>
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: