Populate a Chart Using a Flow

New
  • Published on Dec 12, 2025
  • 8 minute(s) read
Prev Next

Project Download

The examples attached were developed to be instructional and were not developed as officially supported components. For more information or to engage our service team to develop fully supported, production-quality solutions, please contact services@decisions.com. Import the project below to a Decisions environment on v9.16 or later using the Importing/Exporting article.
Populate Chart Using a Flow-10102022-030409(1).zip

Overview

In some instances, data must be added to a Flow before it can accurately populate a Chart when added to a Report. Chart Page controls have a Chart Data Mode property that enables Charts to display data on a Page. The Use Flow option allows Users to fetch and filter data that will be displayed as a chart using a Flow. The Flow behavior cannot be changed if it was created from the Page Designer's Properties panel. This type of Flow Behavior will output a list of ChartRenderData. 

ChartRenderData consists of a single series of data for the chart. This allows Users to customize different series differently. Each series contains different pieces of the chart; for example, the slices on a Pie Chart are individually structured as the ChartDatum type. A series of ChartRenderData contains a list of ChartDatum. 

The ChartDatum type comprises several fields: Title, Label, and Display Label. These fields can all be mapped in and treated as the same value. The boolean value, Navigable, determines whether or not something can be drilled into when selected. The decimal value is the actual amount allotted to that piece of the chart. 

Users can populate a chart component on a Page using a Flow by selecting the Use Flow option under the Mode setting under Chart Data. The Use Flow option allows Users to fetch and filter data that will be shown on a chart.

Explanation

The Fetch Entities steps fetch Accounts by User Types of Person and Machine. The Subflow creates the series for the chart using ChartRenderData. 

Each individual ChartRenderData makes up one series of data for the Chart; this allows the user to customize different series differently. Each series contains different pieces of the Chart; for instance, the slices on a Pie Chart are individually structured as the ChartDatum type. A series of ChartRenderData contains a list of ChartDatum. In this ChartDatum type, there are several fields: Title, Label, and Display Label that can all be mapped in and treated as the same value. The boolean Navigable determines whether or not something can be drilled into when selected. The Value decimal is the actual amount allotted to that piece of the chart.

Steps

Setting up the Page

  1. In a Project, select CREATE PAGE. Choose a name for the Page and proceed to the Page Designer. 
  2. From the Page Designer, navigate to the Toolbox > Favorites section and drag a Pie Chart control to the workspace.
  3. On the Properties panel, navigate to CHART DATA > MODE and use the dropdown to select USE FLOW.  
  4. Name the Chart Data Flow and select CREATE again to create a new Flow.

Creating the ChartDatum Main Flow

  1. From the Flow Designer, navigate to the Toolbox > Database section and drag and drop the Fetch Entities step on the workspace. 
  2. In the Properties panel > Entity Fetch Definition > Type Name drop-down menu, search for Account using All/Search.
  3. Scroll to Entity Fetch Definition > Fetch Criteria and click ADD.  
  4. In the next window, use the drop-down to locate usertype in the Field Name drop-down menu. Click OK. 
  5. Under INPUTS > usertype, change the input mapping to constant select Person.
  6. Rename the Output to PersonAccounts.
  7. Add another Fetch Entities Step and connect it to the Results path of the First step. 
  8. In the Properties panel > Entity Fetch Definition > Type Name drop-down menu, search for Account using All/Search.
  9. Under INPUTS > usertype, change the input mapping to Constant. Select Machine.
  10. Rename the Output to MachineAccounts. 

