/

The most effective way to see at a glance how close you are to a goal or the current status of a metric is to use the Gauge Chart element. It offers an excellent solution for visualizing critical data such as sales targets, capacity utilization, or success rates.

To get started, create your table from the Tables section as shown on the screen. Next, write the InsertKPIData action to add sample data; when applying the action, delete the KPIData section, rewrite it, and press Enter. This step ensures that the correct schema name is prepended to the table name. Test the application using the TEST button, then repeat the same steps by writing the GetKPIData action, which retrieves and filters the data.

Switch to the UI Design module and add your action by clicking the Add Action button, then following the steps: Initial Actions > Custom > Managed DB > GetKPIData. Drag a Row element onto the page, set it to “1” in the Desktop area, and center it in the Layout section of the Styling panel. Drag a Panel element into the Row and adjust its size in the Styling area; set the background to White Background in the Fill section, and set the border radius to “40” in the Radius section of the Border area. Add a Vertical Stack inside the Panel and place the Label and Gauge Chart elements inside it. Drag a Row element below the Gauge Chart, set it to 2 Columns in the Desktop field, and center it both vertically and horizontally in the Styling Layout field. Drag a Label element into the Column and duplicate it using Duplicate.

After adding your action to the page, configure the top Label field. Click on the Gauge Chart to configure the Max, Value, and bottom Label fields as needed. You can customize the color settings in the Colors section.

After clicking the Preview button in the upper-right corner, you’ll see that the data for the monthly new customer targets is successfully displayed on the Gauge Chart.