/

The Bar Chart element offers an effective and easy-to-understand solution for comparing categorical data. In this section, we will explore the end-to-end use of the Bar Chart through the “Category-Based Sales Performance” scenario, which displays sales volume, revenue, and cost data for different product categories as multiple series in a sales management application.

First, go to the Tables tab in the Data Sources module. Create a new table named “CategorySales.” Set up the table structure on the screen. To display and add data to the interface, add a new action from the New SQL Action tab within the Data Sources module. Add the SQL action using InsertCategorySales, which is the action that inserts the sample data. When applying it, delete the ‘CategorySales’ part, retype “CategorySales,” and press Enter. This will add the correct schema name before the table name. Then click the Test button. Create the “GetCategorySales” action—which retrieves the data—in the same way.

Open the UI Design module. Add the “GetCategorySales” action to the page using the “Initial Actions” option via the “Add Action” button. Drag and drop the ‘Label’ element onto the page from the left panel. Then add the “Bar Chart” element to the page. Enter the text “Category-Based Sales Performance” in the Value field and set it to Heading 2 in the Styling panel. Add the action that will provide the data to the Bar Chart via the DataSource field. Fill in the Action, Data Label, Target Line Field, Data Field, Data Background Color, Second Data Field, Second Data Background Color, Third Data Field, and Third Data Background Color fields as shown on the page. Enter the line color in the LineColor HEX field and close the dialog.

When you test the application using the Preview button in the upper-right corner, you’ll see a screen where target revenue, sales volume, sales revenue, and cost values are compared on the Bar Chart by category. You can easily filter the visibility of each data series by clicking the Legend area below the chart.