10. Charts and Graphs

Owned by Anthony George
Last updated: May 25, 2023 by Zoe Baldwin
3 min read


Charts and Graphs

PhixFlow has the ability to present data in charts and graphs. In this chapter we will add an additional tile to house our charts, then add a pie chart to show a breakdown of industries and a bar chart to show customers onboarded over time. To find out more about this topic see Creating Dashboards and Reports.

Add a Tile for the New Content

  1. From the palette, drag the tile Collapsible (Horizontal) onto the screen.
    1. Name, Charts.
  2. Use the Layers to move the tile to be the first tile in Tile Container.
  3. This tile is a special expanding tile, to get it to expand so we can place content inside it we must first lock the screen and click the chevron as illustrated here:
  4. Now  Unlock the screen.
  5. Click on Header 1, and in its properties set Default Value to Companies Dashboard.
  6. Optionally we can move the chevron that opens and closes the tile to the right if we prefer.
    1. In the layers drag it below expanding area.

Adding a Pie Chart

  1. From the toolbar click  Table.
  2. Drag Companies onto the new Charts tile.
  3. Select Pie Chart
    1. Close the Attributes Selector.
    2. Right-click the chart and select Show the View Configuration.
    3. Set the Name to be Industries.
    4. In the View Attributes section, click  Attributes.
    5. Drag the Count and Industry into the View Attribute area. Close Available Attributes.
      1. Count is a special attribute that produces an aggregate of all the other attribute combinations. See Generating Counts and Other Statistics.
    6. We need to tell PhixFlow how to use these attributes.
      1. Double-click Count.
        1. In Role, select Data Point.
        2. Save your changes.
      2. Double-click Industry.
        1. In Role, select Horizontal Axis Attribute.
  4. Save all of your changes.
  5. The pie chart is complete. The screen must be locked to see the pie chart.

To learn more about Pie Charts see Creating a Pie Chart.

Check Point

Unlocked your screen should look similar to the one below:

Colour Maps

Colour maps are used to map colours to specific values in our data. The colour map is associated with a chart, which in turn applies these colours where it finds the specific values from the colour map. This is useful if you want your chart to use specific colours such as corporate logo colours.

  1. Open the repository and expand your application.
  2. In the Colour Maps section click 
    1. Name, Industry
    2. Save your changes, this is necessary to add our Colour Map Entries.
    3. Click  next to Colour Map Entries.
      1. Name, Manufacturing.
      2. Colour, #04E6cb
        1. This colour will be applied where we see Manufacturing in our data.
      3. Save your change.
    4. Create Colour Map Entries for:
      1. Finance
        1. Name, Finance
        2. Colour, #cccccc
      2. Software
        1. Name, Software Development
        2. Colour, #777777
      3. Telecoms
        1. Name, Telecoms 
        2. Colour, #adb1b3
  3. Save all your changes. Note that these values are case sensitive.
  4. Open the View Configuration for the Industries pie chart.
    1. In the Chart Layout Section, from the Colour Map drop down, select Industry
  5. Save all changes and lock your screen.
  6. The new colours will now appear on your chart.

To learn more about colour maps and how to apply them, see Colour Map.

Adding a Bar Chart

  1. From the toolbar click  Table.
  2. Drag Companies onto the Charts tile.
  3. Select Bar Chart (vertical).
    1. Close the Attributes selector.
    2. Right-click the chart and select Show the View Configuration.
    3. Set the Name to be Status.
    4. In the View Attributes section, click  Attributes.
    5. Drag the Count and Status into the View Attribute area. Close Available Attributes.
    6. We need to tell PhixFlow how to use these attributes:
      1. Double-click Count.
        1. In Role, select Data Point.
        2. Save your changes.
      2. Double-click Status.
        1. In Role, select Horizontal Axis Attribute.
      3. Save all of your changes.
  4. Save all changes.

To learn more about setting up and configuring bar charts see Creating a Bar Chart.

Check Point

When your screen is locked or you are in Application Mode, the screen will now look similar to the following:

Additional Charts and Graphs

We have set up two common types in our example, however, PhixFlow supports a number of other types of data presentations. For more information see Creating Dashboards and Reports.