Diagram Tile Bar Graph
  • 24 Oct 2022
  • 3 Minutes to read
  • Dark
    Light

Diagram Tile Bar Graph

  • Dark
    Light

Article Summary

Overview

Diagram Tiles use a modified Flow Designer to create a Page/Dashboard Tile that can display information as charts or images on a Page. One of these charts is the Bars chart, which can be used to display information as a bar graph.


Adding a Bars Chart to a Diagram Tile

This example will show how to set up a bar graph using the Bars chart in the Diagram Tile Flow Designer. Other chart controls will have a similar process.

  1. Create a new Page and Dashboard.
  2. In the Page Designer, expand the Tiles section in the Toolbox tab, then select and move the Diagram Tile control into the workspace. 
  3. With the control selected, expand the DIAGRAM TILE section of the properties and select PICK DIAGRAM TILE FLOW.
  4. The Diagram Tile Designer will open. In the Toolbox, Expand the CHARTS section of the Toolbox and move the Bars control into the workspace. 

Bars Properties

Below is an overview of the settings found in the Properties panel for the Bars Chart.

Action Source

This setting determines if Actions can be initiated when this control is selected

SettingDescription
NoActionsPrevents actions from being run when the control is selected on a page.
FlowCauses the specified Flow to run when it is selected. 
Metric DefinitionCollects metrics when the chart is selected in a Diagram Tile. 

Advanced

SettingDescription
HeightSets the height of the chart. 
WidthSets the width of the chart. 
XSets the X location in the workspace that the control exists on. 
YSets the Y location in the workspace that the control exists on. 

Chart Setup 

ChartStyle

SettingDescription
SimpleSingleSeriesBar graph style involving only single bars. Uses only a list of Decmials as an input. 
SimpleDoubleSeriesBar graph style that groups two selected columns side by side. Uses two lists of Decimals as an input. 
MultipleSeriesBar graph style that allows for more complex bar charts to be created. Uses a list of Line Definitions as an input. 

SpecifyUpperBound

Creates a new input to specify the upper bound for the chart

Chart Setup - View

SettingDescription
Bar WidthSets the width of each bar displayed in the chart. 
OrientationAligns the Bars either horizontally or vertically depending on the selection. 
ShowGridProvides a grid for the chart. 
Show LabelDisplays the label for each field in the chart. 
Show ValueDisplays the Y values for the table. 
XAxisLabelSets the label for the X Axis. 
YAxisLabelSets the label for the Y Axis.

Configuration Defaults

SettingDescription
Background ColorSets the background color for the chart control. 
Border ColorSets the border color for the chart control. 
Border WidthDefines the border width for the chart control. 
ImageSets an image which will appear on the chart control. 
Z OrderDetermines if the selected control will be placed in front of another control. 
Font AttributesDefines the font used for the labels.
Outcome PathsCreates an outcome path on the Diagram Tile control. 

Creating Inputs for a Bars Chart

For this example, the Inputs section has only one required configuration needed. The only input is Series1, which is expecting a List of Decimals as input data. This example will output the total count accounts, and the count all active and inactive accounts for an environment.

  1. In the Diagram Tile Designer, select SETUP INPUT DATA.
  2. Define a list of Decimals as an input, then Save. 
  3. Select the Bars control. In the Properties panel, map the input to Series1 under the INPUTS section. 
  4. Under Chart Setup - View, define an X and Y axis label for the chart. Save and close the Diagram Tile Designer.
  5. Back in the Page Designer, select the Diagram Tile control so that the properties appear. 
  6. In the DIAGRAM TILE section, select the EDIT DIAGRAM TILE PAGE INPUT FLOW button that has appeared. 
  7. In the Flow Designer, under Database select the Fetch Entities step and expand the ENTITY FETCH DEFINITION section.
  8. Use the Type Name dropdown and find the Account data type. 
  9. Add a Rule Collection Filter step into the Flow. Configure this step to output the list of currently active accounts and inactive accounts
  10. On the End step, select Build Array for the ListofDecimals input.
  11. Click ADD to create new entries to the list.
    Use the count of the results returned from the Fetch Entities and Rule Collection Filter steps as inputs to the list.
  12. Save and close the Flow.
  13. In the Page Designer, select Preview. The bar graph should display the total number of accounts, and the number of active and inactive accounts.


For further information on Pages, visit the Decisions Forum.

Was this article helpful?