Dynamically change the dimension in the app components

Hello there, readers!

Have you ever found yourself in a situation where you needed to have a visualization against a different dimension? Perhaps you achieved this by making a copy of the existing chart and adjusting the dimensions. If that worked for you, great!

Now, let's explore another method to achieve the same goal. Let's learn how to dynamically alter the dimensions of a chart based on a drop-down selection.

Imagine a scenario where you want to switch the x-axis of a bar chart dynamically, depending on the selection in a drop-down menu. The process remains consistent for any app component.

Let's break it down into two parts:

1. Making the selection
2. Passing the selection to the chart and updating it

Part 1

To start, let's add an input component and convert it into a dropdown menu. 

Set the type to manual values. :

Each manual value will have two properties.

1.  A title/value (This is seen in the drop down)
2. A column name (This is referred for the selection)

If you want a title different from the column name, simply click on the link icon next to it and enter the column name (remember, it's case-sensitive). Here you dont have to worry about the table it is a part of.

Now, the selection from the dropdown can be stored in a variable. For creating a variable, you could refer to this post (https://www.ariscommunity.com/users/ravitejaavvari/2023-03-06-scriped-columns-aris-process-mining).

Part 2

For the second part, let's add a bar chart and configure it to read from the selected variable in the dropdown. To make the x-axis dynamic, let's create a scripted definition. You can find this while adding the new dimension.

The content of the scripted definition should be executed to the column name selected in the dropdown. Here we need to reference the table name like below.

TableName.${variable name}

The variable name is picked up from the selection in the drop down. Because we have ensured that the case sensitive name is provided as a part of manual values it should be replaced here. Here's an example code snippet that shows the table name and the variable name. 

"Purchase to Pay - Enhancement table_csv"."${SelectedDimension}"

Ensure that the value matches exactly what's referenced in the dropdown menu selection. Now assign a number column to the Y-Axis and see the chart update automatically upon the changes in the dropdown.

Happy Process Mining!