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 Connectorwidth800urlhttps://www.youtube.com/watch?v=qOS22GOeyyAheight500

To recap on the steps in the video:

1. Create a Screen
   1. Click on Screen from the application home screen.
   2. Click 

      Insert excerpt
      _add _add nopanel true

      .
   1. Set the screen name to: Debt levels by payment means
   2. Select a Template e.g. Tile No ButtonButtons.
   3. Click the Create Screen button.
   4. A new screen will open based on your template.
2. Now create a new view on the screen
   1. From the screen's toolbar, click

      Insert excerpt
      _tableOnly _tableOnly nopanel true

      s.
   2. Drag the table Overall debt levels onto the screen.
   3. Choose a Line Chart view.
   4. This creates a view - configuration options for the view show in the screen; the configuration form for the view also pops up in the repositoryon the right.
   5. The available attributes Available Attributes box will be shown.
      1. Attributes Attributes can also be displayed using the the view configuration properties form by clicking by clicking 

         Insert excerpt
         _attributes_show _attributes_show nopanel true

          in the toolbar.

   6. 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 is Data Point.

      
      

   7. To see the chart, switch to App mode,

      Insert excerpt
      _app_mode _app_mode nopanel true

      . To update the configuration chart again, go back into Design mode,

      Insert excerpt
      _design_mode _design_mode nopanel true

      .

   8. To complete the configurationsetup, we will label the axes. In the screen, right-click on the view (the line chart) and select 

      Insert excerpt
      _view_show _view_show nopanel true

       configuration.

   9. In the view configuration formsettings on the right:

      1. Click 

         Insert excerpt
         _save _save nopanel true

          to save your changes. This is required in order to update the options below.
      2. Update the name of the view to Debt levels by payment means

      3. Set the Display Type to Line Chart (time) and enter .

      4. Scroll down to the Chart Layout section and enter the following settings:

         Field	Value
         Show Legend tick	Insert excerpt _toggle_on _toggle_on nopanel true
         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

         
         

   10. Click 

       Insert excerpt
       _finish _finish nopanel true

       to  to save your changes and close the window.
   11. Go into

       Insert excerpt
       _app_mode _app_mode nopanel true

        to see the chart.

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 We can exclude this outlier and generate a more useful graph. Under Vertical Axis, set Maximum Value to 30000.

1. Switch back to

   Insert excerpt
   _design_mode _design_mode nopanel true

    and

   Insert excerpt
   _view_show _view_show nopanel true

    configuration
2. In the Chart Layout section, add a Maximum Value to the Vertical Axis of 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.

1. 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 Vertical Axis (Y-Axis ) starting at zero:

1. Set the Under Vertical Axis, set the Minimum Value to 0
2. Tick Fixed Scale: 

   Insert excerpt
   _toggle_on _toggle_on nopanel true

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 Vertical Axis (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.

1. Create a screen called Debt levels by payment means 2
2. Select a Template e.g. Tile No Buttons.
3. Now create a new view on the screen.
4. From the screen's toolbar, click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   s.
5. Drag the table Overall debt levels onto the screen.
6. Select the view type Barcharttype 

   Insert excerpt
   _chart_bar_vertical _chart_bar_vertical nopanel true

   .

7. Drag attributes into the configuration options on in the view as follows:

   SERIES	PaymentMeans
   Y ATTRIBUTES	DebtLevel
   X ATTRIBUTE	CalculationDate

   Open the view configuration

   
   

8. Right-click and 

   Insert excerpt
   _view_show _view_show nopanel true

    configuration.
   1. Update the name of the view to Debt levels by payment means 2
   2. Set the Display Type to Barchart: Bar Chart (vertical)

   3. Update the following settings:

      Show Legendtick	Insert excerpt _toggle_on _toggle_on nopanel true
      Horizontal Axis Title	Calculation Date
      Label Angle	Sloping
      Vertical Axis Title	Debt level

   Save your changes the view configuration form
   1. 
      

9. Insert excerpt
   _finish _finish nopanel true

    the settings.

10. Go into

    Insert excerpt
    _app_mode _app_mode nopanel true

     to view the results.

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:

1. Create a screen called Debt totals by payment means.
2. Select a Template e.g. Tile No Buttons.
3. From the screen's toolbar, click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   s.
4. Drag the table Overall debt levels onto the screen.
5. Select the view type Grid

   Insert excerpt
   _grid _grid nopanel true

   .
6. Drag the following attributes onto the view:
   • PaymentMeans
   • DebtLevel
   • Count()
7. We want to group the results by PaymentMeans, and for each value of this, sum the DebtLevel:
   1. Open the view configuration form.Right-click on the grid and select

      Insert excerpt
      _view_show _view_show nopanel true

       configuration. 
   2. Update the Name of the view to Debt totals by payment means
   3. 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

        .
8. Press 

   Insert excerpt
   _finish _finish nopanel true

    on the main view configuration form View settings to save your changes.

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: