Overview

This page will show you how to add data as bar chart to any screen. It will go through a worked example creating a bar chart to display the number of students across intake years in a local school.

Bar Charts

There are 3 types of bar charts

• Bar Chart
• Bar Chart (Horizontal)
• Bar Chart (Stacked). Multiple series only.

To change the type of bar chart

1. Right click on a chart and Show the view configuration
2. Open the Basics section
3. Select Bar Chart, Bar Chart (Horizontal) or Bar Chart (Stacked) under Display Type

Creating a Bar Chart

A teacher wants to display the number of students per intake year as a bar chart. To add a bar chart:

1. Click 

   Insert excerpt
   _table_list _table_list nopanel true

    

2. Drag and drop the desired table onto the screen. In this instance, the School_Students table is dragged onto the screen.

3. PhixFlow then asks how to display the data using:
4. Click Bar Chart. 
5. The attribute picker will then appear. Drag IntakeYear to X Attributes and Count() to Y Attributes. 

Multiple Series

Bar Charts can display multiple series on the same graph. For example, the teacher might want to show the proportion of students of each gender on their bar chart. To do this

1. Right click on the bar chart and Show view configuration
2. Open the attribute picker by clicking 

   Insert excerpt
   _attributes _attributes nopanel true

3. Drag the attribute Gender into the Series group
4. The IntakeYear is now grouped by gender.

It is possible to show this data as a stacked bar chart and allow users to toggle between the two.

1. Right click on the bar chart and Show view configuration
2. Open the section Chart Layout
3. Tick Show Controls

Users will then have the option to toggle between the grouped or stacked view. 

To permanently set the bar chart to a stacked view, change the display type to Bar Chart (Stacked).

Increasing the space between groups

To increase the space between the bar chart groups

1. Right click on the bar chart and Show view configuration
2. Open the section Chart Layout
3. For small spacing set Group Spacing to 0.1. Increase this value to increase the spacing.

More Information

• Filtering and Sorting Grids and Charts
• Formatting and Styling Grids and Charts
• Using Relational Views
• Actions on Grids and Charts
• For a complete list of view properties and their functions see View.