Charts and Graphs

PhixFlow has the ability to generate present data in charts and graphs to display data. In this chapter we will add an additional tile to display our chart data and 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. In From the palette.Drag the Tile, Expanding , drag the tile Collapsible (Horizontal) onto the screen.
   1. Name
   it
   1. , Charts.
2. Use the layer section Layers to move the tile to be the first tile in Tile Container.
3. This tile has is a special expanding areatile, to get it to open expand so we can place content inside it we must first lock the screen and then click the chevron as illustrated here:
   1. Image Modified
4. Now unlock the

   Insert excerpt
   _unlock _unlock nopanel true

    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 our area 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

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   .
2. Drag Companies onto the new Charts tile.
3. Select Pie Chart
   1. Close the Attributes pickerSelector.
   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.
      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 to with a chart, which in turn applies these colours where it finds the the specific  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 

   Insert excerpt
   _addIcon _addIcon nopanel true

   1. Name, Industry
   2. Save your changes, this is necessary to add our Colour Map Entries.
   3. 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.
   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 value values are case sensitive.
4. Open the View Configuration for the Industries pie chart.
   1. In the Chart Layout Section.Select Industry , 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.
7. 

To learn more about colour maps ad and 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 (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 

      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 ActionsDrag the Count and Status into the View Attribute area. Close Available Attributes.
   2. 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.
6. 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:

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.