Charts and Graphs

PhixFlow has the ability to generate charts and graphs to display data. In this chapter we will add an additional tile to display our chart data and then add a pie chart to show industries and a bar chart to show customers onboarded over time.

Add a Tile for the New Content

1. In the palette.
2. Drag the Tile, Expanding (Horizontal) onto the screen.
3. Name it Charts.
4. Use the layer section to move the tile to be the first tile.
5. This tile has a special expanding area, to get it to open so we can place content inside it we must first lock the screen and then click the chevron:
6. 
7. Now unlock the screen.
8. Click on Header 1, and in its properties set Default Value to Companies Dashboard.
9. Optionally we can move the chevron that opens and closes our area to the right if we prefer.
   1. In the layers drag it below expanding area.

Adding a Pie Chart

1. From the toolbar click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   .
2. Drag Companies onto the new Charts tile.
3. Select Pie Chart
   1. Close the Attributes picker.
   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 

      Insert excerpt
      _attributes _attributes nopanel true

      .
   5. Drag the Count and Industry into the View Attribute area. Close Available Attributes.
   6. We need to tell PhixFlow how to use these attributes.
      1. Double-click Count.
      2. In Role, select Data Point.
      3. Save your changes.
      4. Double-click Industry.
      5. In Role, select Horizontal Axis Attribute.
4. Save all of your changes.

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 to a chart, which in turn applies these colours where it finds the the specific  values from the colour map.

1. Open the repository and expand your application.
2. In the Colour Maps section click 

   Insert excerpt
   _addIcon _addIcon nopanel true

3. Name, Industry
4. Save your changes, this is necessary to add our Colour Map Entries.
5. Click 

   Insert excerpt
   _addIcon _addIcon nopanel true

    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.
6. 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
7. Save all your changes. Note that these value are case sensitive.
8. Open the View Configuration for the Industries pie chart.
   1. In the Chart Layout Section.
   2. Select Industry from Colour Map drop down.
9. Save all changes and lock your screen.
10. The new colours will now appear on your chart.
11. 

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

Adding a Bar Chart

It can be very useful to find a layout, component or container. There are two ways to do this:

Using Layers

The Layers pane is expandable from the left of the screen canvas. Select an item:

• on the canvas to highlight it in the Layers pane
• in the Layouts pane to highlight it on the canvas.

1. From the toolbar click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   .
2. Drag Companies onto the Charts tile.
3. Select Bar Chart (horizontal).
   1. Close the Attributes picker.
   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 

      Insert excerpt
      _

1. 1. attributes _

1. 1. attributes nopanel true

      .

Using Find in Repository

Image Removed

Styles 

explanation

Style Hierarchy

1. Application Styles
2. Shared Style
3. Local Styles
4. Formatting Rules
5. Overriding Styles Best Practice
6. Clearing Styles

Creating Screens from the Home page

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions
   2. Drag the Count and Status into the View Attribute area. Close Available Attributes.
   3. We need to tell PhixFlow how to use these attributes.
      1. Double-click Count.
      2. In Role, select Data Point.
      3. Save your changes.
      4. Double-click Status.
      5. In Role, select Horizontal Axis Attribute.
6. Save all of your changes.

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

Check Point

When locked or in App Mode, the screen will now look similar to the following:

Image Added

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.