1 Types of graphics
2.1 Main box
JChart allows the creation of a wide variety of both interactive and non-interactive charts.
Supports a number of various charts, including combined charts:
- X-Y charts (line, spline and scatter). Time axis is possible.
- Pie charts
- Gantt charts
- Bar charts (horizontal and vertical, stacked and independent). It also has built-in histogram plotting.
- Single valued (thermometer, compass, speedometer) that can then be placed over map.
- Various specific charts (wind chart, polar chart, bubbles of varying size, etc.).
|Id||Identifier of the box
|Chart type||Chart type
|Label Y axis||Label Y axis|
|Data X axis (table)|
|Data X axis(column)||Data of the X axis(columna)|
|Interactive||checkbox to indicate if the chart is interactive
|SQL Stmt||SQL Stmt
|Bar stacking||Bar stacking mode
|Column stacking||Column stacking mode
|Area stacking||Area stacking mode
|Line stacking||Line stacking mode
|Date updated||Updated date
|Id||Identifier of the box|
|Series type||Series type
|Table||Table of the diagram|
|Series data (table|column)||Series data (table|column)|
|Group||Group of the diagram|
|Link code||Link code for SQL Objectl|
3.1 Type of graphic
Total SQL statement of sales, number of invoices per year and month
<select> <columns> YEAR(invoicedate) the_year, MONTH(invoice.invoicedate) <alias name='the_month' />, COUNT(*) <alias name='the_count' />, SUM(invoice.total) <alias name='total' /> </columns> <from table='invoice'/> <group>1,2</group> <order>1,2</order> </select>
3.1.1 X axis
(1) In the table logic dictionary there is a record for the ideomatic translation of the column 'the_month'.
3.1.2 Y axis
(2) In the forms tag editor there is a record for the ideomatic translation of the code 'HDR_TOTAL'.
(3) For each of the series the ideomatic translation is shown in the logical table dictionary.
In this example, the total and the count (number of invoices).
Dictionary of tables:
The titles of the legend can be turned on or off to show or hide the series on the chart.
3.1.4 Filter by combo
(4) Value of the column of the SQL statement used in the filter.
In this example, the year
3.2 Symbology ranges
The symbology field is only applicable to gauge and heatmap modes
For the gauge type chart, a symbology of ranges from 0 to 100 is parameterized, showing the percentage of sale of each year with respect to the total.
Parameterization of the box.
* Creation of the symbology.
In this example 3 symbologies are created with a range from 0 to 25, from 25 to 75 and from 75 to 100.
Stacking series of the same type.
In this example, column stacking is shown by value or percentage.
Starting from the sentence: sales by month and year obtaining the total of sale, the number of documents and the percentage with respect to the other months.
Since the series are of column type, the parameterized stacking is (column stacking).
<select> <columns> the_year, the_month, the_total, the_count, ROUND( (the_total) * 100 / (SELECT SUM(total) FROM invoice WHERE MONTH(invoice.invoicedate) = the_month ),2) month_percent </columns> <from alias="itotal"> <select> <columns> YEAR(invoicedate) <alias name='the_year' />, MONTH(invoice.invoicedate) <alias name='the_month' />, SUM(total) <alias name='the_total' />, COUNT(*) <alias name='the_count' /> </columns> <from table="invoice" /> <group>1,2</group> </select> </from> <order>1</order> </select>
Parameterization of the box.
Parameterization of the series.
3.3.1 Stacking value
3.3.2 Stacking percentage
3.4 Filter column
This example shows the total monthly sales and the number of invoices in a polar type chart.
A filter is added per year, to be able to visualize the data of a year, in combo mode and in multiple graphics mode.
The SQL statement used is:
<select> <columns> YEAR(invoicedate) <alias name='the_year' />, MONTH(invoice.invoicedate) <alias name='the_month' />, COUNT(*) <alias name='the_count' />, SUM(invoice.total) <alias name='total' /> </columns> <from table='invoice'/> <group>1,2</group> <order>1,2</order> </select>
3.4.1 Filter by combo
3.4.2 Multiple graphics
3.5.1 Types of series
3.5.2 Groups in series
In this example, a pie chart with two series will be shown, representing the number of sales per year and artist.
<select> <columns> YEAR(invoicedate) <alias name='the_year'/>, artist.name, COUNT(*) the_count </columns> <from table='invoice'> <join table='invoiceline'> <on>invoice.invoiceid = invoiceline.invoiceid</on> <join table='track'> <on>track.trackid = invoiceline.trackid</on> <join table='album'> <on>track.albumid = album.albumid</on> <join table='artist'> <on>album.artistid = artist.artistid</on> </join> </join> </join> </join> </from> <where> artist.name IN('Pink Floyd','The Clash','R.E.M.') </where> <group>1,2</group> </select>
3.5.3 Own axis in series
Used to indicate that the values of the series contain a measure of their own.
In this example we show two series, one with a total amount and another with a number of documents.
In the parameterization of the series for the column 'the_count' an own axis is established.
The sentence used is the following: (Sales and number of documents per month and year.)
<select> <columns> YEAR(invoicedate) the_year, MONTH(invoice.invoicedate) <alias name='the_month' />, COUNT(*) <alias name='the_count' />, SUM(invoice.total) <alias name='the_total' /> </columns> <from table='invoice'/> <group>1,2</group> <order>1,2</order> </select>
3.5.4 Code link in series
Used to make a link to another object using the data of the series as a filter.
In this example, the total sales per month and year will be displayed, adding a link to show the data associated with the series.
The link object is invoice maintenance invoice and the parameterized condition is:
YEAR(invoicedate) = '#the_year' AND MONTH(invoice.invoicedate) = '#the_month'
The character ' #' + code of the column is used to obtain the value of the main cursor series and use it as a filter.
* The graph and the result are displayed after clicking on the column for the month of August (8).
All invoices for August 2009.
The invoice object was executed using the following statement:
SELECT invoice.rowid, invoice.invoiceid, invoice.customerid, NVL(TRIM(customer.firstname), '') || ' ' || NVL(TRIM(customer.lastname), '') customer_name, invoice.invoicedate, invoice.billingaddress, invoice.billingcity, invoice.billingstate, invoice.billingcountry, invoice.billingpostalcode, invoice.total FROM invoice ,OUTER customer WHERE invoice.customerid = customer.customerid -- ================================================================================= -- Query condition ($0) + non XML security filters -- ================================================================================= AND YEAR(invoicedate) = '2009' AND MONTH(invoice.invoicedate) = '8' AND 1=0
Adding the filter of year and month parameterized in the condition of the series.
3.5.5 Colors in series
Hexadecimal value of the color to represent for the series.
Allowing to modify the color that you want to represent for each series.
This example shows the series of sales total with a purple color and the number of sales with a green color.
3.5.6 Series auto
When realizing a pivot of a set of values, the number of columns is variable.
They can be respresentadas of automatic form by means of the reserved word ' auto'.
Monthly sales per year, pivoting the country to be represented in the series.
- Graph type selector Cartesian
- Column of the sentence with temporary value, in this case the month the_month
- Flag legend activated to show the different series and also be able to use them as a filter.
- Filter by combo of the column The_year and thus be able to filter the graph by years.
- SQL statement to execute, in this case: XSQL-Script embedded.
<call> <![CDATA[ <xsql-script> <body> <vtable name='v_out'> <select> <columns> customer.country, year(invoicedate) the_year, month(invoicedate) the_month, SUM(invoice.total) total </columns> <from table='invoice'> <join table='customer'> <on>invoice.customerid = customer.customerid</on> </join> </from> <group>1,2,3</group> <order>2,3</order> </select> </vtable> <return><vtable.pivot name='v_out' pivotcolumns='country' pivotsort='the_year' datacolumns='total' /></return> </body> </xsql-script> ]]> </call>
* The process makes a pivot on the data, to transfer in columns the different values per country.
The parameterization of the series is:
The auto series is modified with a column parameter and a stacked value is made in columns in the box.
Filtering with the legend: