PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
This content comes from an automatic translation.
  • This lesson will teach you the following concepts
  • NOTE2_1
  • Displaying data in a Chart control
  • Selecting the data that will be displayed in the Chart control
  • The save window is displayed
  • change the type of chart
  • In the "General" tab, select the "Chart" tab pane and click the "New" button
  • the years, the quarters and the months
Lesson 4.8. Statistics: Chart and Pivot Table controls
This lesson will teach you the following concepts
  • Displaying data in a chart.
  • Creating summary tables via the Pivot Table control.

Lesson duration: Estimated time
Previous LessonTable of contentsNext Lesson
NOTE2_1
Overview. The presentation of statistics or summary tables is often required in a management application
  • This type of presentation can be used for example to follow:
  • the evolution of orders in time,
  • the evolution of turnover,
  • the evolution of stocks,
...
Any executive manager wants to get this information.. WINDEV proposes several controls allowing you to easily include this information in your applications
  • Two specific controls will be used in this lesson:
  • the Chart control.
the Pivot Table control.

Answer

If you did not create the windows in the previous lessons, you can follow this lesson by opening a corrected project: in WINDEV's home page (Ctrl + <), click "Tutorial" and select "Full application (with windows)".
A full corrected application project is also available: in WINDEV's home page (Ctrl + <), click "Tutorial" and select "Full application (Answer)".
Displaying data in a Chart control
To handle the Chart control in real conditions, we are going to create a Chart control displaying the status of sales in the "WD Full Application" application.
First of all, we are going to create a query used to select the data that will be displayed in the Chart control.

Selecting the data that will be displayed in the Chart control

To create our chart, we want to get the sum of orders by date.
We are now going to create a query used to perform a sum. Indeed, we are going to calculate the total amount of orders (TotalIOT item in the Orders data file).
  • We are going to calculate the total amount of all orders per date (the Turnover per date).
    1. Create a new query:
    2. Create an element: The element creation window appears
    3. click "Query".. We are going to create a select query. Select the "Select" option
    4. Go to the next step.
    5. The description window of query is displayed.
      • Add the items Orders.Date and Orders.TotalIOT to the query:
      • On the left, expand the "Orders" data file.
      • Double-click the Date item then the TotalIOT item.
  • The two items appear in the middle of the screen (in the "List of elements in your query" area).
    1. To calculate the sum of values of "Orders.TotalIOT":
    2. Select the "Orders.TotalIOT" item in the middle.. In the "Actions", on the right, select "Sum"
    3. The sum description window appears.
Query - Sum description window

Validate the sum description

The sum of "TotalIOT" was added into the list of query result.. Remark
  • You will notice that the query editor of WINDEV creates the queries in everyday's language (and also in SQL language)
    1. This allows you to check the purpose of your query.
    2. Query description in common language. We are now going to group the data by year and to sort it:
    3. Select the "Orders.Date" item in the middle.
    4. In the "Actions", on the right, click "Year, month" and select "Year"
    5. A window appears allowing you to create the Year item
      • Sort by year
      • Validate this window ("OK").
  • The "Year" item is displayed in the middle of query description.. Select the "Year" item and define the sort:
    1. Display the popup menu of "Year" item.
    2. Select "Sort item .. Sort in ascending order"..
    3. An arrow indicating the sort appears in the query description..
    4. The query is created. We are going to give it a name and to save it..
    5. At the top of the query description window, enter: the name "QRY_SalesEvolutions".
    6. the caption "Sum of orders by date"

The save window is displayed

Validate the proposed information
  • The graphic query representation is as follows
    1. Graphic representation of the query: Click to run the query test.
    2. Test an element. NOTE3_3
    3. Creating the Chart control
    4. We are going to include the Chart control in a new tab pane of WIN_Menu.:
    5. To create a new tab pane in "WIN_Menu":
      • Display "WIN_Menu" in the window editor (if necessary).. Double-click the Tab control.
      • the control description window appears.
      • In the "General" tab, select the "Finding orders" tab pane and click the "New" button.
      • A new tab pane appears.
      • Select the new tab pane (named "Pane 4").
    6. In the right section of the screen, type the caption of tab pane
    7. "Chart".
  • In the right section of the screen, select an image in the image catalog:
    1. Click the button on the right of "Image" control
    2. Select "Catalog" from the popup menu that is displayed. Menu for images
    3. The image catalog window appears.. Type "Chart" in the search control. Start the search by clicking the button with the magnifier.
    4. Select for example, and validate the different screens that appear.. Chart
    5. Validate the description window of Tab control.
      • A new tab pane appears in the window.: To create the Chart control:
      • In the "WIN_Menu" window, select the "Chart" tab pane if necessary.: On the "Creation" pane, in the "Graphic controls" group, click "Chart"
      • The control appears under the mouse cursor.. Click the "Chart" tab pane
    6. The Chart control creation wizard starts
    7. In the wizard, select a "Column" chart
      • Go to the next step of the wizard.: Chart control creation wizard
      • Type the chart parameters:: the title
      "Sales evolution".
    8. the legend
      • the chart has no legend.
        • the labels must be displayed:
        • Go to the next step.. Type the parameters of axes:
      • X-axis title: Year
        • Y-axis title
        • TO
        • Keep the default options and go to the next step.: We are now going to define the data source.
        • For the labels (values displayed at the bottom of chart, the years in our example):. the source corresponds to
      "Browsing a file or a query",
    9. the data corresponds to the Year item in the QRY_SalesEvolutions query. .
    10. Chart control data source: For the series (values displayed in the Chart control)
    11. the Chart control will display a single series corresponding to the total IOT calculated by the QRY_SalesEvolutions query.
    12. Double-click the "Sources of series" table..
    13. Type the caption: "Series 1".. The source corresponds to
      "Browsing a file or a query"

      The data corresponds to the "sum_TotalIOT" item in the QRY_SalesEvolutions query

      Chart control data source. Go to the next step.
      • No background image will be associated with the Chart control
      • Go to the next step
      • Give a name to the Chart control
    14. "CHART_SalesEvolutions" and validate the wizard.
