--- title: "Populate a Chart Using a Flow" slug: "populate-a-chart-using-a-flow" tags: ["Charts", "Create Flow", "Pages and Dashboards"] updated: 2025-12-12T21:49:11Z published: 2025-12-12T21:49:11Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # Populate a Chart Using a Flow ## 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](https://documentation.decisions.com/docs/exporting-and-importing-overview) article. [Populate Chart Using a Flow-10102022-030409(1).zip](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Populate%20Chart%20Using%20a%20Flow-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](https://documentation.decisions.com/docs/chart-data-modes) 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 **S****ubflow** 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1761923466697.png) 2. From the Page Designer, navigate to the **Toolbox > Favorites** section and drag a **Pie Chart** control to the workspace.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_11h16_11.png) 3. On the **P****roperties panel**, navigate to **CHART DATA > MODE** and use the dropdown to select **USE FLOW**.  ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_11h18_37.png) 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 **F****etch 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**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_11h20_30.png) 5. Under **INPUTS** > **usertype**, change the input mapping to constant select **Person**. 6. Rename the Output to **PersonAccounts**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h00_45.png) 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**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_11h54_58.png) 9. Under **INPUTS** > **usertype**, change the input mapping to **Constant**. Select **Machine**. 10. Rename the Output to **MachineAccounts**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_11h58_24.png) --- #### 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 Entitie****s**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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h05_50.png) 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**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h09_56.png) 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.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h14_05.png) 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**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h17_20.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h19_32(1).png) 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**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h22_07.png) 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**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h27_57.png) 22. Change the input mapping below the **Default Output Data**header to **Select From Flow**, and select **Series1Values**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h33_52.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h35_31.png) 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.** ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h36_58.png) 29. 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**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h39_34.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h52_42.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_12h54_07.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h34_43.png) 41. From the **T****oolbox > 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 Lis****t**step selected, change the **Data > List DataType** to **ChartDatum** using **All/Search**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h37_20.png) 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.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h38_53.png)** 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h40_12.png) 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**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h42_25.png) 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**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h43_40.png) 57. Navigate to **Outputs > Done > New List** and set the mapping to **Change Value** and select **ChartRenderData**.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h45_35.png) 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h47_00.png) --- #### Debugging/Configuring the Final Result 1. In the Main Flow Designer, navigate to the **Properties** panel > **Inputs** of the SubFlow. 2. The **Element Title Lis****t**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 I**tem 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.** - **![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-31_14h50_17.png)** 5. Rename the **New List** **Output** to **ChartRenderData**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-11-05_12h45_00.png) 6. Connect the **Done** path to the End Step. Under**Inputs**, choose **Select From Flow**and click**ChartRenderData. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-11-05_12h46_08.png)** 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.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Recording2025-10-31145545-ezgif.com-video-to-gif-converter.gif) Reference Articles - [Page / Dashboard](https://documentation.decisions.com/docs/pages-dashboards) - [Adding and Customizing Charts on a Page](https://documentation.decisions.com/docs/adding-charts-portal-page) - [Chart Data Modes](https://documentation.decisions.com/docs/chart-data-modes)