Data Components

• 1: Chart
• 2: Data Table

1 - Chart

Chart types

With the Chart component, it is possible to create

• Bar Charts
• Line Charts
• Scatter Charts
• Pie Charts

First Charts

Let us dive straight in and make some charts from some data

Invoices for sproggets,widgets and snap

We’ve define an Object called invoice with some typical fields and a relationship to a customer

And, supposing we sell three kinds of product - sproggets,widgets and snap - we have defined some sample instances of invoice:

1. Example Bar chart - showing total units sold

Now let us make a chart which will show us how many units of each product we’ve sold.

this takes just 2.10!

2. Example Line chart - showing amounts grouped by week

Now let us make a line chart which will show us how income has been developing, taking week as the period of analysis (i.e. amounts in the same week are summed together and considered one amount)

this takes just 1.14!

3. Example Scatter Chart - showing product success in size of spots

A Scatter Chart scatters dots which represent two values:

• one value determines the y-position of the dot
• the other value determines the radius of the dot

this takes just 1.46!

Aside for the SQL-curious

The data looks like this:

mysql> SELECT   invoiceid,amount AS "amount", quantity AS "quantity", item AS "item"   FROM invoice;
+-----------+--------+----------+----------+
| invoiceid | amount | quantity | item     |
+-----------+--------+----------+----------+
|         1 |     87 |        3 | widget   |
|         2 |     23 |        7 | scrogget |
|         3 |     43 |        2 | snap     |
|         4 |     36 |      132 | widget   |
|         5 |     74 |        8 | scrogget |
|         6 |     25 |        7 | snap     |
|         7 |      3 |        5 | widget   |
|         8 |      6 |        8 | scrogget |
|         9 |     12 |        5 | snap     |
|        10 |      5 |        8 | widget   |
|        11 |     64 |        5 | scrogget |
|        12 |      4 |       30 | snap     |
|        13 |      5 |       64 | widget   |
+-----------+--------+----------+----------+

The query and results underlying the scatter chart look like this:

mysql> SELECT    sum(amount) AS "amount", sum(quantity) AS "quantity", item AS "item"   FROM invoice group by item;
+--------+----------+----------+
| amount | quantity | item     |
+--------+----------+----------+
|    167 |       28 | scrogget |
|     84 |       44 | snap     |
|    136 |      212 | widget   |

4. Example Pie Chart - showing product income proportionally

this takes just 1.06!

2 - Data Table

A Datable has similarities with a Listsing , in that each row in the table represents a record and is selectable.

How to create a datatable

It is straightforward to create a datatable.

• Choose which kinds of records - which object type - you want to present
• Select the fields you want to be in the table
• Choose number and date formatting
• Choose which column to sort by

this takes just 1.49!

Adding Footer Calculations

It is possible to add Footer Calculations to the table.

Footer calculations are one or more rows of calculations, like this

The first row is an aggregate calculation based on a specific numerical column on the table, and then subsequent rows are calculations based on this figure.

So here, as in Process, we use symbolic names to refer to values.

How to configure a footer calculation

Step 1 : do the main calculation

First you choose

1. a column you have added to the table which contains numbers (i.e. represents a number field)
2. an aggregate calculation. One of:

• count
• sum total
• average
• maximum
• minimum

3. symbolic name for the value which is being calculated

Subsequent Steps : calculations making use of named values

Now you can add as many steps as you want.

At each step, you can refer to values by their symbolic names, and use them in new calculations.

Footer Calculation Example

Suppose we had chosen to calculate a “sum total” of a column represent an invoice amount, and suppose we had introduced the symbolic name subtotal for the amount calculated.

Then we could add a second calculated value, let us use the symbolic name tax

by providing expressions where you can use the name of the aggregate value as variable

e.g. we could achieve the above example by choosing to calculate the Sum of a column and give it the value name 'sub' , then we could define a second value to represent 10% of the Sum (maybe call it 'tax') by giving the expression

           (sub * 0.1) 

Then we could define a third value (maybe call it 'total') like this:
‘(sub + tax)’ For each value, you provide a label which is what the user sees next to the value in the column

this takes just 1.26!

Display Modes

There are two different ways of presenting the data to the user.

One, suggested by the name of this component, is to present the data as a table.

The second, is to use the configuration possibilities to calculate a number you want to highlight, and then present that calculation, without the accompnaying table, perhaps on its own.

1. Default - as table

2. Calculation highlight mode

You can compose such a “highlight” with together with other components in a Container Component