The Chart control is automatically created in the editor.

Click to run the window test

Run the window test
  • Click the "Chart" tab pane to see the chart:
  • Viewing the graph in test mode: Remark
Automatic features of Chart control (AAF)
change the type of chart
save the chart,. print the chart, ...
  • End the test and go back to the editor.
    1. Example
    2. To master the use of a Chart control, don't forget to take a look at the examples supplied with WINDEV:: Unit example
    3. The Chart control. Training example
    4. WD Chart
    5. These examples are available from the WINDEV home page (Ctrl + <).: NOTE4
    6. NOTE4_1
      • Creating summary tables with the Pivot Table control. To handle the Pivot Table control in real conditions, we are going to create a Pivot Table control used to see the sales of products per country and per year in quantity and in turnover.
      • Like for the Chart control, we are going to create the Pivot Table control in a new tab pane of WIN_Menu.
      • Window containing a Pivot Table control
      • .
      • To create a new tab pane in "WIN_Menu":
    7. Display "WIN_Menu" in the window editor (if necessary).
    8. Double-click the Tab control

In the "General" tab, select the "Chart" tab pane and click the "New" button

  • A new tab pane appears.
    1. Select the new tab pane (named "Pane 5").
    2. In the right section of the screen, type the caption of tab pane. "Pivot Table".
    3. In the right section of the screen, select an image in the image catalog:. Click the button on the right of "Image" control
    4. Select "Catalog" from the popup menu that is displayed
    5. Image menu
      • The image catalog window appears.
      • In the search control, enter "Array".
      Start the search by clicking the button with the magnifier: Select for example, and validate the different screens that appear..
      Array
      • Validate the description window of Tab control.: The new tab pane appears in the window.
      • NOTE4_2: Creating the Pivot Table control
      To create a Pivot table control:.
      In "WIN_Menu", select the "Pivot Table" tab pane if necessary.
      • On the "Creation" pane, in the "Data" group, expand "Table and List Box" and select "Pivot Table (PVT)": The control appears under the mouse cursor.
      • Click the "Pivot Table" tab pane: The wizard for creating a Pivot Table control starts.. Go to the next step.
      Various information must be displayed in the cells:
    6. the total sales amount.. the quantity sold.. We are going to select the source data file in the wizard
    7. OrderLine: For the first information, select:. Display
    8. "The sum of".
    9. Source. "TotalIOT".
      • Click the "Add an additional value" button
      • For the second information, select:. Display
      "The sum of".
    10. Source. "Quantity"
    11. : Pivot Table control creation wizard
    12. Go to the next step.
    13. The years must be displayed in the column headers. On the left, expand the Orders data file and double-click the Date item. Go to the next step.
    14. Pivot Table control creation wizard

the years, the quarters and the months

  • .
    1. Pivot Table control creation wizard.
      Go to the next step.

      The products grouped by country must be displayed in the row headers

      In the left section:: expand the Customer data file and double-click the Country item.. expand the Product data file and double-click Caption
  • Pivot Table control creation wizard. Go to the next step.. In the following steps, the wizard proposes a link for each row header (Client.Country and Product.Label). Validate each proposed link by proceeding to the next step.
  • Give a name to the Pivot Table control
    1. PVT_Sales.
    2. Validate the wizard.. The Pivot Table control is automatically created in the window as well as a "Calculate" Button control
    3. This Button control will allow the user to calculate the data to display in the Pivot Table control: This Button control can be positioned anywhere in the window.. Save the window ( among the quick access buttons).
    4. Save the element
    5. NOTE4_3
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment