The graphical type
When specifying the graphical type there must also be a graphical tag inside the result.
<result>
<sql>select ... </sql>
<result-type>graphical</result-type>
<graphical>
...
</graphical>
</result>
This graphical tag then again contains the various chart specifications.
The currently supported charts are:
- category-line-chart Example
- category-chart Example
- line-chart Example
- stacked-area-chart Example
- pie-chart Example
Common tags
Tags that are common to all charts are:
title
The title.
<graphical>
<title>Some title</title>
...
</graphical>
legend
Specifies details about the legend.
Contains an optional “side” specification, that specifies where the legend should be placed. Legal values are BOTTOM (default), LEFT, RIGHT, TOP
Contains an options “cols” specification that forces the number of columns in the legend.
<graphical>
<legend>
<side>RIGHT</side>
<cols>2</cols>
</legend>
...
</graphical>
top
Specifices an ordering and maximun number of rows for the resultset.
<graphical>
<top>
<column>A column name</column>
<maxrows>20</maxrows>
<order>asc</order>
</top>
...
</graphical>
css
Can specify css for the chart.
For details of valid css referer to the JavaFX documentation, f.ex: JavaFX css tutorial
<graphical>
<css>
.default-color0.chart-area-symbol { -fx-background-color: #3e69a6, #233c5f; }
.default-color1.chart-area-symbol { -fx-background-color: #66c859, #296321; }
.default-color2.chart-area-symbol { -fx-background-color: #e6e6e6, #3f3f3f; }
.default-color0.chart-series-area-line { -fx-stroke: #233c5f; }
.default-color1.chart-series-area-line { -fx-stroke: #296321; }
.default-color2.chart-series-area-line { -fx-stroke: #3f3f3f; }
.default-color0.chart-series-area-fill { -fx-fill: #3e69a6; }
.default-color1.chart-series-area-fill { -fx-fill: #66c859; }
.default-color2.chart-series-area-fill { -fx-fill: #e6e6e6; }
</css>
...
</graphical>
y-range
You can specify the range of the y-axis (if relevant). It is specified in the form from-to, where from and to can be either a number or an *.
<graphical>
....
<line-chart>
<y-range>0-100</y-range>
...
</line-chart>
</graphical>
min-x-range
You can specify a minimum x range (typically used when the x axis is a time period). Normally the range will be dynamic based on the data that is currently plotted, but sometimes it is relevant to say that the range should contain some minimum period. The value is number of seconds.
<graphical>
....
<line-chart>
<min-x-range>600</min-x-range>
...
</line-chart>
</graphical>
functions
There are a set of functions that can be applied to the values before plotting.
- negative_to_zero Converts negative values to 0
- negative_to_last Converts negative values to the last known value
- multiply Multiplies the value by a constant
- divide Divides the value by a constant
The negative_to_zero and negative_to_last functions can be applied to specific columns or to all columns.
All columns:
<graphical>
<functions>
<function>negative_to_last</function>
</functions>
...
</graphical>
A column called ‘counter’:
<graphical>
<functions>
<function>
<perform>negative_to_last</perform>
<column>counter</column>
</function>
</functions>
...
</graphical>
The multiply and divide functions can only be applied to specific columns. Here values in the column ‘counter’ are multipled by 10:
<graphical>
<functions>
<function>
<perform>multiply</perform>
<args>
<arg>10.0</arg>
</args>
<column>counter</column>
</function>
</functions>
...
</graphical>
Dynamic chart tags
max-age
The max age (in seconds) for plotted values. Relavant when the x axis displays time. Typically used to specify that you only want to plot values from the last x hours/minutes.
<graphical>
<max-age>7200</max-age>
...
</graphical>
max-points
The maximum number of points to plot. This is a feature to avoid issues when accidentally trying to plot a large number of points. There is a threshold where you will have 100% cpu load trying to plot everything.
<graphical>
<max-points>1000</max-points>
...
</graphical>
Post your comment on this topic.