Chart

Chart presents common visualizations of numerical data

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!

Bar chart to show quantities of products sold, by product

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!

Line chart to show income grouped by week

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!

Scatter chart to show turnover and units sold per product together

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!

Pie chart to show turnover from products proportionally