Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
This page is for data modellers who want to display data on a screen in a pie chart.
Overview
PhixFlow can display any Table data as a pie chart on GUI screens. This page will show you how to add data as a pie chart to any screen. It will go through a worked example of creating a pie chart of companies and their various industries.
Table of Contents |
---|
Creating a Company Industry Pie Chart
Once you have a screen it is simple to add any data to it. To add data:
- Click
Insert excerpt _table_list _table_list nopanel true - Drag and drop the desired table onto the screen. In this instance, the Contacts table is dragged onto a screen.
- PhixFlow then asks how to display the data using:
- Click Pie Chart
- The attribute picker should then appear. Drag Industry to Label Attribute and Count() to Data Attribute. This is counting the number of companies per industry.
Relational attributes
For more information on adding relational attributes, see Creating a Grid.
Filtering
The data in displayed on the pie chart can be filtered in the following ways
Filter | Location | Link | Reason to use | ||
---|---|---|---|---|---|
Default Filter | View Editor | Filter | Default filters can be cleared by the user on the front end. Use a default filter when users are allowed to remove the filter to view all the data. If a default filter has been applied pie charts are marked with will remove the default filter. . Clicking on this icon and selecting Clear Applied FilterE.g. A pie chart displaying a list of companies has an Active boolean attribute. The default filter only displays active companies, but a user can clear this filter at any time to view all companies. | ||
Background Filter | View Editor | Filter | Background filters cannot be cleared by the user on the front end. Use a background filter to always filter any instance of the view by the parameters provided. Views can be reused by multiple data components. Using a background filter will filter all components which are backed by this view. | ||
Background Filter Rules | Grid Component Editor | Filter Rule | Background filter rules cannot be cleared by the user on the front end. They appear on the data component instead of the backing view so only applies to that component. Rules can be added to each filter to only apply in certain contexts. E.g. A button is clicked to show the data for a selected number of companies. The background filter only applies when companies are selected in another view using the expression
|
Styles and formatting
Pie charts can be formatted on the backing view:
This page is for data modellers who want to display data on a screen in a grid.
Overview
PhixFlow can display any Table data as a grid on GUI screens. This page will show you how to add data as a grid to any screen. It will go through a worked example of creating a grid of employees from various companies.
Creating an Employees Grid
Once you have a screen created it is simple to add any data to it. To add data:
- Click List Tables
- Drag and drop the desired table onto the screen. In this instance, the Employees table is dragged onto a screen.
- PhixFlow then asks how to display the data using:
- Click Grid
- The attribute picker should then appear. Drag and drop the attributes to display directly onto the grid.
Relational Attributes
The Employees table has a relationship with a Company table. See the below ERD.
Each employee has a company ID associated to it and is stored in a foreign key attribute, Company. This attribute is linked to the primary key (id_1) of the Companies table. The Companies table also has a display name attribute (CompanyName). This is the attribute that is displayed on the front end when adding a foreign key to any data bound component. For more information on ERD diagrams and relational views, see Entity Relationship Diagrams.
Adding foreign key attributes
When a foreign key, e.g. Company, is added to the grid PhixFlow does the following automatically
- adds the foreign key (Company) from the primary table (Employees),
- adds the display name attribute (CompanyName) from the related table (Companies).
This attribute is marked with , - hides the foreign key.
Adding relational attributes from a many:1 relationship
On the above grid the user also wants to display the companies address on the same grid. This data is stored on the Company table and can be accessed using the relationship. To add the company address
- Right click on the grid and click Show attributes for 'Employees'
- Click the related table Companies(Company)
- Drag and drop the attribute Address onto the grid.
This attribute is marked with
Adding relational attributes from a 1:many relationship
The user creates another screen to display the company data and wants to display the number of employees for that company using their 1:many relationship. Using an attribute from a 1:many relationship causes aggregation of the data. The most simple case is to use the count() attribute. To add a relational attribute from a 1:many relationship
- Right click on the grid and click Show attributes for 'Companies'
- Click the related table Employees(Company)
- Drag and drop the attribute Count() onto the grid.
This attribute is marked with . It is counting all the records on the Employees table which have that company as its foreign key value. - Rename the attribute using the label to Number of Employees
todo- redo GIF when Count() is available
Adding any other attribute on the table will also cause aggregation. A default aggregate function is added to the attribute added. PhixFlow defaults this to the following:
Count
Making grids editable
Marking columns as editable
By default all grid attributes are read only. Grids can be made editable by
- Click on the attribute column header to open its property editor
- Open Grid Settings
Untick Read Only
Strings, Bigstrings, Integers, Floats and Decimals allow users to type to change its value
Dates and Datetimes have a date picker to change its value
Display name attributes will automatically appear as a drop down. Selecting a different value, e.g. Company, will automatically update the ID stored in the foreign key attribute
Saving data
Users can then click any value to edit it. To save changes to editable attributes
- Right click on a grid and Show the view configuration
- Open Advanced
- Tick Auto Save
This will automatically save any changes made to the grid. An action can be added as a save action below this field if required.
Drop downs
Any attribute can have a drop down added for a user to select a value. See View Attribute.
Filtering and Sorting
The data in the grid can be automatically sorted by adding a default sort order on the backing view. For more information on sort orders see Sort Order.
The default sort order can be overwritten at any time by a user by right clicking on a column header and clicking Sort Ascending or Sort Descending.
The data in displayed on the grid can be filtered in the following ways
Filter | Location | Link | Reason to use | |
---|---|---|---|---|
Default Filter | View Editor | Filter | Default filters can be cleared by the user on the front end. Use a default filter when users are allowed to remove the filter to view all the data. If a default filter has been applied grids are marked with . Clicking on this icon and selecting Clear Applied Filter will remove the default filter. E.g. A grid displaying a list of employees has an Active boolean attribute. The default filter only displays active employees, but a user can clear this filter at any time to view all employees. | |
Background Filter | View Editor | Filter | Background filters cannot be cleared by the user on the front end. Use a background filter to always filter any instance of the view by the parameters provided. Views can be reused by multiple data components. Using a background filter will filter all components which are backed by this view. | |
Background Filter Rules | Grid Component Editor | Filter Rule | Background filter rules cannot be cleared by the user on the front end. They appear on the data component instead of the backing view so only applies to that component. Rules can be added to each filter to only apply in certain contexts. E.g. A button is clicked to show all employees for company X. This sets a hidden attribute to true. The background filter only applies when this hidden attribute is marked as true. | |
Column Filter Pickers | Grid Column Headers |
Styles and Formatting
Pie charts can be styled and formatting on the backing view. For more information see View.
Style | Location | Description and use cases |
---|---|---|
Change pie chart colours using Colour Map | Backing View > Chart Layout Can be used to assign colours to particular values. | See Colour Map |
Change Number Formats | Backing View > Chart Layout. |
|
Change Chart Styles | Backing View > Styles Tab |
|
Change legend position/visibility | Backing View > Chart Layout. |
|
Adding Actions
Actions can be added to grids in three locations
- as a double-click action for the whole chart
- as a double-click action against an attribute I dont think this should be an option
- as a drop target. See Drag Types and Drop Targets
To add an action as a double-click action
- Right click on a grid to Show the View Configuration
- Open the Actions tab
- On Double Click Action select either Table Action or Actionflow as an action type
- Select or create the appropriate action. See Configuring Actions.
Remove section
To add an action against an attribute
- Right click on a grid to Show the View Configuration
- Double-click on the view attribute to add an action to
- On Double Click Action select either Table Action or Actionflow as an action type.
- Select or create the appropriate action. See Configuring Actions.
- Optionally set the following
Option | Description |
---|---|
Always Show Action Icon | Tick to always display the action icon in read-only grid cells. The user can click anywhere in the cell to run the action. Untick to only display the action when the cell is in focus. |
Hide the Input Field | Tick to hide the input field and to display the action icon in the column. Untick to display the input field in the column. |
Hide the Action Icon | Tick to hide the action icon. The user can run the action by clicking anywhere in the cell. Do not tick this option for editable columns. Untick to display the action icon in the column. |
Action Icon Style | The style applied to the action icon. If no style is set, PhixFlow uses a default cog icon . |
To add an action to drop target
- Right click on a grid to Show the View Configuration
- Open the Actions tab
- Open Drop Targets and click Add New
- Provide a Name
- Select the appropriate Drag Type. If unfamiliar, see Drag Types and Drop Targets
- On Drop Action select either Table Action or Actionflow as an action type.
- Select or create the appropriate action. See Configuring Actions.