Creating a Bar Chart

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.

The data used on this page is available from the PhixFlow Learning Centre.

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. In the Basics Settings section, under Display Type, select Bar Chart (Horizontal) or Bar Chart (Stacked) 

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  List Tables 
  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  Attributes
  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