Creating the ChartDatum Subflow

  1. Navigate to Toolbox > Designer Entities > Flows > Advanced and connect a Pick or Create Flow step to the Results outcome of the second Fetch Entities step. 
  2. Connect the No Results and Results outcomes to the Pick or Create Flow step. 
  3. In the Properties panel of the Pick or Create Flow step, click Pick or Create Flow, then Create. Select and name the default Flow. 
  4. In the Flow Designer, click Setup Input Data. 
  5. In the next window, add the following data under Names and Types:
    • SeriesTitleList (String)
    • ElementTitleList (String)
    • SeriesRgbaColorList (String)
    • Series1ValueList (Decimal)
    • Series2ValueList (Decimal)
    • Series3ValueList (Decimal)
      • All values will have IS LIST enabled. 
  6. Click Save. 
  7. Add a Create Data Step and a For Each step to the outcome of the Create Data step. 
  8. Select the For Each Series step and navigate to the Properties panel > INPUTS > Collection. Using the Select From Flow input mapping, select the SeriesTitleList input. 
  9. This will set the Data > Type to String. It is recommended to rename the OUTPUTS for clarity. 
  10. Connect the Done outcome to the End Step.
  11. Next, select a Pick or Create Truth Table step to the Next Outcome of the ForEach step.
  12. In the Properties panel of the Pick or Create Truth Table step, click Pick or Create Truth Table. Click Create.
  13. Select and name the Truth Table. 
  14. In the Rule Designer, select Setup Input Data. 
  15. In the next window, add the following data: Names and Types:
    • SeriesIndex (Int32)
    • Series1Values (Decimal)
    • Series2Values (Decimal)
    • Series3Values (Decimal)
      • Series 1, 2, 3 Values should have IS LIST enabled.
  16. Click Save and exit. 
  17. Click Select Data Element and choose SeriesIndex or the value from the ForEach step's OUTPUTS > Item Index. 
  18. Then, under Number Rules, select Equals for the Verb. 
  19. Edit the Default Output Data column header by clicking the pencil icon. 
  20. Change the Type to Decimal. Enable Is List. 
  21. Select Ok. 
  22. Change the input mapping below the Default Output Data header to Select From Flow, and select Series1Values. 
  23. Add a new row under SeriesIndex Equals, and add 1 for Inputs > Value2. 
  24. Then, in the same row, add Series2Values under Series Value List as shown earlier. 
  25. Add another row. Under SeriesIndex Equals, add 2 for Inputs > value2. Add Series3Values under Series Value List. 
  26. Disable Has No Match Outcome before saving and exiting the Rule Designer. 
  27. Back in the Flow Designer, in the Properties panel > Inputs section, match each input with its corresponding value using a Select From Flow mapping.
  28. Rename the Output SeriesValueList. 

  30. Navigate to the Toolbox > Data > List and drag and connect a Get Item by Index step to the Truth Table outcome. 
  31. With the Get Item by Index step selected, navigate to the Properties panel > List Setup > Item Index and choose a Select From Flow input mapping. Select SeriesIndex. 
  32. For the List Input, choose Select From Flow and then select SeriesRgbaColorList.
  33. From the Toolbox > Favorite Steps section, drag and connect a Create Data step to the outcome of the Get Item by Index step. 
  34. Under Data to Create, click Show Editor and enter CharElementList under name and ChartDatum under Type. Ensure Is List is checked. 
  35. Save and Exit the window, and connect a ForEach step to the Create Data step's outcome in the Toolbox > Flow Management > Iteration category. 
  36. Navigate to the Properties panel > Inputs > Collection and change the input mapping to Select From Flow. Select ElementTitleList. 
  37. Data will automatically populate the required fields. It is recommended to rename Outputs > Next items for clarity. 
  38. On the Next outcome of the For Each step, connect another Get Item by Index step.
  39. Under Inputs > ItemIndex, change the input mapping to Select From Flow and choose ElementTitleIndex. 
  40. For the List Input, choose SeriesValueList using a Select From Flow mapping. 
  41. From the Toolbox > Data > List category, drag and connect an Add Item to List step to the outcome of the Get Item by Index step. 
  42. With the Add Item to List step selected, change the Data > List DataType to ChartDatum using All/Search.
  43. Then, under Inputs > New Item, change the input mapping to Build Data. 
  44. Change the input mapping of the Inputs > ColorOpacity to Constant and add 1. 
  45. The Inputs > ColumnName, DisplayLabel, Label, RowName, and Title will all have a Select From Flow mapping with ElementTitle as the value. 
  46. Set Inputs > Value to a Select From Flow mapping, select RowValue mapping, then select RowValue or the output from the previous Get Item by Index step. 
  47. Next, set the Inputs > Original List to a Select From Flow mapping and choose ChartElementList.
  48. Navigate to Outputs > Done > New List and set the input mapping to Change Value. Choose ChartElementList.
  49. Connect the outcome of the Add Item to List step to the last ForEach step. 
  50. Connect the Done outcome of the last ForEach step to a second Add Item to List step. 
  51. Next, in the Properties panel of the second Add Item to List step, navigate to the Properties panel > Data > List DataType and choose ChartRenderData using All/Search. 
  52. Under Inputs> New Item, choose the Build Data input mapping. 
  53. Change the input mapping for Inputs > Color to Select From Flow and choose SeriesColor. 
  54. The Inputs > Key will have a Select From Flow input mapping with Series selected. 
  55. Inputs > Value will also have a Select From Flow input mapping with ChartElementList selected. 
  56. The Inputs > Original List will have a Select From Flow input mapping of ChartRenderData. 
  57. Navigate to Outputs > Done > New List and set the mapping to Change Value and select ChartRenderData.
  58. Connect the outcome of the Add Item to List step to the First ForEach Step in the Flow. 
  59. Make sure the Endstep passed the ChartRenderData Output, then save and exit the Flow Designer. 

Debugging/Configuring the Final Result

  1. In the Main Flow Designer, navigate to the Properties panel > Inputs of the SubFlow. 
  2. The Element Title List will have a Constant input mapping. Add Person and Machine. 
  3. Change the Input mapping on the Series 1 Value List to Build Array. Add another item; all items have a Select From Flow input mapping. 
    • In the Data Input window for Item 0, select Person Accounts and select Count. Click Done. 
    • In the Data Input window for Item 1, select Machine Accounts and select Count. Click Done.
  4. Select Constant for Series Rgba Color List and Series Title List. 
    • For Series Rgba Color List, add rgb(255, 64, 64)
    • For Series Title List, select Constant and add Accounts By Usertype. 
  5. Rename the New List Output to ChartRenderData. 
  6. Connect the Done path to the End Step. Under Inputs, choose Select From Flow and click ChartRenderData. 
  7. Save and close the Flow, and then save and close the Page Designer. 
  8. Add the Page to the Public folder to see the Pie Chart populate with the selected data.
Reference Articles