Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
By the end of this exercise you will be able to:
- Create a line chart (time series)
- Create a bar chart
- Create a pie chart
- Create an aggregate view
Note in this exercise that you set Series, Data Point attributes and Horizontal Axis Attributes by dragging table attributes into the boxes against these fields.
Create a line chart (time series)
You will create a line chart, plotted over time, of debt levels broken down by payment means. Creating a line chart is illustrated by the following video:
Widget Connector | ||||||
---|---|---|---|---|---|---|
|
To recap on the steps in the video:
- Create a Screen
- Click on Screen from the application home screen.
- Click
.Insert excerpt _add _add nopanel true
- Set the screen name to:
Debt levels by payment means
- Select a Template e.g. Tile No ButtonButtons.
- Click the Create Screen button.
- A new screen will open based on your template.
- Now create a new view on the screen
- From the screen's toolbar click
Insert excerpt _tableOnly _tableOnly nopanel true - Drag the table
Overall debt levels
onto the screen.
- Choose a Line Chart view.
- This creates a view - configuration options for the view show in the screen; the configuration form for the view also pops up in the repository.
- The available attributes will be shown.
- Attributes can also be displayed using the the view configuration properties form by clicking
.Insert excerpt _attributes_show _attributes_show nopanel true
- Attributes can also be displayed using the the view configuration properties form by clicking
Drag attributes into the configuration options on in the view as follows:
Field Attribute SERIES
PaymentMeans
Y ATTRIBUTES DebtLevel X ATTRIBUTE CalculationDate Notice that as you drag attributes across, they are added to the list of view attributes, with the appropriate role set. For
DebtLevel
(Y axis), the correct role isData Point
.To see the chart, switch to App mode,
. To update the configuration again, go back into Design mode,Insert excerpt _app_mode _app_mode nopanel true
.Insert excerpt _design_mode _design_mode nopanel true To complete the configuration, we will label the axes. In the screen, right-click on the view and select
configuration.Insert excerpt _view_show _view_show nopanel true In the view configuration form:
- Click
to save your changes. This is required in order to update the options below.Insert excerpt _save _save nopanel true - Update the name of the view to
Debt levels by payment means
Set the Display Type to Line Chart (time) and enter the following settings:
Field Value Show Legend
tick Horizontal Axis Title
Calculation Date Label angle
Horizontal Primary Axis Unit
Day
Primary Axis Format
Day in month
Secondary Axis Unit
Month
Secondary Axis Format
January, February
Vertical Axis Title
Debt level
- Click
- Click
to save your changes and close the window.Insert excerpt _finish _finish nopanel true - Go into
to see the chart.Insert excerpt _app_mode _app_mode nopanel true
- From the screen's toolbar click
Setting an upper limit
There is one data point in the data which is much greater than all the others, so movements in the levels of debt cannot be seen. Add a maximum value in the chart configuration to exclude this outlier and generate a more useful graph. Under Vertical Axis, set Maximum Value to 30000.
Then view the chart to see the results.
Setting a lower limit
You decide you are only interested if there is a debt level of more than 5,000. Under Vertical Axis, set Minimum Value to 5000.
Then view the chart to see the results.
Fixing the scale
You now decide that you want to show the graph always including the Y-Axis starting at zero:
- Set the Minimum Value to 0
- Tick Fixed Scale
Then view the chart to see the results.
Note: Fixed Scale is relevant when the graph data changes. The Minimum Value and Maximum will always be plotted on the Y-Axis, even when the largest data value is lower than the Maximum Value and the lowest data value is larger than the Minimum Value.
Create a bar chart
Now you will create a graph of the same data, but this time using a bar chart.
- Create a screen called
Debt levels by payment means 2
- Now create a new view on the screen.
- From the screen's toolbar click
.Insert excerpt _tableOnly _tableOnly nopanel true - Drag the table
Overall debt levels
onto the screen. - Select the view type Barchart.
Drag attributes into the configuration options on in the view as:
SERIES PaymentMeans Y ATTRIBUTES DebtLevel X ATTRIBUTE CalculationDate - Open the view configuration
- Update the name of the view to
Debt levels by payment means 2
- Set the Display Type to Barchart
Update the following settings:
Show Legend
tick
Horizontal Axis Title
Calculation Date
Label Angle
Sloping
Vertical Axis Title
Debt level
- Update the name of the view to
Save your changes the view configuration form.
Go into
to view the results.Insert excerpt _app_mode _app_mode nopanel true
The view looks very cluttered – but we will filter this later to make this more useful.
Create an aggregate grid view
Now you will create a grid view on the data in Overall Debt Levels
, but to show aggregated totals by payment method:
- Create a screen called
Debt totals by payment means.
- From the screen's toolbar click
.Insert excerpt _tableOnly _tableOnly nopanel true - Drag the table
Overall debt levels
onto the screen. - Select the view type Grid.
- Drag the following attributes onto the view:
PaymentMeans
DebtLevel
- Count()
- We want to group the results by
PaymentMeans
, and for each value of this, sum theDebtLevel
:- Open the view configuration form.
- Update the Name of the view to
Debt totals by payment means
- Double double-click on
DebtLevel
in the View Attributes list. - In the view attribute configuration form:
- Set the Name to
TotalDebtLevel
- Select the Aggregate Function: Sum
- Press
.Insert excerpt _finish _finish nopanel true
- Set the Name to
- Press
on the main view configuration form to save your changes.Insert excerpt _finish _finish nopanel true
You should now see an aggregate view with an entry per Payment Means - 3 rows in total - with, for each, a sum of entries for that Payment Means, and a total debt level.
Create a pie chart
Now you will create a further chart on the table Overall Debt Levels
, to give an overview of proportions of debt by various payment means. Create a new screen and view with the settings:
Name | Debt overview by payment means |
Display Type | Pie Chart |
DATA ATTRIBUTE |
|
LABEL ATTRIBUTE |
|
Show Legend | tick |
Show Values on Charts | tick |